Skip to content
A time picker form field for Sencha Touch 2.0
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
field
picker
README.md

README.md

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
You can’t perform that action at this time.