2014年1月24日 星期五

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
SunMonTueWedThuFriSat
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
SunMonTueWedThuFriSat
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 defaultDescrEx.
valuenullCurrent value datetimepicker. If it is set, ignored input.value
{value:'12.03.2013',
 format:'d.m.Y'}
langenLanguage 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'}
formatY/m/d H:iFormat datetime. More 
{format:'H'}
{format:'Y'}
formatDateY/m/dFormat date for minDate and maxDate
{formatDate:'d.m.Y'}
formatTimeH:i Similarly, formatDate . But for minTime and maxTime
{formatTime:'H'}
step60Step time
{step:5}
closeOnDateSelect0
{closeOnDateSelect:true}
closeOnWithoutClicktrue
{ closeOnWithoutClick :false}
validateOnBlurtrueVerify datetime value from input, when losing focus. If value is not valid datetime, then to value inserts the current datetime
{ validateOnBlur:false}
timepickertrue
{timepicker:false}
datepickertrue
{datepicker:false}
minDatefalse
{minDate:0} // today
{minDate:'2013/12/03'}
{minDate:'-1970/01/02'} // yesterday
{minDate:'05.12.2013',formatDate:'d.m.Y'}
maxDatefalse
{maxDate:0,}
{maxDate:'2013/12/03'}
{maxDate:'+1970/01/02'} // tommorrow
{maxDate:'05.12.2013',formatDate:'d.m.Y'}
minTimefalse
{minTime:0,}// now
{minTime:'12:00'}
{minTime:'13:45:34',formatTime:'H:i:s'}
maxTimefalse
{maxTime:0,}
{maxTime:'12:00'}
{maxTime:'13:45:34',formatTime:'H:i:s'}
allowTimes[]
{allowTimes:[
 '09:00',
 '11:00',
 '12:00',
 '21:00'
]}
maskfalseUse 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
openedfalse 
yearOffset0Year offset for Buddhist era 
inlinefalse 
todayButtontrueShow button "Go To Today" 
defaultSelecttrueHighlight the current date even if the input is empty 
allowBlankfalseAllow field to be empty even with the option validateOnBlur in true 
timepickerScrollbartrue 
onSelectDatefunction(){}
onSelectDate:function(current_time,$input){
  alert(current.dateFormat('d/m/Y'))
}
onSelectTimefunction(){} 
onChangeMonthfunction(){} 
onChangeDateTimefunction(){} 
onShowfunction(){} 
onClosefunction(){} 
onGeneratefunction(){}trigger after construct calendar and timepicker 
withoutCopyrighttrue 
inverseButtonfalse 
scrollMonthtrue 
scrollTimetrue 
scrollInputtrue 
hours12false 
yearStart1950Start value for fast Year selector 
yearEnd2050End value for fast Year selector 
roundTimeroundRound time in timepicker, possible values: round, ceil, floor
{roundTime:'floor'}
dayOfWeekStart0
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

Internet Explorer Firefox Opera Google Chrome Safari


reference : http://xdsoft.net/jqplugins/datetimepicker/
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

wibiya widget