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


Use mask 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'
});
and handler onclick event 
$('#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 onChangeDateTime 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'//tommorow is maximum date calendar
});

Result

Use mask input Example #

javaScript

$('#datetimepicker_mask').datetimepicker({
 timepicker:false,
 mask:true, // '9999/19/39 29:59' - digit is the maximum possible for a cell
});

Result

Set options runtime DateTimePicker #

If select day is Saturday, the minimum set 11:00, otherwise 8:00

javaScript

var logic = function( currentDateTime ){
	// 'this' is jquery object datetimepicker
	if( currentDateTime.getDay()==6 ){
		this.setOptions({
			minTime:'11:00'
		});
	}else
		this.setOptions({
			minTime:'8:00'
		});
};
$('#datetimepicker_rantime').datetimepicker({
	onChangeDateTime:logic,
	onShow:logic
});

Result

After generating a calendar called the event onGenerate #

Invert settings minDate and maxDate

javaScript

$('#datetimepicker8').datetimepicker({
	onGenerate:function( ct ){
		$(this).find('.xdsoft_date')
			.toggleClass('xdsoft_disabled');
	},
	minDate:'+1970/01/2',
	maxDate:'+1970/01/2',
	timepicker:false
});

Result

Full options list

Name  default Descr Ex.
value null Current value datetimepicker. If it is set, ignored input.value 
{value:'12.03.2013',
 format:'d.m.Y'}
lang en Language i18n (en,ru,de,nl) 
{lang:'ru'}
format Y/m/d H:i Format datetime. More  
{format:'H'}
{format:'Y'}
formatDate Y/m/d Format date for minDate and maxDate 
{formatDate:'d.m.Y'}
formatTime H:i  Similarly, formatDate . But for minTime and maxTime 
{formatTime:'H'}
step 60 Step time 
{step:5}
closeOnDateSelect 0 
{closeOnDateSelect:true}
closeOnWithoutClick true 
{ closeOnWithoutClick :false}
validateOnBlur true Verify datetime value from input, when losing focus. If value is not valid datetime, then to value inserts the current datetime 
{ validateOnBlur:false}
timepicker true 
{timepicker:false}
datepicker true 
{datepicker:false}
minDate false 
{minDate:0} // today
{minDate:'2013/12/03'}
{minDate:'-1970/01/02'} // yesterday
{minDate:'05.12.2013',formatDate:'d.m.Y'}
maxDate false 
{maxDate:0,}
{maxDate:'2013/12/03'}
{maxDate:'+1970/01/02'} // tommorrow
{maxDate:'05.12.2013',formatDate:'d.m.Y'}
minTime false 
{minTime:0,}// now
{minTime:'12:00'}
{minTime:'13:45:34',formatTime:'H:i:s'}
maxTime false 
{maxTime:0,}
{maxTime:'12:00'}
{maxTime:'13:45:34',formatTime:'H:i:s'}
allowTimes [] 
{allowTimes:[
	'09:00',
	'11:00',
	'12:00',
	'21:00'
]}
mask false Use mask for input. true - automatically generates a mask on the field 'format', Digit from 0 to 9, set the highest possible digit for the value. For example: the first digit of hours can not be greater than 2, and the first digit of the minutes can not be greater than 5 
{mask:'9999/19/39',format:'Y/m/d'}
{mask:true,format:'Y/m/d'} // automatically generate a mask 9999/99/99
{mask:'29:59',format:'H:i'} //
{mask:true,format:'H:i'} //automatically generate a mask 99:99
opened false  
inline false  
timepickerScrollbar true  
onSelectDate function(){} 
onSelectDate:function(current_time,$input){
  alert(current.dateFormat('d/m/Y'))
}
onSelectTime function(){}  
onChangeMonth function(){}  
onChangeDateTime function(){}  
onShow function(){}  
onClose function(){}  
onGenerate function(){}  
withoutCopyright true  
inverseButton false  
hours12 false  
yearStart 1950 Start value for fast Year selector  
yearEnd 2050 End value for fast Year selector  
dayOfWeekStart 0

Star week DatePicker. Default Sunday - 0.

Monday - 1 ...

  
className
id
style