From ce700250a0e5cf30dbb3de736a6af135885a4f73 Mon Sep 17 00:00:00 2001 From: Chupurnov Valeriy Date: Sun, 14 Feb 2016 05:44:32 +0500 Subject: [PATCH] Added doc.tpl Please update it --- bower.json | 2 +- datetimepicker.jquery.json | 2 +- doc.tpl | 926 +++++++++++++++++++++++++++++++++++++ jquery.datetimepicker.js | 7 +- 4 files changed, 931 insertions(+), 6 deletions(-) create mode 100644 doc.tpl diff --git a/bower.json b/bower.json index 12416b8..c67810b 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "datetimepicker", - "version": "2.4.5", + "version": "2.4.6", "main": [ "jquery.datetimepicker.js", "jquery.datetimepicker.css" diff --git a/datetimepicker.jquery.json b/datetimepicker.jquery.json index b834c8c..db59a94 100644 --- a/datetimepicker.jquery.json +++ b/datetimepicker.jquery.json @@ -1,6 +1,6 @@ { "name": "datetimepicker", - "version": "2.4.5", + "version": "2.4.6", "title": "jQuery Date and Time picker", "description": "jQuery plugin for date, time, or datetime manipulation in form", "keywords": [ diff --git a/doc.tpl b/doc.tpl new file mode 100644 index 0000000..8d16699 --- /dev/null +++ b/doc.tpl @@ -0,0 +1,926 @@ +

DateTimepicker

+

+

Use mask DateTimepicker

+

+

TimePicker

+

+

DatePicker

+

+

Inline DateTimePicker

+

+

Dark theme

+

+ +[include scripts/pp/reklama1.php] +

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','Marz','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

+ +[include scripts/pp/reklama2.php] +{module 147} +

Full options list

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name defaultDescrEx.
lazyInitfalseInitializing plugin occurs only when the user interacts. Greatly accelerates plugin work with a large number of fields
valuenullCurrent value datetimepicker. If it is set, ignored input.value +
{value:'12.03.2013',
+ format:'d.m.Y'}
+
langenLanguage i18n
+ +ar - Arabic +
az - Azerbaijanian (Azeri) +
bg - Bulgarian +
bs - Bosanski +
ca - Catala +
ch - Simplified Chinese +
cs - Cestina +
da - Dansk +
de - German +
el - ???????? +
en - English +
en-GB - English (British) +
es - Spanish +
et - "Eesti" +
eu - Euskara +
fa - Persian +
fi - Finnish (Suomi) +
fr - French +
gl - Galego +
he - Hebrew (?????) +
hr - Hrvatski +
hu - Hungarian +
id - Indonesian +
it - Italian +
ja - Japanese +
ko - Korean (???) +
kr - Korean +
lt - Lithuanian (lietuviu) +
lv - Latvian (Latviesu) +
mk - Macedonian (Ìàêåäîíñêè) +
mn - Mongolian (Ìîíãîë) +
nl - Dutch +
no - Norwegian +
pl - Polish +
pt - Portuguese +
pt-BR - Portugues(Brasil) +
ro - Romanian +
ru - Russian +
se - Swedish +
sk - Slovencina +
sl - Slovenscina +
sq - Albanian (Shqip) +
sr - Serbian Cyrillic (Ñðïñêè) +
sr-YU - Serbian (Srpski) +
sv - Svenska +
th - Thai +
tr - Turkish +
uk - Ukrainian +
vi - Vietnamese +
zh - Simplified Chinese (????) +
zh-TW - Traditional Chinese (????) +
+ + +		 +
$.datetimepicker.setLocale('ru');
+
formatY/m/d H:iFormat datetime. More Also there is a special type of «unixtime» +
{format:'H'}
+{format:'Y'}{format:'unixtime'}
+
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}
+
weeksfalseShow week number +
{weeks:true}
+
theme'default'Setting a color scheme. Now only supported default and dark theme +
{theme:'dark'}
+
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'}
+
startDatefalsecalendar set date use starDate +
{startDate:'1987/12/03'}
+{startDate:new Date()}
+{startDate:'+1970/01/02'} // tommorrow
+{startDate:'08.12.1986',formatDate:'d.m.Y'}
+
defaultDatefalseif 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'}
+
defaultTimefalseif input value is empty, timepicker set time use defaultTime +
{defaultTime:'05:00'}
+{defaultTime:'33-12',formatTime:'i-H'}
+
minTimefalse +
{minTime:0,}// now
+{minTime:new Date()}
+{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(ct,$i){
+  alert(ct.dateFormat('d/m/Y'))
+}
+
onSelectTimefunction(current_time,$input){}
onChangeMonthfunction(current_time,$input){}
onChangeYearfunction(current_time,$input){}
onChangeDateTimefunction(current_time,$input){}
onShowfunction(current_time,$input){}
onClosefunction(current_time,$input){} 
onSelectDate:function(ct,$i){
+  $i.datetimepicker('destroy');
+}
onGeneratefunction(current_time,$input){}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']
+
disabledDates[]

Disbale all dates in list

 +
{disabledDates: ['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014','06.01.2014'], formatDate:'d.m.Y'}
+
id
style
\ No newline at end of file diff --git a/jquery.datetimepicker.js b/jquery.datetimepicker.js index de3620f..bdf4864 100644 --- a/jquery.datetimepicker.js +++ b/jquery.datetimepicker.js @@ -1,10 +1,9 @@ -/* global DateFormatter */ /** - * @preserve jQuery DateTimePicker plugin v2.4.5 + * @preserve jQuery DateTimePicker plugin v2.4.6 * @homepage http://xdsoft.net/jqplugins/datetimepicker/ - * (c) 2014, Chupurnov Valeriy. + * @author Chupurnov Valeriy () */ -/*global document,window,jQuery,setTimeout,clearTimeout,HighlightedDate,getCurrentValue*/ +/*global DateFormatter, document,window,jQuery,setTimeout,clearTimeout,HighlightedDate,getCurrentValue*/ ;(function (factory) { if ( typeof define === 'function' && define.amd ) { // AMD. Register as an anonymous module.