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

January

2013

Sun	Mon	Tue	Wed	Thu	Fri	Sat
30	31	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	1	2

00:00

01:00

02:00

03:00

04:00

05:00

06:00

07:00

08:00

09:00

10:00

11:00

12:00

13:00

14:00

15:00

16:00

17:00

18:00

19:00

20:00

21:00

22:00

23:00

How do I use it?

First include to page css and js files

<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

---

Inline DateTimePicker Example #

javaScript

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

Result

October

2013

Sun	Mon	Tue	Wed	Thu	Fri	Sat
29	30	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	1	2

00:00

01:00

02:00

03:00

04:00

05:00

06:00

07:00

08:00

09:00

10:00

11:00

12:00

13:00

14:00

15:00

16:00

17:00

18:00

19:00

20:00

21:00

22:00

23:00

---

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

---

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

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 - English ru - Russian de - German nl - Dutch tr - Turkish fr - French es - Spanish th - Thai pl - Polish pl - Polish ch - Simplified Chinese	{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
yearOffset	0	Year offset for Buddhist era
inline	false
todayButton	true	Show button "Go To Today"
defaultSelect	true	Highlight the current date even if the input is empty
allowBlank	false	Allow field to be empty even with the option validateOnBlur in true
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(){}	trigger after construct calendar and timepicker
withoutCopyright	true
inverseButton	false
scrollMonth	true
scrollTime	true
scrollInput	true
hours12	false
yearStart	1950	Start value for fast Year selector
yearEnd	2050	End value for fast Year selector
roundTime	round	Round time in timepicker, possible values: round, ceil, floor	{roundTime:'floor'}
dayOfWeekStart	0	Star week DatePicker. Default Sunday - 0. Monday - 1 ...
className
weekends	[]		['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014','06.01.2014']
id
style

Browser Support

    

reference : http://xdsoft.net/jqplugins/datetimepicker/