DateTimePicker jQuery plugin select date and time

Use this plugin to unobtrusively add a datetimepicker, datepicker or timepicker dropdown to your forms. It's easy to customize options. Source code on GitHub or download (zip).

DateTimepicker

TimePicker

DatePicker

Inline DateTimePicker

Download (zip)

How do I use it?

First include to page css and js files

<!-- this should go after your </body> -->
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.js"></script>

Examples

Simple init DateTimePicker Example

HTML

<input id="datetimepicker" type="text" >

JavaScript

$('#datetimepicker').datetimepicker();

Result

i18n DatePicker Example

JavaScript

$('#datetimepicker1').datetimepicker({
 lang:'de',
 i18n:{de:{
   months:[
       'Januar','Februar','März','April','Mai','Juni','Juli','August',
       'September','Oktober','November','Dezember',],
    dayOfWeek:["So.", "Mo", "Di", "Mi", "Do", "Fr", "Sa.",],
 }},
timepicker:false,
format:'d.m.Y'
});

Result

Only TimePicker Example

JavaScript

$('#datetimepicker2').datetimepicker({
	datepicker:false,
	format:'H:i'
});

Result

Inline DateTimePicker Example

JavaScript

$('#datetimepicker3').datetimepicker({
  format:'d.m.Y H:i',
  inline:true,
  lang:'ru'
});

Result

Icon trigger

Click the icon next to the input field to show the datetimepicker

JavaScript

$('#datetimepicker4').datetimepicker({
  format:'d.m.Y H:i',
  lang:'ru'
});

$('#image_button').click(function(){
  $('#datetimepicker4').datetimepicker('show'); //support hide,show and destroy command
});

Result

allowTimes options TimePicker Example

JavaScript

$('#datetimepicker5').datetimepicker({
	datepicker:false,
	allowTimes:['12:00', '13:00', '15:00', '17:00', '17:05', '17:20', '19:00', '20:00']
});

Result

handler changeDateTime Example

JavaScript

$('#datetimepicker6').datetimepicker({
	timepicker:false,
	onChangeDateTime:function(dp,$input){
		alert($input.val())
	}
});

Result

minDate and maxDate Example

JavaScript

$('#datetimepicker7').datetimepicker({
	timepicker:false,
	formatDate:'Y/m/d',
	minDate:'-1970/01/02',//yesterday is minimum date(for today use 0 or -1970/01/01)
	maxDate:'+1970/01/02'//and tommorow is maximum date calendar
});

Result

Full options list

{value:'12.03.2013',
 format:'d.m.Y'}

{lang:'ru'}

{format:'H'}
{format:'Y'}

{formatDate:'d.m.Y'}

{formatTime:'H'}

{step:5}

{closeOnDateSelect:true}

{ closeOnWithoutClick :false}

{timepicker:false}

{datepicker:false}

{minDate:0} // today
{minDate:'2013/12/03'}
{minDate:'-1970/01/02'} // yesterday
{minDate:'05.12.2013',formatDate:'d.m.Y'}

{maxDate:0,}
{maxDate:'2013/12/03'}
{maxDate:'+1970/01/02'} // tommorrow
{maxDate:'05.12.2013',formatDate:'d.m.Y'}

{minTime:0,}// now
{minTime:'12:00'}
{minTime:'13:45:34',formatTime:'H:i:s'}

{maxTime:0,}
{maxTime:'12:00'}
{maxTime:'13:45:34',formatTime:'H:i:s'}

{allowTimes:[
	'09:00',
	'11:00',
	'12:00',
	'21:00'
]}

onSelectDate:function(current_time,$input){
  alert(current.dateFormat('d/m/Y'))
}