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)

parse('adsense5')?>

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

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(){}  
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