Adding a Timepicker to jQuery UI Datepicker
来源:互联网 发布:开博软件注册码 编辑:程序博客网 时间:2024/06/05 03:28
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"});
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' } ]});
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'});
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// don't call if api was used and not key pressif(e.originalEvent !== undefined)tp_inst._onTimeChange();tp_inst._onSelectHandler();},spin: function(e,ui){ // spin eventstp_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({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 by using onSelect and onClose events for more control over functionality:
For more examples and advanced usage grab the Handling Time eBook.
var startDateTextBox = $('#rest_example_4_start');var endDateTextBox = $('#rest_example_4_end');startDateTextBox.datetimepicker({ timeFormat: 'HH:mm z',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({ timeFormat: 'HH:mm z',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 with the getDate and setDate methods. This example uses timezone to demonstrate the timepicker regonizes the timezones and computes the offsets when getting and setting.
var ex13 = $('#utility_example_1');ex13.datetimepicker({timeFormat: 'hh:mm tt z',separator: ' @ ',showTimezone: true});$('#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", {}) ));
- Adding a Timepicker to jQuery UI Datepicker
- Android--UI之DatePicker、TimePicker...
- Android—UI之DatePicker、TimePicker
- DatePicker/TimePicker
- DatePicker、TimePicker
- DatePicker,TimePicker
- TimePicker+DatePicker
- DatePicker&TimePicker
- JQuery UI - datepicker
- jquery ui datepicker使用
- Jquery UI datepicker 实用
- jquery ui datepicker详解
- jquery ui datepicker demo
- jquery ui datepicker
- JQuery UI Datepicker
- JQuery UI datepicker 使用方法
- jQuery UI datepicker
- jquery ui datepicker
- DPL,RPL,CPL 之间的联系和区别
- 使用VC++压缩解压缩文件夹
- CodeForces 149B - Martian Clock
- Ubuntu 13.04 tftp服务配置
- 前端学习
- Adding a Timepicker to jQuery UI Datepicker
- ORACLE 中的一些特殊符号
- 7个表的复杂查询
- textarea的WRAP属性
- geoserver工程创建
- 浅谈远心镜头选择十大参数
- hdu4715之素数筛选
- 在bmp上添加字符
- 20个开源项目托管站点推荐