From aa01e4bcc10d1ecd3e5a3a5e8856bfd99e34fdd7 Mon Sep 17 00:00:00 2001
From: Valeriy
+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 jQuery plugin select date and time
+DateTimepicker
+
+TimePicker
+
+DatePicker
+
+Inline DateTimePicker
+
+
+
+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>
+
+HTML
+<input id="datetimepicker" type="text" >
+JavaScript
+$('#datetimepicker').datetimepicker();
+Result
+ + +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
+ + +JavaScript
+$('#datetimepicker2').datetimepicker({
+ datepicker:false,
+ format:'H:i',
+});
+Result
+ + +JavaScript
+$('#datetimepicker3').datetimepicker({
+ format:'d.m.Y H:i',
+ inline:true,
+ lang:'ru',
+});
+Result
+ + +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
+JavaScript
+$('#datetimepicker5').datetimepicker({
+ datepicker:false,
+ allowTimes:['12:00', '13:00', '15:00', '17:00', '17:05', '17:20', '19:00', '20:00'],
+});
+Result
+ + +JavaScript
+$('#datetimepicker6').datetimepicker({
+ timepicker:false,
+ onChangeDateTime:function(dp,$input){
+ alert($input.val())
+ },
+});
+Result
+ + +Name | +default | +Descr | +Ex. | +
---|---|---|---|
value | +null | +Current value datetimepicker. If it is set, ignored input.value | +
+
+ |
+
lang | +en | +Language i18n (en,ru,de,nl) | +
+
+ |
+
format | +Y/m/d H:i | +Format datetime. More | +
+
+ |
+
formatDate | +Y/m/d | +Format date for minDate and maxDate | +
|
+
formatTime | +H:i | +Similarly, formatDate . But for minTime and maxTime | +
|
+
step | +60 | +Step time | +
+
+ |
+
closeOnDateSelect | +0 | ++ + | +
|
+
closeOnWithoutClick | +true | ++ |
|
+
timepicker | +true | ++ |
|
+
datepicker | +true | ++ |
|
+
minDate | +false | ++ |
|
+
maxDate | +false | ++ |
|
+
minTime | +false | ++ |
|
+
maxTime | +false | ++ |
|
+
allowTimes | +[] | ++ |
|
+
opened | +false | ++ | + |
inline | +false | ++ | + |
timepickerScrollbar | +true | ++ | + |
onSelectDate | +function(){} | ++ |
|
+
onSelectTime | +function(){} | ++ | + |
onChangeMonth | +function(){} | ++ | + |
onChangeDateTime | +function(){} | ++ | + |
onShow | +function(){} | ++ | + |
onClose | +function(){} | ++ | + |
withoutCopyright | +true | ++ | + |
inverseButton | +false | ++ | + |
hours12 | +false | ++ | + |
dayOfWeekStart | +0 | +
+ Star week DatePicker. Default Sunday - 0. + +Monday - 1 ... + |
+ + |