http://trentrichardson.com/examples/timepicker/
脚本下载地址 ： https://files.cnblogs.com/Mac_Hui/jquery-ui-timepicker-addon.7z
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"
});
Using Timezones
Simplest timezone usage:
$('#timezone_example_1').datetimepicker({
timeFormat: 'hh:mm tt z',
showTimezone: true
});
Define your own timezone options:
$('#timezone_example_2').datetimepicker({
timeFormat: 'HH:mm z',
showTimezone: true,
timezoneList: [
{ value: '-0500', label: 'Eastern'},
{ value: '-0600', label: 'Central' },
{ value: '-0700', label: 'Mountain' },
{ value: '-0800', label: 'Pacific' }
]
});
Use timezone string abbreviations for values:
$('#timezone_example_3').datetimepicker({
timeFormat: 'HH:mm z',
showTimezone: true,
timezone: 'MT',
timezoneList: [
{ value: 'ET', label: 'Eastern'},
{ value: 'CT', label: 'Central' },
{ value: 'MT', label: 'Mountain' },
{ value: 'PT', label: 'Pacific' }
]
});
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({
showSecond: true,
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'
});
Create your own control by implementing the create, options, and value methods. If you want to use your new control for all instances use the $.timepicker.setDefaults({controlType:myControl}). Here we implement jQueryUI's spinner control (jQueryUI 1.9+).
var myControl= {
create: function(tp_inst, obj, unit, val, min, max, step){
$('<input class="ui-timepicker-input" value="'+val+'" style="50%">')
.appendTo(obj)
.spinner({
min: min,
max: max,
step: step,
change: function(e,ui){ // key events
tp_inst._onTimeChange();
tp_inst._onSelectHandler();
},
spin: function(e,ui){ // spin events
tp_inst.control.value(tp_inst, obj, unit, ui.value);
tp_inst._onTimeChange();
tp_inst._onSelectHandler();
}
});
return obj;
},
options: function(tp_inst, obj, unit, opts, val){
if(typeof(opts) == 'string' && val !== undefined)
return obj.find('.ui-timepicker-input').spinner(opts, val);
return obj.find('.ui-timepicker-input').spinner(opts);
},
value: function(tp_inst, obj, unit, val){
if(val !== undefined)
return obj.find('.ui-timepicker-input').spinner('value', val);
return obj.find('.ui-timepicker-input').spinner('value');
}
};
$('#slider_example_5').datetimepicker({
controlType: myControl
});
Alternate Fields
Alt field in the simplest form:
$('#alt_example_1').datetimepicker({
altField: "#alt_example_1_alt"
});
With datetime in both:
$('#alt_example_2').datetimepicker({
altField: "#alt_example_2_alt",
altFieldTimeOnly: false
});
Format the altField differently:
$('#alt_example_3').datetimepicker({
ampm: true,
altField: "#alt_example_3_alt",
altFieldTimeOnly: false,
altFormat: "yy-mm-dd",
altTimeFormat: "h:m t",
altSeparator: " @ "
});
With inline mode using altField:
$('#alt_example_4').datetimepicker({
altField: "#alt_example_4_alt",
altFieldTimeOnly: false
});
Time Restraints
Set the min/max hour of every date:
$('#rest_example_1').timepicker({
hourMin: 8,
hourMax: 16
});
Set the min/max date numerically:
$('#rest_example_2').datetimepicker({
numberOfMonths: 2,
minDate: 0,
maxDate: 30
});
Set the min/max date and time with a Date object:
$('#rest_example_3').datetimepicker({
minDate: new Date(2010, 11, 20, 8, 30),
maxDate: new Date(2010, 11, 31, 17, 30)
});
Restrict a start and end date (also shows using onSelect and onClose events):
var startDateTextBox = $('#rest_example_4_start');
var endDateTextBox = $('#rest_example_4_end');
startDateTextBox.datetimepicker({
onClose: function(dateText, inst) {
if (endDateTextBox.val() != '') {
var testStartDate = startDateTextBox.datetimepicker('getDate');
var testEndDate = endDateTextBox.datetimepicker('getDate');
if (testStartDate > testEndDate)
endDateTextBox.datetimepicker('setDate', testStartDate);
}
else {
endDateTextBox.val(dateText);
}
},
onSelect: function (selectedDateTime){
endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate') );
}
});
endDateTextBox.datetimepicker({
onClose: function(dateText, inst) {
if (startDateTextBox.val() != '') {
var testStartDate = startDateTextBox.datetimepicker('getDate');
var testEndDate = endDateTextBox.datetimepicker('getDate');
if (testStartDate > testEndDate)
startDateTextBox.datetimepicker('setDate', testEndDate);
}
else {
startDateTextBox.val(dateText);
}
},
onSelect: function (selectedDateTime){
startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate') );
}
});
Utilities
Get and Set Datetime:
var ex13 = $('#utility_example_1');
ex13.datetimepicker({
dateFormat: "D MM d, yy",
separator: ' @ '
});
$('#utility_example_1_setdt').click(function(){
ex13.datetimepicker('setDate', (new Date()) );
});
$('#utility_example_1_getdt').click(function(){
alert(ex13.datetimepicker('getDate'));
});
Use the utility function to format your own time. $.datepicker.formatTime(format, time, options)
- format
- required - string represenation of the time format to use
- time
- required - hash: { hour, minute, second, millisecond, timezone }
- options
- optional - hash of any options in regional translation (ampm, amNames, pmNames..)
Returns a time string in the specified format.
$('#utility_example_2').text(
$.datepicker.formatTime('HH:mm z', { hour: 14, minute: 36, timezone: '+2000' }, {})
);
Use the utility function to parses a formatted time. $.datepicker.parseTime(format, timeString, options)
- format
- required - string represenation of the time format to use
- time
- required - time string matching the format given in parameter 1
- options
- optional - hash of any options in regional translation (ampm, amNames, pmNames..)
Returns an object with hours, minutes, seconds, milliseconds, timezone.
$('#utility_example_3').text(JSON.stringify(
$.datepicker.parseTime('HH:mm:ss:l z', "14:36:21:765 +2000", {})
));