Skip to content

Latest commit

 

History

History
65 lines (53 loc) · 2.91 KB

README.md

File metadata and controls

65 lines (53 loc) · 2.91 KB
Raw

Ext.field.TimePicker

A time picker form field for Sencha Touch 2.0

About

TimePicker adds easy-to-use and easy-to-configure time-picking abilities to your Sencha Touch 2.0 forms. Like the Ext.field.DatePicker, TimePicker displays a OS-like picker that allows the user to select a specific time.

Although TimePicker allows you to selectively create "time" values via segments, it inevitably treats the value like a single date, so keep this in mind when use it to bind to your models.

Currently, TimePicker allows you to configure 5 slots:

  • Hour
  • Minute
  • Second
  • Millisecond
  • Meridiem (e.g., AM/PM)

Installation

Installing this is super simple. Simply copy both js files into your SDK's src/ux folder.

NOTE: Both files are required as TimePicker relies on Ext.ux.picker.Time for it's implementation of the picker.

Configuration

Configuring TimePicker, like DatePicker, is a combination of setting up config for both classes. All configuration for the picker needs to be set via the "picker" config within Ext.field.TimePicker:

Ext.create('Ext.field.TimePicker', { picker: { // Ext.ux.picker.Time config here... } });

###Ext.ux.field.TimePicker Configuration

  • dateFormat {String} The format to be used when displaying the value in the field
  • default {String} The default string representation of the time to use. Example: '8:00', '14:50'

###Ext.ux.picker.Time Configuration

  • AMText {String} The text to use for the ante-meridiem
  • PMText {String} The text to use for the post-meridiem
  • endHour {Number} The end hour for the time picker
  • endMillisecond {Number} The end millisecond for the time picker
  • endMinute {Number}The end minute for the time picker
  • endSecond {Number} The end second for the time picker
  • hourIncrement {Number} The increment value for hour
  • hourList {Array} Array of hours to use in the hour picker
  • hourText {String} The text to use for the hour title
  • meridiemText {String} The text to use for the meridiem title
  • millisecondIncrement {Number} The increment value for millisecond
  • millisecondList {String} Array of hours to use in the millisecond picker
  • millisecondText {String} The text to use for the millisecond title
  • minuteIncrement {Number} The increment value for minute
  • minuteList {Array} Array of hours to use in the minute picker
  • minuteText {String} The text to use for the minute title
  • secondIncrement {Number} The increment value for second
  • secondList {Array} Array of hours to use in the second picker
  • secondText {String} The text to use for the second title
  • slotOrder {Array} The order of slots in the picker
  • startHour {Number} The start hour for the time picker
  • startMillisecond {Number} The start millisecond for the time picker
  • startMinute {Number} The start minute for the time picker
  • startSecond {Number} The start second for the time picker