datetime picker

piaoling  2014-07-23 11:24:44

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

DateTimePickerjQuery 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

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

Result



i18n DatePicker Example #

All supported languages here

javaScript

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

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

StartEnd

Full options list

Name default Descr Ex.
lazyInit false Initializing plugin occurs only when the user interacts. Greatly accelerates plugin work with a large number of fields
value null Current value datetimepicker. If it is set, ignored input.value
{value:'12.03.2013',
 format:'d.m.Y'}
lang en Language i18n
bg - Bulgarian
ch - Simplified Chinese
cs - Čeština
da - Dansk
de - German
el - Ελληνικά
en - English
es - Spanish
fa - Persian/Farsi
fr - French
hu - Hungarian
it - Italian
ja - Japanese
kr - Korean
nl - Dutch
no - Norwegian
pl - Polish
pt - Portuguese
ru - Russian
se - Swedish
sl - Slovenščina
th - Thai
tr - Turkish
vi - Vietnamese
{lang:'ru'}
format Y/m/d H:i Format datetime. More Also there is a special type of «unixtime»
{format:'H'}
{format:'Y'}{format:'unixtime'}
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}
weeks false Show week number
{weeks:true}
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'}
startDate false calendar set date use starDate
{startDate:'1987/12/03'}
{startDate:new Date()}
{startDate:'+1970/01/02'} // tommorrow
{startDate:'08.12.1986',formatDate:'d.m.Y'}
defaultDate false if input value is empty, calendar set date use defaultDate
{defaultDate:'1987/12/03'}
{defaultDate:new Date()}
{defaultDate:'+1970/01/02'} // tommorrow
{defaultDate:'08.12.1986',formatDate:'d.m.Y'}
defaultTime false if input value is empty, timepicker set time use defaultTime
{defaultTime:'05:00'}
{defaultTime:'33-12',formatTime:'i-H'}
minTime false
{minTime:0,}// now {minTime:new Date()}
{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



类别 :  默认(688)  |  浏览(3494)  |  评论(0)
发表评论(评论将通过邮件发给作者):

Email: