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

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 #

All supported languages here

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

Date Time Picker start date #

javaScript

$('#datetimepicker_start_time').datetimepicker({
	startDate:'+1971/05/01'//or 1986/12/08
});

Result

Date Time Picker from unixtime #

javaScript

$('#datetimepicker_unixtime').datetimepicker({
	format:'unixtime'
});

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 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

disable all weekend #

javaScript

$('#datetimepicker9').datetimepicker({
	onGenerate:function( ct ){
		$(this).find('.xdsoft_date.xdsoft_weekend')
			.addClass('xdsoft_disabled');
	},
	weekends:['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014','06.01.2014'],
	timepicker:false
});

Result

Range between date#

javaScript

$(function(){
 $('#date_timepicker_start').datetimepicker({
  format:'Y/m/d',
  onShow:function( ct ){
   this.setOptions({
    maxDate:$('#date_timepicker_end').val()?$('#date_timepicker_end').val():false
   })
  },
  timepicker:false
 });
 $('#date_timepicker_end').datetimepicker({
  format:'Y/m/d',
  onShow:function( ct ){
   this.setOptions({
    minDate:$('#date_timepicker_start').val()?$('#date_timepicker_start').val():false
   })
  },
  timepicker:false
 });
});

Result

Start   End

Full options list

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

{lang:'ru'}

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

{formatDate:'d.m.Y'}

{formatTime:'H'}

{step:5}

{closeOnDateSelect:true}

{ closeOnWithoutClick :false}

{ validateOnBlur: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'}

{startDate:'1987/12/03'}
{startDate:'+1970/01/02'} // tommorrow
{startDate:'08.12.1986',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'
]}

{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

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

{roundTime:'floor'}

['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014','06.01.2014']