Demo - jquery-simple-datetimepicker

Top | Avaiable options | More methods

Inline

Append to Input-field

Append to Input-field (Inline)

In addition, this default date has specified by the input's value ("2012-01-01 10:00").

Avaiable options

About details for these options, please see: Wiki.

Current date ("current": "2012-3-4 12:30")

dateFormat ("dateFormat": "YY/MM/DD h:m")

locale ("locale": "ja")

Available locales:

Change the interval of minute ("minuteInterval": 15)

Avaiable value:
min: 5, max: 30. (default: 30 minute. it means interval of each 30 minute.)

Change the first day of the week ("firstDayOfWeek": 1)

Avaiable value:
min: 0 (sunday), max: 6 (satday), default: 0 (sunday).
Thanks to: concept1hundred.

Close when selected date & time ("closeOnSelected": true) with append to Input-field mode

It's will also useful for use with two input-fields.
-

Disable the automatic scroll of time-list ("timelistScroll": false)

Disable the fade animation ("animation": false)

Disable the calendar scroll with mouse wheel ("calendarMouseScroll": false)

Disable the Today button ("todayButton": false)

Date-only mode ("dateOnly": true)

Only allow future datetimes ("futureOnly": true)

Initialize with the input-field as blank ("autodateOnStart": false)

<input type="text" id="date_foo" value="">

$('#date_foo').appendDtpicker({
	"autodateOnStart": false
});

Date Ranges (not compatible with 'inline:true' at this time)

Set min and max times ("minTime":"hh:mm" and "maxTime":"hh:mm")

e.g. 08:30 - 19:15, and future-only

Only allow the specified days of the week ("allowWdays")

e.g., Weekdays only
<input type="text" id="date_foo" value="">

$('#date_foo').appendDtpicker({
	"inline": true,
	"allowWdays": [1, 2, 3, 4, 5] // 0: Sun, 1: Mon, 2: Tue, 3: Wed, 4: Thr, 5: Fri, 6: Sat
});

Set the user event-handler (on* methods)

In normally, a picker has been shown/hidden by automatically when necessary.
But you can also catch it, And handle a picker by yourself with using methods of "handler" object.

Available methods in handler object
e.g. Show a dialog, when picker has been shown or hidden.
<input type="text" id="date_foo" value="">

$('#date_foo').appendDtpicker({
	"onShow": function(handler){
		window.alert('Picker is shown!');
	},
	"onHide": function(handler){
		window.alert('Picker is hidden!');
	}
});
e.g. Just-in-time generate.
<input type="text" id="date_jit" value="">
<input type="button" id="btn_generate" value="Generate a picker">

$('#btn_generate').click(function(){
	window.alert("Generate");
	$('#date_jit').appendDtpicker({
		"onInit": function(handler){
			handler.show();
		},
		"onHide": function(handler){
			window.alert("Picker is hidden, Then destroy a picker");
			handler.destroy();
		}
	});
});

More methods

Manual handling of the appended picker

You can handle the appended picker with using "handleDtpicker" method into the input-field.
To handle a picker using handleDtpicker method, call the handleDtpicker method with setting the your hope method-name (e.g. "show" and more) as a parameter.

Available method-names as parameter of handleDtpicker method
e.g. Generate a picker as inline and handle by manual.
<input type="text" id="date_manual" value="">
<input type="button" id="btn_manual_generate" value="Generate">
<input type="button" id="btn_manual_show" value="Show">
<input type="button" id="btn_manual_hide" value="Hide">
<input type="button" id="btn_manual_destroy" value="Destroy">

<script type="text/javascript">
	$(function(){
		$('#btn_manual_generate').click(function(){
			$('#date_manual').appendDtpicker({
				"inline": true
			});
		});
		$('#btn_manual_show').click(function(){
			$('#date_manual').handleDtpicker('show');
		});
		$('#btn_manual_hide').click(function(){
			$('#date_manual').handleDtpicker('hide');
		});
		$('#btn_manual_get_date').click(function(){
			var date = $('#date_manual').handleDtpicker('getDate');
			window.alert(date.toString());
		});
		$('#btn_manual_set_date').click(function(){
			$('#date_manual').handleDtpicker('setDate', new Date(2014, 04, 25, 0, 0, 0));
		});
		$('#btn_manual_destroy').click(function(){
			$('#date_manual').handleDtpicker('destroy');
		});
	});
</script>