Timepicker

转载 2015年07月07日 16:42:21

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

Timepicker comes with a collection of localization files and one combined file with all available localizations. $.timepicker.regional["your localization code here"] is a simple object with preset options:

$('#basic_example_4').timepicker(
	$.timepicker.regional['es']
);

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'
});

Uses one line dropdowns instead of sliders.

$('#slider_example_4andHalf').datetimepicker({
	controlType: 'select',
	oneLine: true,
	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 press
						if(e.originalEvent !== undefined)
							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({
	altField: "#alt_example_3_alt",
	altFieldTimeOnly: false,
	altFormat: "yy-mm-dd",
	altTimeFormat: "h:m t",
	altSeparator: " @ "
});

With inline mode using altField:

Prev
$('#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)
});

Time Ranges

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 = $('#range_example_1_start');
var endDateTextBox = $('#range_example_1_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') );
	}
});

Timepicker also includes some shortcut methods for ranges:

var startDateTextBox = $('#range_example_2_start');
var endDateTextBox = $('#range_example_2_end');

$.timepicker.datetimeRange(
	startDateTextBox,
	endDateTextBox,
	{
		minInterval: (1000*60*60), // 1hr
		dateFormat: 'dd M yy', 
		timeFormat: 'HH:mm',
		start: {}, // start picker options
		end: {} // end picker options					
	}
);

To use only times for a time range use $.timepicker.timeRange():

var startTimeTextBox = $('#range_example_3_start');
var endTimeTextBox = $('#range_example_3_end');

$.timepicker.timeRange(
	startTimeTextBox,
	endTimeTextBox,
	{
		minInterval: (1000*60*60), // 1hr
		timeFormat: 'HH:mm',
		start: {}, // start picker options
		end: {} // end picker options
	}
);

Even though this plugin focuses on datetime, it also provides a dateRange function:

var startDateTextBox = $('#range_example_4_start');
var endDateTextBox = $('#range_example_4_end');

$.timepicker.dateRange(
	startDateTextBox,
	endDateTextBox,
	{
		minInterval: (1000*60*60*24*4), // 4 days
		maxInterval: (1000*60*60*24*8), // 8 days
		start: {}, // start picker options
		end: {} // end picker options
	}
);

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.

14:36 +2000
$('#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.

{"hour":14,"minute":36,"second":21,"millisec":765,"microsec":0,"timezone":1200}
$('#utility_example_3').text(JSON.stringify( 
	$.datepicker.parseTime('HH:mm:ss:l z', "14:36:21:765 +2000", {}) 
));
举报

相关文章推荐

android 时间日期控件的使用(DatePicker、TimePicker、DatePickerDialog、TimePickerDialog、AnalogClock、DigitalClock)

在Android中,时间日期控件相对来说还是比较丰富的。其中,DatePicker用来实现日期输入设置,TimePicker用来实现时间输入设置。DatePickerDialog用来显示日期对话框,T...

android-AnalogClock_DigitalClock 时钟

一个简单的现实时钟和数字时间 老规矩。右键取得图片地址,利用下载工具下载这个显示不出来的图片。后缀改为rar即可得到源代码项目。 package zhang.example; imp...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

bootstrap 设置时间框

网上搜了下都是日立框的,但是需求是,只需要时间就可以了,不需要日期。 看了下bootstrap的,虽然还是会显示日期,但是基本满足要求,而且界面也还过的去,所以就选它了。 ...

Bootstrap中的datetimepicker用法总结

datetimepicker用法总结2016年4月21日更新目录datetimepicker用法总结 目录 简述 官方文档 选项属性 1 format 格式 2 weekStart 一周从哪一天开...

时钟(AnalogClock和 DigitalClock)的功能与用法

AnalogClock和DigitalClock的功能都显示时间,AnalogClock显示的是时钟,DigitalClock显示的是数字时间。效果如下: 跟其他控件一样,都有XML文件来定...

SASS开发环境搭建(webstorm做编辑器)

sass只是了解过,却没有实际操作。下午空余一部分时间,搭个SASS环境扫扫盲吧。遇到的问题还真是不少。 sass安装: 根据实际操作的过程,总结以下步骤:(限window系统) 1、下载RubyIn...

Android控件之AnalogClock、DigitalClock calendar

时钟控件包括AnalogClock和DigitalClock,它们都负责显示时钟,所不同的是AnalogClock控件显示模拟时钟,且只显示时针和分针,而DigitalClock显示数字时钟,可精确到...

DatePicker、TimePicker基本用法

前言在时间和日期开发中,TimePicker和DatePicker经常使用到,这俩个控件是嵌入到View中的,如果想使用弹窗式的,可是使用TimePickerDialog和DataPickerDial...

Android开发之日期、时间选择器(DatePicker和TimePicker)的功能和用法

DatePicker和TimePicker是两个比较常用的控件,它们都从FrameLayout派生而来,其中DatePicker用于选择日期、TimePicker用于选择时间。 DatePicker和...

Android UI设计 时间控件TimePicker用法(含取值)

Android UI设计 时间控件TimePicker用法(含取值) TimePicker是android系统里的时间控件,我们可以通过这个控件让用户输入合法的时间,很方便。 下面...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)