Focus of the text box displays a drop-down of suggested times within a pre-defined time range. Two text boxes can be used to define a time range. Users can type 2:00 pm, 2pm or 2p and the script will understand. The space between the time and am/pm is optional, and the script will allow ":;.," any of those as a separator for the hour/minute. Once you change the duration of the time period, the script will keep that duration if you change the first field. Meaning, by default the duration is 60 minutes. If you changed that to 4 hours by selecting a l0am - 2pm, and then changed the 10am to 11am, the script would automatically update the second field to be 4 hours later, or 3pm. Currently not accessible, but it does allow for the manual entry which helps there.
Other then marking the appropriate input fields with the ID or class needed to reference that field as a target for the script to act upon, nothing is required to be done to the HTML of the page for the calendar to work.
Other than the ".ui.timePicker" class, there are no other CSS edits required. You may edit the CSS file to make the time picker appearance more closely resemble your specific project if desired.
These are the variables that you can set to turn on and off various options.
$("#example").timePicker({step:15});| Name | Type | Default | Options | Description |
|---|---|---|---|---|
| step | number | 30 | number of minutes between suggested options | |
| height | number | 200 | How tall you want the select lists to be | |
| startTime | string | The earliest selectable time (2:00am) | ||
| endTime | string | The latest selectable time (5:00pm) | ||
| separator | string | : | Character used to separate the hours/minutes | |
| parseSeparators | string | [:;\.,] | Regular expression of what separators to allow the user to use | |
| am | string | AM | Text to use for am (for display after user selects) | |
| pm | string | PM | Text to use for pm (for display after user selects) | |
| parseAm | string | (a|A) | Regex for what to look for to identify AM via manual entry | |
| secondField | string | selector of the second field if wanting a range | ||
| duration | number | 60 | starting duration for when you have a range | |
| autoSelect | boolean | true | should the script always start with an item selected | |
| show24Hours | boolean | false | should we display things in 24 hour time (18 instead of 6pm) | |
| showDuration | boolean | true | should the "(2 hours)" be shown | |
| enforceRange | boolean | true | should we force the user to stay within the startTime and endTime | |
| useMakeVisible | boolean | true | should we use makeVisble to slide the timePicker into view (if it's loaded on the page) | |
| makeVisibleOptions | options | {pad:10,speed:100} | paramaters to pass into the makeVisible call (if used) | |
| uiCorners | string | ui-corner-bottom | Which type of corners do you want to use from UI | |
| listId | string | timepicker-list | ||
| onPick | function | callback to fire when the user picks or enters a time. is passed the plugin object (has element, options, etc in it) | ||
| onPickSecond | function | callback to fire when the user picks or enters a time on the second field. is passed the plugin object (has element, options, etc in it) | ||
| onAutoAdjust | function | callback that will fire on the second field when it gets auto-adjusted. is passed the second field | ||
| onOutOfRange | function | callback to fire when the user enters a time that is out of the startTime/endTime range. is passed the entered text, startTime, endTime, options |
Options = The script only recognizes these values
The following data- attributes can be used to quickly setup timepicker fields.
| Name | Type | Default | Options | Description |
|---|---|---|---|---|
| string | The earliest selectable time (2:00am) | |||
| string | The latest selectable time (5:00pm) | |||
| string | selector of the second field if wanting a range |
Options Column = The script only recognizes these values