1. Introduction
Alloy UI has
been supporting DatePicker widget but it does not have ability to choose time.
That’s why we need to find another widget that meets our requirement. The timepicker addon adds a timepicker to
jQuery UI Datepicker, thus the datepicker and slider components (jQueryUI) are
required for using any of these. In addition all datepicker options are still
available through the timepicker addon
2. Usage.
2.1. Option
The timepicker does inherit all options from datepicker.
However, there are many options that are shared by them both, and many
timepicker only options.
2.1.1. Localization Options
|
currentText
|
Default: "Now", A Localization Setting - Text for the Now
button.
|
|
closeText
|
Default: "Done", A Localization Setting - Text for the Close
button.
|
|
amNames
|
Default: ['AM', 'A'], A Localization Setting - Array of strings to try
and parse against to determine AM.
|
|
pmNames
|
Default: ['PM', 'P'], A Localization Setting - Array of strings to
try and parse against to determine PM.
|
|
timeFormat
|
Default: "HH:mm", A Localization Setting - String of format
tokens to be replaced with the time.See Formatting.
|
|
timeSuffix
|
Default: "", A Localization Setting - String to place after
the formatted time.
|
|
|
|
|
timeOnlyTitle
|
Default: "Choose Time", A Localization Setting - Title of the wigit
when using only timepicker.
|
|
timeText
|
Default: "Time", A Localization Setting - Label used within
timepicker for the formatted time.
|
|
hourText
|
Default: "Hour", A Localization Setting - Label used to identify
the hour slider.
|
|
minuteText
|
Default: "Minute", A Localization Setting - Label used to identify
the minute slider.
|
|
secondText
|
Default: "Second", A Localization Setting - Label used to identify
the second slider.
|
|
millisecText
|
Default: "Millisecond", A Localization Setting - Label used to identify
the millisecond slider.
|
|
microsecText
|
Default: "Microsecond", A Localization Setting - Label used to identify
the microsecond slider.
|
|
timezoneText
|
Default: "Timezone", A Localization Setting - Label used to identify
the timezone slider.
|
|
isRTL
|
Default: false, A Localization Setting - Right to Left support.
|
2.1.2. Alt Field Options
|
altFieldTimeOnly
|
Default: true -
When altField is used from datepicker altField will only receive the
formatted time and the original field only receives date.
|
|
altSeparator
|
Default: (separator option) - String placed between
formatted date and formatted time in the altField.
|
|
altTimeSuffix
|
Default: (timeSuffix option) - String always placed
after the formatted time in the altField.
|
|
altTimeFormat
|
Default: (timeFormat option) - The time format to use
with the altField.
|
2.1.3. Timezone Options
|
timezoneList
|
Default: [generated timezones] - An array of timezones
used to populate the timezone select. Can be an array of values or an array
of objects: { label: "EDT", value: -240 }. The value should be the
offset number in minutes. So "-0400" which is the format
"-hhmm", would equate to -240 minutes.
|
2.1.4. Time Field Options.
controlType |
Default: 'slider' - Whether to use 'slider' or 'select'. If 'slider' is unavailable through jQueryUI, 'select' will be used. For advanced usage you may pass an object which implements "create", "options", "value" methods to use controls other than sliders or selects. See the _controls property in the source code for more details. |
showHour |
Default: null - Whether to show the hour control. The default of null will use detection from timeFormat. |
showMinute |
Default: null - Whether to show the minute control. The default of null will use detection from timeFormat. |
showSecond |
Default: null - Whether to show the second control. The default of null will use detection from timeFormat. |
showMillisec |
Default: null - Whether to show the millisecond control. The default of null will use detection from timeFormat. |
showMicrosec |
Default: null - Whether to show the microsecond control. The default of null will use detection from timeFormat. |
showTimezone |
Default: null - Whether to show the timezone select. |
showTime |
Default: true - Whether to show the time selected within the datetimepicker. |
stepHour |
Default: 1 - Hours per step the slider makes. |
stepMinute |
Default: 1 - Minutes per step the slider makes. |
stepSecond |
Default: 1 - Seconds per step the slider makes. |
stepMillisec |
Default: 1 - Milliseconds per step the slider makes. |
stepMicrosec |
Default: 1 - Microseconds per step the slider makes. |
hour |
Default: 0 - Initial hour set. |
minute |
Default: 0 - Initial minute set. |
second |
Default: 0 - Initial second set. |
millisec |
Default: 0 - Initial millisecond set. |
microsec |
|
timezone |
Default: null - Initial timezone set. This is the offset in minutes. If null the browser's local timezone will be used. If you're timezone is "-0400" you would use -240. For backwards compatibility you may pass "-0400", however the timezone is stored in minutes and more reliable. |
hourMin |
Default: 0 - The minimum hour allowed for all dates. |
minuteMin |
Default: 0 - The minimum minute allowed for all dates. |
secondMin |
Default: 0 - The minimum second allowed for all dates. |
millisecMin |
Default: 0 - The minimum millisecond allowed for all dates. |
microsecMin |
Default: 0 - The minimum microsecond allowed for all dates. |
hourMax |
Default: 23 - The maximum hour allowed for all dates. |
minuteMax |
Default: 59 - The maximum minute allowed for all dates. |
secondMax |
Default: 59 - The maximum second allowed for all dates. |
millisecMax |
Default: 999 - The maximum millisecond allowed for all dates. |
microsecMax |
Default: 999 - The maximum microsecond allowed for all dates. |
hourGrid |
Default: 0 - When greater than 0 a label grid will be generated under the slider. This number represents the units (in hours) between labels. |
minuteGrid |
Default: 0 - When greater than 0 a label grid will be generated under the slider. This number represents the units (in minutes) between labels. |
secondGrid |
Default: 0 - When greater than 0 a label grid will be genereated under the slider. This number represents the units (in seconds) between labels. |
millisecGrid |
Default: 0 - When greater than 0 a label grid will be genereated under the slider. This number represents the units (in milliseconds) between labels. |
microsecGrid |
Default: 0 - When greater than 0 a label grid will be genereated under the slider. This number represents the units (in microseconds) between labels. |
2.1.5. Other Options
showButtonPanel |
Default: true - Whether to show the button panel at the bottom. This is generally needed. |
timeOnly |
Default: false - Hide the datepicker and only provide a time interface |
onSelect |
Default: null - Function to be called when a date is chosen or time has changed (parameters: datetimeText, datepickerInstance). |
alwaysSetTime |
Default: true - Always have a time set internally, even before user has chosen one. |
separator |
Default: " " - When formatting the time this string is placed between the formatted date and formatted time. |
2.2. Formatting .
The default format is "HH:mm". To use 12 hour time
use something similar to: "hh:mm tt". When both "t" and
lower case "h" are present in the timeFormat, 12 hour time will be
used.
|
H
|
Hour with no leading 0 (24 hour)
|
|
HH
|
Hour with leading 0 (24 hour)
|
|
h
|
Hour with no leading 0 (12 hour)
|
|
hh
|
Hour with leading 0 (12 hour)
|
|
m
|
Minute with no leading 0
|
|
mm
|
Minute with leading 0
|
|
s
|
Second with no leading 0
|
|
ss
|
Second with leading 0
|
|
l
|
Milliseconds always with leading 0
|
|
c
|
Microseconds always with leading 0
|
|
t
|
a or p for AM/PM
|
|
T
|
A or P for AM/PM
|
|
tt
|
am or pm for AM/PM
|
|
TT
|
AM or PM for AM/PM
|
|
z
|
Timezone as defined by timezoneList
|
|
Z
|
Timezone in Iso 8601 format (+04:45)
|
3. Example
3.1. Basic Initializations
Add a simple datetimepicker to jQuery UI's datepicker
$('#basic_example_1').datetimepicker();
|
Add only a timepicker:
$('#basic_example_2').timepicker();
|
Format the time:
$('#basic_example_3').datetimepicker({
timeFormat: "hh:mm tt"
});
|
3.2. Using Timezones
Simplest timezone usage:
$('#timezone_example_1').datetimepicker({
timeFormat: 'hh:mm tt z'
});
|
Define your own timezone options:
$('#timezone_example_2').datetimepicker({
timeFormat: 'HH:mm z',
timezoneList: [
{ value: -300, label: 'Eastern'},
{ value: -360, label: 'Central' },
{ value: -420, label: 'Mountain' },
{ value: -480, label: 'Pacific' }
]
});
|
You may also use timezone string abbreviations for values.
This should be used with caution. Computing accurate javascript Date objects
may not be possible when trying to retrieve or set the date from timepicker
(see setDate and getDate examples below). For simple input values however this
should work.
$('#timezone_example_3').datetimepicker({
timeFormat: 'HH:mm z',
timezone: 'MT',
timezoneList: [
{ value: 'ET', label: 'Eastern'},
{ value: 'CT', label: 'Central' },
{ value: 'MT', label: 'Mountain' },
{ value: 'PT', label: 'Pacific' }
]
});
|
3.2. Slider Modifications
Add a grid to each slider:
$('#slider_example_1').timepicker({
hourGrid: 4,
minuteGrid: 10,
timeFormat: 'hh:mm tt'
});
|
Set the interval step of sliders:
$('#slider_example_2').datetimepicker({
timeFormat: 'HH:mm:ss',
stepHour: 2,
stepMinute: 10,
stepSecond: 10
});
|
Add sliderAccess plugin for touch devices
$('#slider_example_3').datetimepicker({
addSliderAccess: true,
sliderAccessArgs: { touchonly: false }
});
|
Use dropdowns instead of sliders. By default if slider is
not available dropdowns will be used.
$('#slider_example_4').datetimepicker({
controlType: 'select',
timeFormat: 'hh:mm tt'
});
|
No comments:
Post a Comment