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

时间选择器(timepicker)

/// //时间选择器,依赖于jquery.easyui (function ($) { $.fn.extend({ setTime: function () { $(this).ea...
  • apollokk
  • apollokk
  • 2014年07月08日 17:13
  • 13417

inputTimeDemo

  • 2017年06月09日 10:22
  • 2.98MB
  • 下载

Timepicker

Add a simple datetimepicker to jQuery UI's datepicker $('#basic_example_1').datetimepicker(); A...
  • alex_0629
  • alex_0629
  • 2015年07月07日 16:42
  • 529

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

DatePicker和TimePicker是两个比较常用的控件,它们都从FrameLayout派生而来,其中DatePicker用于选择日期、TimePicker用于选择时间。 DatePicker和...
  • fengyuzhengfan
  • fengyuzhengfan
  • 2014年07月28日 21:29
  • 28714

7.1.3 TimePicker结合案例详解

TimePicker是Android的时间设置控件。TimePicker类的继承图如下:java.lang.Object   ↳android.view.View     ↳android.view...
  • tonny_guan
  • tonny_guan
  • 2011年07月25日 17:06
  • 1651

jQuery日期和时间插件(精确到秒[jquery-ui-timepicker-addon.js])

推荐一个可以精确到秒的时间插件 官网地址:http://trentrichardson.com/examples/timepicker/ 官网demo下载:https://github.c...
  • GlatChen
  • GlatChen
  • 2015年09月08日 11:10
  • 10718

js timepicker 控件案例

时间控件案例 使用 jquery timepicker
  • VirusFu
  • VirusFu
  • 2013年09月04日 14:45
  • 1120

Android TimePiker 样式修改

1.TimePiker 样式修改Picker的字体颜色的方法,就是指定自定义TimePiker的样式 android:theme=”@style/Theme.picker” ...
  • lengqi0101
  • lengqi0101
  • 2016年12月30日 16:52
  • 639

Android 6.0 中TimePicker显示为滚动样式的方法

Android 6.0 中TimePicker显示为滚动样式的方法
  • Zackratos
  • Zackratos
  • 2016年09月05日 19:17
  • 3105

timepicker 支持中文

timepicker是一个jquery ui date的插件,可以支持选择时间和分钟。本文讨论如何支持中文,通过检查代码可以看到: /* * Timepicker manager. * Use ...
  • sheismylife
  • sheismylife
  • 2013年11月04日 14:08
  • 5395
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Timepicker
举报原因:
原因补充:

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