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="width: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
});