DateTimepicker

Use mask DateTimepicker

TimePicker

DatePicker

Inline DateTimePicker

Dark theme

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="build/jquery.datetimepicker.full.min.js"></script>

Examples

Simple init DateTimePicker Example #

HTML

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

javaScript

jQuery('#datetimepicker').datetimepicker();

Result

i18n DatePicker Example #

All supported languages here

javaScript

jQuery.datetimepicker.setLocale('de');

jQuery('#datetimepicker1').datetimepicker({
 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

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

Result

Date Time Picker start date #

javaScript

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

Result

Date Time Picker from unixtime #

javaScript

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

Result

Inline DateTimePicker Example #

javaScript

jQuery('#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

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

and handler onclick event

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

Result

allowTimes options TimePicker Example #

javaScript

jQuery('#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

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

Result

minDate and maxDate Example #

javaScript

jQuery('#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

jQuery('#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'
    });
};
jQuery('#datetimepicker_rantime').datetimepicker({
  onChangeDateTime:logic,
  onShow:logic
});

Result

After generating a calendar called the event onGenerate #

Invert settings minDate and maxDate

javaScript

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

Result

disable all weekend #

javaScript

jQuery('#datetimepicker9').datetimepicker({
  onGenerate:function( ct ){
    jQuery(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

Use other date parser#

Date-functions library, Baron Schwartz, used in DateTimePicker for parse and format datetime certainly good, but it is licensed under the LGPL. It is not bad and not good. In this example, you see how use other date parse library

Before start, remove code below jquery.datetimepicker.js. Remove all after comment

// Parse and Format Library

After this add in page next code, as previously

<script src="jquery.datetimepicker.js"></script>

After this you must define two methods for Date object

Date.parseDate = function( input, format ){
  // you code for convert string to date object
  // simplest variant - use native Date.parse, not given format parametr
return Date.parse(input);
};
Date.prototype.dateFormat = function( format ){
  //you code for convert date object to format string
  //for example
  switch( format ){
    case 'd': return this.getDate();
    case 'H:i:s': return this.getHours()+':'+this.getMinutes()+':'+this.getSeconds();
    case 'h:i a': return ((this.getHours() %12) ? this.getHours() % 12 : 12)+':'+this.getMinutes()+(this.getHours() < 12 ? 'am' : 'pm');
  }
  // or default format
  return this.getDate()+'.'+(this.getMonth()+ 1)+'.'+this.getFullYear();
};

It is only example, it is not real code. For real project this.getDate() must be replace to (this.getDate()<0:'0':'')+this.getDate()

This approach will work in a particular project, but does not work in another. Therefore use the other libraries for working with dates - Moment.js.

How to use moment.js with jquery datetimepicker

Add this code in page

<script src="http://momentjs.com/downloads/moment.min.js"></script>

After this, again re-define 2 methods

Date.parseDate = function( input, format ){
  return moment(input,format).toDate();
};
Date.prototype.dateFormat = function( format ){
  return moment(this).format(format);
};

After this, you can init datetimepicker with moment.js format

jQuery('#datetimepicker').datetimepicker({
  format:'DD.MM.YYYY h:mm a',
  formatTime:'h:mm a',
  formatDate:'DD.MM.YYYY'
});

Range between date#

javaScript

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

Result

Start End

Full options list

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

$.datetimepicker.setLocale('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}

{weeks:true}

{theme:'dark'}

{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:new Date()}
{startDate:'+1970/01/02'} // tommorrow
{startDate:'08.12.1986',formatDate:'d.m.Y'}

{defaultDate:'1987/12/03'}
{defaultDate:new Date()}
{defaultDate:'+1970/01/02'} // tommorrow
{defaultDate:'08.12.1986',formatDate:'d.m.Y'}

{defaultTime:'05:00'}
{defaultTime:'33-12',formatTime:'i-H'}

{minTime:0,}// now
{minTime:new Date()}
{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(ct,$i){
  alert(ct.dateFormat('d/m/Y'))
}

onSelectDate:function(ct,$i){
  $i.datetimepicker('destroy');
}

{roundTime:'floor'}

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

{disabledDates: ['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014','06.01.2014'], formatDate:'d.m.Y'}

{allowDates: ['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014','06.01.2014'], formatDate:'d.m.Y'}

{format:'Y-m-d',allowDateRe:'\d{4}-(03-31|06-30|09-30|12-31)' }