Giter Club home page Giter Club logo

ext.ux.field.timepicker's Introduction

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.