bootstrap-datetimepicker.js 51 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593
  1. /* =========================================================
  2. * bootstrap-datetimepicker.js
  3. * =========================================================
  4. * Copyright 2012 Stefan Petre
  5. * Improvements by Andrew Rowls
  6. * Improvements by Sébastien Malot
  7. * Improvements by Yun Lai
  8. * Improved by Keenthemes for Bootstrap 3.0 Support
  9. * Project URL : http://www.malot.fr/bootstrap-datetimepicker
  10. *
  11. * Licensed under the Apache License, Version 2.0 (the "License");
  12. * you may not use this file except in compliance with the License.
  13. * You may obtain a copy of the License at
  14. *
  15. * http://www.apache.org/licenses/LICENSE-2.0
  16. *
  17. * Unless required by applicable law or agreed to in writing, software
  18. * distributed under the License is distributed on an "AS IS" BASIS,
  19. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  20. * See the License for the specific language governing permissions and
  21. * limitations under the License.
  22. * ========================================================= */
  23. !function( $ ) {
  24. function UTCDate(){
  25. return new Date(Date.UTC.apply(Date, arguments));
  26. }
  27. function UTCToday(){
  28. var today = new Date();
  29. return UTCDate(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate(), today.getUTCHours(), today.getUTCMinutes(), today.getUTCSeconds(), 0);
  30. }
  31. // Picker object
  32. var Datetimepicker = function(element, options) {
  33. var that = this;
  34. this.element = $(element);
  35. this.language = options.language || this.element.data('date-language') || "en";
  36. this.language = this.language in dates ? this.language : "en";
  37. this.isRTL = dates[this.language].rtl || ($('body').css("direction") == 'rtl');
  38. this.formatType = options.formatType || this.element.data('format-type') || 'standard';
  39. this.format = DPGlobal.parseFormat(options.format || this.element.data('date-format') || dates[this.language].format || DPGlobal.getDefaultFormat(this.formatType, 'input'), this.formatType);
  40. this.isInline = false;
  41. this.isVisible = false;
  42. this.isInput = this.element.is('input');
  43. this.component = this.element.is('.date') ? this.element.find('.date-set').parent() : false;
  44. this.componentReset = this.element.is('.date') ? this.element.find('.date-reset').parent() : false;
  45. this.hasInput = this.component && this.element.find('input').length;
  46. if (this.component && this.component.length === 0) {
  47. this.component = false;
  48. }
  49. this.linkField = options.linkField || this.element.data('link-field') || false;
  50. this.linkFormat = DPGlobal.parseFormat(options.linkFormat || this.element.data('link-format') || DPGlobal.getDefaultFormat(this.formatType, 'link'), this.formatType);
  51. this.minuteStep = options.minuteStep || this.element.data('minute-step') || 5;
  52. this.pickerPosition = options.pickerPosition || this.element.data('picker-position') || 'bottom-right';
  53. this.showMeridian = options.showMeridian || this.element.data('show-meridian') || false;
  54. this.initialDate = options.initialDate || new Date();
  55. this._attachEvents();
  56. this.formatViewType = "datetime";
  57. if ('formatViewType' in options) {
  58. this.formatViewType = options.formatViewType;
  59. } else if ('formatViewType' in this.element.data()) {
  60. this.formatViewType = this.element.data('formatViewType');
  61. }
  62. this.minView = 0;
  63. if ('minView' in options) {
  64. this.minView = options.minView;
  65. } else if ('minView' in this.element.data()) {
  66. this.minView = this.element.data('min-view');
  67. }
  68. this.minView = DPGlobal.convertViewMode(this.minView);
  69. this.maxView = DPGlobal.modes.length-1;
  70. if ('maxView' in options) {
  71. this.maxView = options.maxView;
  72. } else if ('maxView' in this.element.data()) {
  73. this.maxView = this.element.data('max-view');
  74. }
  75. this.maxView = DPGlobal.convertViewMode(this.maxView);
  76. this.wheelViewModeNavigation = false;
  77. if('wheelViewModeNavigation' in options){
  78. this.wheelViewModeNavigation = options.wheelViewModeNavigation;
  79. }else if('wheelViewModeNavigation' in this.element.data()){
  80. this.wheelViewModeNavigation = this.element.data('view-mode-wheel-navigation');
  81. }
  82. this.wheelViewModeNavigationInverseDirection = false;
  83. if('wheelViewModeNavigationInverseDirection' in options){
  84. this.wheelViewModeNavigationInverseDirection = options.wheelViewModeNavigationInverseDirection;
  85. }else if('wheelViewModeNavigationInverseDirection' in this.element.data()){
  86. this.wheelViewModeNavigationInverseDirection = this.element.data('view-mode-wheel-navigation-inverse-dir');
  87. }
  88. this.wheelViewModeNavigationDelay = 100;
  89. if('wheelViewModeNavigationDelay' in options){
  90. this.wheelViewModeNavigationDelay = options.wheelViewModeNavigationDelay;
  91. }else if('wheelViewModeNavigationDelay' in this.element.data()){
  92. this.wheelViewModeNavigationDelay = this.element.data('view-mode-wheel-navigation-delay');
  93. }
  94. this.startViewMode = 2;
  95. if ('startView' in options) {
  96. this.startViewMode = options.startView;
  97. } else if ('startView' in this.element.data()) {
  98. this.startViewMode = this.element.data('start-view');
  99. }
  100. this.startViewMode = DPGlobal.convertViewMode(this.startViewMode);
  101. this.viewMode = this.startViewMode;
  102. this.viewSelect = this.minView;
  103. if ('viewSelect' in options) {
  104. this.viewSelect = options.viewSelect;
  105. } else if ('viewSelect' in this.element.data()) {
  106. this.viewSelect = this.element.data('view-select');
  107. }
  108. this.viewSelect = DPGlobal.convertViewMode(this.viewSelect);
  109. this.forceParse = true;
  110. if ('forceParse' in options) {
  111. this.forceParse = options.forceParse;
  112. } else if ('dateForceParse' in this.element.data()) {
  113. this.forceParse = this.element.data('date-force-parse');
  114. }
  115. this.picker = $(DPGlobal.template)
  116. .appendTo(this.isInline ? this.element : 'body')
  117. .on({
  118. click: $.proxy(this.click, this),
  119. mousedown: $.proxy(this.mousedown, this)
  120. });
  121. if(this.wheelViewModeNavigation)
  122. {
  123. if($.fn.mousewheel)
  124. {
  125. this.picker.on({mousewheel: $.proxy(this.mousewheel,this)});
  126. }else
  127. {
  128. console.log("Mouse Wheel event is not supported. Please include the jQuery Mouse Wheel plugin before enabling this option");
  129. }
  130. }
  131. if (this.isInline) {
  132. this.picker.addClass('datetimepicker-inline');
  133. } else {
  134. this.picker.addClass('datetimepicker-dropdown-' + this.pickerPosition + ' dropdown-menu');
  135. }
  136. if (this.isRTL){
  137. this.picker.addClass('datetimepicker-rtl');
  138. this.picker.find('.prev i, .next i')
  139. .toggleClass('icon-arrow-left icon-arrow-right');
  140. }
  141. $(document).on('mousedown', function (e) {
  142. // Clicked outside the datetimepicker, hide it
  143. if ($(e.target).closest('.datetimepicker').length === 0) {
  144. that.hide();
  145. }
  146. });
  147. this.autoclose = false;
  148. if ('autoclose' in options) {
  149. this.autoclose = options.autoclose;
  150. } else if ('dateAutoclose' in this.element.data()) {
  151. this.autoclose = this.element.data('date-autoclose');
  152. }
  153. this.keyboardNavigation = true;
  154. if ('keyboardNavigation' in options) {
  155. this.keyboardNavigation = options.keyboardNavigation;
  156. } else if ('dateKeyboardNavigation' in this.element.data()) {
  157. this.keyboardNavigation = this.element.data('date-keyboard-navigation');
  158. }
  159. this.todayBtn = (options.todayBtn || this.element.data('date-today-btn') || false);
  160. this.todayHighlight = (options.todayHighlight || this.element.data('date-today-highlight') || false);
  161. this.weekStart = ((options.weekStart || this.element.data('date-weekstart') || dates[this.language].weekStart || 0) % 7);
  162. this.weekEnd = ((this.weekStart + 6) % 7);
  163. this.startDate = -Infinity;
  164. this.endDate = Infinity;
  165. this.daysOfWeekDisabled = [];
  166. this.setStartDate(options.startDate || this.element.data('date-startdate'));
  167. this.setEndDate(options.endDate || this.element.data('date-enddate'));
  168. this.setDaysOfWeekDisabled(options.daysOfWeekDisabled || this.element.data('date-days-of-week-disabled'));
  169. this.fillDow();
  170. this.fillMonths();
  171. this.update();
  172. this.showMode();
  173. if(this.isInline) {
  174. this.show();
  175. }
  176. };
  177. Datetimepicker.prototype = {
  178. constructor: Datetimepicker,
  179. _events: [],
  180. _attachEvents: function(){
  181. this._detachEvents();
  182. if (this.isInput) { // single input
  183. this._events = [
  184. [this.element, {
  185. focus: $.proxy(this.show, this),
  186. keyup: $.proxy(this.update, this),
  187. keydown: $.proxy(this.keydown, this)
  188. }]
  189. ];
  190. }
  191. else if (this.component && this.hasInput){ // component: input + button
  192. this._events = [
  193. // For components that are not readonly, allow keyboard nav
  194. [this.element.find('input'), {
  195. focus: $.proxy(this.show, this),
  196. keyup: $.proxy(this.update, this),
  197. keydown: $.proxy(this.keydown, this)
  198. }],
  199. [this.component, {
  200. click: $.proxy(this.show, this)
  201. }]
  202. ];
  203. if (this.componentReset) {
  204. this._events.push([
  205. this.componentReset,
  206. {click: $.proxy(this.reset, this)}
  207. ]);
  208. }
  209. }
  210. else if (this.element.is('div')) { // inline datetimepicker
  211. this.isInline = true;
  212. }
  213. else {
  214. this._events = [
  215. [this.element, {
  216. click: $.proxy(this.show, this)
  217. }]
  218. ];
  219. }
  220. for (var i=0, el, ev; i<this._events.length; i++){
  221. el = this._events[i][0];
  222. ev = this._events[i][1];
  223. el.on(ev);
  224. }
  225. },
  226. _detachEvents: function(){
  227. for (var i=0, el, ev; i<this._events.length; i++){
  228. el = this._events[i][0];
  229. ev = this._events[i][1];
  230. el.off(ev);
  231. }
  232. this._events = [];
  233. },
  234. show: function(e) {
  235. this.picker.show();
  236. this.height = this.component ? this.component.outerHeight() : this.element.outerHeight();
  237. if (this.forceParse) {
  238. this.update();
  239. }
  240. this.place();
  241. $(window).on('resize', $.proxy(this.place, this));
  242. if (e) {
  243. e.stopPropagation();
  244. e.preventDefault();
  245. }
  246. this.isVisible = true;
  247. this.element.trigger({
  248. type: 'show',
  249. date: this.date
  250. });
  251. },
  252. hide: function(e){
  253. if(!this.isVisible) return;
  254. if(this.isInline) return;
  255. this.picker.hide();
  256. $(window).off('resize', this.place);
  257. this.viewMode = this.startViewMode;
  258. this.showMode();
  259. if (!this.isInput) {
  260. $(document).off('mousedown', this.hide);
  261. }
  262. if (
  263. this.forceParse &&
  264. (
  265. this.isInput && this.element.val() ||
  266. this.hasInput && this.element.find('input').val()
  267. )
  268. )
  269. this.setValue();
  270. this.isVisible = false;
  271. this.element.trigger({
  272. type: 'hide',
  273. date: this.date
  274. });
  275. },
  276. remove: function() {
  277. this._detachEvents();
  278. this.picker.remove();
  279. delete this.picker;
  280. delete this.element.data().datetimepicker;
  281. },
  282. getDate: function() {
  283. var d = this.getUTCDate();
  284. return new Date(d.getTime() + (d.getTimezoneOffset()*60000));
  285. },
  286. getUTCDate: function() {
  287. return this.date;
  288. },
  289. setDate: function(d) {
  290. this.setUTCDate(new Date(d.getTime() - (d.getTimezoneOffset()*60000)));
  291. },
  292. setUTCDate: function(d) {
  293. if (d >= this.startDate && d <= this.endDate) {
  294. this.date = d;
  295. this.setValue();
  296. this.viewDate = this.date;
  297. this.fill();
  298. } else {
  299. this.element.trigger({
  300. type: 'outOfRange',
  301. date: d,
  302. startDate: this.startDate,
  303. endDate: this.endDate
  304. });
  305. }
  306. },
  307. setFormat: function(format) {
  308. this.format = DPGlobal.parseFormat(format, this.formatType);
  309. var element;
  310. if (this.isInput) {
  311. element = this.element;
  312. } else if (this.component){
  313. element = this.element.find('input');
  314. }
  315. if (element && element.val()) {
  316. this.setValue();
  317. }
  318. },
  319. setValue: function() {
  320. var formatted = this.getFormattedDate();
  321. if (!this.isInput) {
  322. if (this.component){
  323. this.element.find('input').val(formatted);
  324. }
  325. this.element.data('date', formatted);
  326. } else {
  327. this.element.val(formatted);
  328. }
  329. if (this.linkField) {
  330. $('#' + this.linkField).val(this.getFormattedDate(this.linkFormat));
  331. }
  332. },
  333. getFormattedDate: function(format) {
  334. if(format == undefined) format = this.format;
  335. return DPGlobal.formatDate(this.date, format, this.language, this.formatType);
  336. },
  337. setStartDate: function(startDate){
  338. this.startDate = startDate || -Infinity;
  339. if (this.startDate !== -Infinity) {
  340. this.startDate = DPGlobal.parseDate(this.startDate, this.format, this.language, this.formatType);
  341. }
  342. this.update();
  343. this.updateNavArrows();
  344. },
  345. setEndDate: function(endDate){
  346. this.endDate = endDate || Infinity;
  347. if (this.endDate !== Infinity) {
  348. this.endDate = DPGlobal.parseDate(this.endDate, this.format, this.language, this.formatType);
  349. }
  350. this.update();
  351. this.updateNavArrows();
  352. },
  353. setDaysOfWeekDisabled: function(daysOfWeekDisabled){
  354. this.daysOfWeekDisabled = daysOfWeekDisabled || [];
  355. if (!$.isArray(this.daysOfWeekDisabled)) {
  356. this.daysOfWeekDisabled = this.daysOfWeekDisabled.split(/,\s*/);
  357. }
  358. this.daysOfWeekDisabled = $.map(this.daysOfWeekDisabled, function (d) {
  359. return parseInt(d, 10);
  360. });
  361. this.update();
  362. this.updateNavArrows();
  363. },
  364. place: function(){
  365. if(this.isInline) return;
  366. var zIndex = parseInt(this.element.parents().filter(function() {
  367. return $(this).css('z-index') != 'auto';
  368. }).first().css('z-index'))+10;
  369. var offset, top, left;
  370. if (this.component) {
  371. offset = this.component.offset();
  372. left = offset.left;
  373. if (this.pickerPosition == 'bottom-left' || this.pickerPosition == 'top-left') {
  374. left += this.component.outerWidth() - this.picker.outerWidth();
  375. }
  376. } else {
  377. offset = this.element.offset();
  378. left = offset.left;
  379. }
  380. if (this.pickerPosition == 'top-left' || this.pickerPosition == 'top-right') {
  381. top = offset.top - this.picker.outerHeight();
  382. } else {
  383. top = offset.top + this.height;
  384. }
  385. this.picker.css({
  386. top: top,
  387. left: left,
  388. zIndex: zIndex
  389. });
  390. },
  391. update: function(){
  392. var date, fromArgs = false;
  393. if(arguments && arguments.length && (typeof arguments[0] === 'string' || arguments[0] instanceof Date)) {
  394. date = arguments[0];
  395. fromArgs = true;
  396. } else {
  397. date = this.element.data('date') || (this.isInput ? this.element.val() : this.element.find('input').val()) || this.initialDate;
  398. }
  399. if (!date) {
  400. date = new Date();
  401. fromArgs = false;
  402. }
  403. this.date = DPGlobal.parseDate(date, this.format, this.language, this.formatType);
  404. if (fromArgs) this.setValue();
  405. if (this.date < this.startDate) {
  406. this.viewDate = new Date(this.startDate);
  407. } else if (this.date > this.endDate) {
  408. this.viewDate = new Date(this.endDate);
  409. } else {
  410. this.viewDate = new Date(this.date);
  411. }
  412. this.fill();
  413. },
  414. fillDow: function(){
  415. var dowCnt = this.weekStart,
  416. html = '<tr>';
  417. while (dowCnt < this.weekStart + 7) {
  418. html += '<th class="dow">'+dates[this.language].daysMin[(dowCnt++)%7]+'</th>';
  419. }
  420. html += '</tr>';
  421. this.picker.find('.datetimepicker-days thead').append(html);
  422. },
  423. fillMonths: function(){
  424. var html = '',
  425. i = 0;
  426. while (i < 12) {
  427. html += '<span class="month">'+dates[this.language].monthsShort[i++]+'</span>';
  428. }
  429. this.picker.find('.datetimepicker-months td').html(html);
  430. },
  431. fill: function() {
  432. if (this.date == null || this.viewDate == null) {
  433. return;
  434. }
  435. var d = new Date(this.viewDate),
  436. year = d.getUTCFullYear(),
  437. month = d.getUTCMonth(),
  438. dayMonth = d.getUTCDate(),
  439. hours = d.getUTCHours(),
  440. minutes = d.getUTCMinutes(),
  441. startYear = this.startDate !== -Infinity ? this.startDate.getUTCFullYear() : -Infinity,
  442. startMonth = this.startDate !== -Infinity ? this.startDate.getUTCMonth() : -Infinity,
  443. endYear = this.endDate !== Infinity ? this.endDate.getUTCFullYear() : Infinity,
  444. endMonth = this.endDate !== Infinity ? this.endDate.getUTCMonth() : Infinity,
  445. currentDate = (new UTCDate(this.date.getUTCFullYear(), this.date.getUTCMonth(), this.date.getUTCDate())).valueOf(),
  446. today = new Date();
  447. this.picker.find('.datetimepicker-days thead th:eq(1)')
  448. .text(dates[this.language].months[month]+' '+year);
  449. if (this.formatViewType == "time") {
  450. var hourConverted = hours % 12 ? hours % 12 : 12;
  451. var hoursDisplay = (hourConverted < 10 ? '0' : '') + hourConverted;
  452. var minutesDisplay = (minutes < 10 ? '0' : '') + minutes;
  453. var meridianDisplay = dates[this.language].meridiem[hours < 12 ? 0 : 1];
  454. this.picker.find('.datetimepicker-hours thead th:eq(1)')
  455. .text(hoursDisplay + ':' + minutesDisplay + ' ' + meridianDisplay.toUpperCase());
  456. this.picker.find('.datetimepicker-minutes thead th:eq(1)')
  457. .text(hoursDisplay + ':' + minutesDisplay + ' ' + meridianDisplay.toUpperCase());
  458. } else {
  459. this.picker.find('.datetimepicker-hours thead th:eq(1)')
  460. .text(dayMonth + ' ' + dates[this.language].months[month] + ' ' + year);
  461. this.picker.find('.datetimepicker-minutes thead th:eq(1)')
  462. .text(dayMonth + ' ' + dates[this.language].months[month] + ' ' + year);
  463. }
  464. this.picker.find('tfoot th.today')
  465. .text(dates[this.language].today)
  466. .toggle(this.todayBtn !== false);
  467. this.updateNavArrows();
  468. this.fillMonths();
  469. /*var prevMonth = UTCDate(year, month, 0,0,0,0,0);
  470. prevMonth.setUTCDate(prevMonth.getDate() - (prevMonth.getUTCDay() - this.weekStart + 7)%7);*/
  471. var prevMonth = UTCDate(year, month-1, 28,0,0,0,0),
  472. day = DPGlobal.getDaysInMonth(prevMonth.getUTCFullYear(), prevMonth.getUTCMonth());
  473. prevMonth.setUTCDate(day);
  474. prevMonth.setUTCDate(day - (prevMonth.getUTCDay() - this.weekStart + 7)%7);
  475. var nextMonth = new Date(prevMonth);
  476. nextMonth.setUTCDate(nextMonth.getUTCDate() + 42);
  477. nextMonth = nextMonth.valueOf();
  478. var html = [];
  479. var clsName;
  480. while(prevMonth.valueOf() < nextMonth) {
  481. if (prevMonth.getUTCDay() == this.weekStart) {
  482. html.push('<tr>');
  483. }
  484. clsName = '';
  485. if (prevMonth.getUTCFullYear() < year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() < month)) {
  486. clsName += ' old';
  487. } else if (prevMonth.getUTCFullYear() > year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() > month)) {
  488. clsName += ' new';
  489. }
  490. // Compare internal UTC date with local today, not UTC today
  491. if (this.todayHighlight &&
  492. prevMonth.getUTCFullYear() == today.getFullYear() &&
  493. prevMonth.getUTCMonth() == today.getMonth() &&
  494. prevMonth.getUTCDate() == today.getDate()) {
  495. clsName += ' today';
  496. }
  497. if (prevMonth.valueOf() == currentDate) {
  498. clsName += ' active';
  499. }
  500. if ((prevMonth.valueOf() + 86400000) <= this.startDate || prevMonth.valueOf() > this.endDate ||
  501. $.inArray(prevMonth.getUTCDay(), this.daysOfWeekDisabled) !== -1) {
  502. clsName += ' disabled';
  503. }
  504. html.push('<td class="day'+clsName+'">'+prevMonth.getUTCDate() + '</td>');
  505. if (prevMonth.getUTCDay() == this.weekEnd) {
  506. html.push('</tr>');
  507. }
  508. prevMonth.setUTCDate(prevMonth.getUTCDate()+1);
  509. }
  510. this.picker.find('.datetimepicker-days tbody').empty().append(html.join(''));
  511. html = [];
  512. var txt = '', meridian = '', meridianOld = '';
  513. for (var i=0;i<24;i++) {
  514. var actual = UTCDate(year, month, dayMonth, i);
  515. clsName = '';
  516. // We want the previous hour for the startDate
  517. if ((actual.valueOf() + 3600000) <= this.startDate || actual.valueOf() > this.endDate) {
  518. clsName += ' disabled';
  519. } else if (hours == i) {
  520. clsName += ' active';
  521. }
  522. if (this.showMeridian && dates[this.language].meridiem.length == 2) {
  523. meridian = (i<12?dates[this.language].meridiem[0]:dates[this.language].meridiem[1]);
  524. if (meridian != meridianOld) {
  525. if (meridianOld != '') {
  526. html.push('</fieldset>');
  527. }
  528. html.push('<fieldset class="hour"><legend>'+meridian.toUpperCase()+'</legend>');
  529. }
  530. meridianOld = meridian;
  531. txt = (i%12?i%12:12);
  532. html.push('<span class="hour'+clsName+' hour_'+(i<12?'am':'pm')+'">'+txt+'</span>');
  533. if (i == 23) {
  534. html.push('</fieldset>');
  535. }
  536. } else {
  537. txt = i+':00';
  538. html.push('<span class="hour'+clsName+'">'+txt+'</span>');
  539. }
  540. }
  541. this.picker.find('.datetimepicker-hours td').html(html.join(''));
  542. html = [];
  543. txt = '', meridian = '', meridianOld = '';
  544. for(var i=0;i<60;i+=this.minuteStep) {
  545. var actual = UTCDate(year, month, dayMonth, hours, i, 0);
  546. clsName = '';
  547. if (actual.valueOf() < this.startDate || actual.valueOf() > this.endDate) {
  548. clsName += ' disabled';
  549. } else if (Math.floor(minutes/this.minuteStep) == Math.floor(i/this.minuteStep)) {
  550. clsName += ' active';
  551. }
  552. if (this.showMeridian && dates[this.language].meridiem.length == 2) {
  553. meridian = (hours<12?dates[this.language].meridiem[0]:dates[this.language].meridiem[1]);
  554. if (meridian != meridianOld) {
  555. if (meridianOld != '') {
  556. html.push('</fieldset>');
  557. }
  558. html.push('<fieldset class="minute"><legend>'+meridian.toUpperCase()+'</legend>');
  559. }
  560. meridianOld = meridian;
  561. txt = (hours%12?hours%12:12);
  562. //html.push('<span class="minute'+clsName+' minute_'+(hours<12?'am':'pm')+'">'+txt+'</span>');
  563. html.push('<span class="minute'+clsName+'">'+txt+':'+(i<10?'0'+i:i)+'</span>');
  564. if (i == 59) {
  565. html.push('</fieldset>');
  566. }
  567. } else {
  568. txt = i+':00';
  569. //html.push('<span class="hour'+clsName+'">'+txt+'</span>');
  570. html.push('<span class="minute'+clsName+'">'+hours+':'+(i<10?'0'+i:i)+'</span>');
  571. }
  572. }
  573. this.picker.find('.datetimepicker-minutes td').html(html.join(''));
  574. var currentYear = this.date.getUTCFullYear();
  575. var months = this.picker.find('.datetimepicker-months')
  576. .find('th:eq(1)')
  577. .text(year)
  578. .end()
  579. .find('span').removeClass('active');
  580. if (currentYear == year) {
  581. months.eq(this.date.getUTCMonth()).addClass('active');
  582. }
  583. if (year < startYear || year > endYear) {
  584. months.addClass('disabled');
  585. }
  586. if (year == startYear) {
  587. months.slice(0, startMonth).addClass('disabled');
  588. }
  589. if (year == endYear) {
  590. months.slice(endMonth+1).addClass('disabled');
  591. }
  592. html = '';
  593. year = parseInt(year/10, 10) * 10;
  594. var yearCont = this.picker.find('.datetimepicker-years')
  595. .find('th:eq(1)')
  596. .text(year + '-' + (year + 9))
  597. .end()
  598. .find('td');
  599. year -= 1;
  600. for (var i = -1; i < 11; i++) {
  601. html += '<span class="year'+(i == -1 || i == 10 ? ' old' : '')+(currentYear == year ? ' active' : '')+(year < startYear || year > endYear ? ' disabled' : '')+'">'+year+'</span>';
  602. year += 1;
  603. }
  604. yearCont.html(html);
  605. this.place();
  606. },
  607. updateNavArrows: function() {
  608. var d = new Date(this.viewDate),
  609. year = d.getUTCFullYear(),
  610. month = d.getUTCMonth(),
  611. day = d.getUTCDate(),
  612. hour = d.getUTCHours();
  613. switch (this.viewMode) {
  614. case 0:
  615. if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear()
  616. && month <= this.startDate.getUTCMonth()
  617. && day <= this.startDate.getUTCDate()
  618. && hour <= this.startDate.getUTCHours()) {
  619. this.picker.find('.prev').css({visibility: 'hidden'});
  620. } else {
  621. this.picker.find('.prev').css({visibility: 'visible'});
  622. }
  623. if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear()
  624. && month >= this.endDate.getUTCMonth()
  625. && day >= this.endDate.getUTCDate()
  626. && hour >= this.endDate.getUTCHours()) {
  627. this.picker.find('.next').css({visibility: 'hidden'});
  628. } else {
  629. this.picker.find('.next').css({visibility: 'visible'});
  630. }
  631. break;
  632. case 1:
  633. if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear()
  634. && month <= this.startDate.getUTCMonth()
  635. && day <= this.startDate.getUTCDate()) {
  636. this.picker.find('.prev').css({visibility: 'hidden'});
  637. } else {
  638. this.picker.find('.prev').css({visibility: 'visible'});
  639. }
  640. if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear()
  641. && month >= this.endDate.getUTCMonth()
  642. && day >= this.endDate.getUTCDate()) {
  643. this.picker.find('.next').css({visibility: 'hidden'});
  644. } else {
  645. this.picker.find('.next').css({visibility: 'visible'});
  646. }
  647. break;
  648. case 2:
  649. if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear()
  650. && month <= this.startDate.getUTCMonth()) {
  651. this.picker.find('.prev').css({visibility: 'hidden'});
  652. } else {
  653. this.picker.find('.prev').css({visibility: 'visible'});
  654. }
  655. if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear()
  656. && month >= this.endDate.getUTCMonth()) {
  657. this.picker.find('.next').css({visibility: 'hidden'});
  658. } else {
  659. this.picker.find('.next').css({visibility: 'visible'});
  660. }
  661. break;
  662. case 3:
  663. case 4:
  664. if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear()) {
  665. this.picker.find('.prev').css({visibility: 'hidden'});
  666. } else {
  667. this.picker.find('.prev').css({visibility: 'visible'});
  668. }
  669. if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear()) {
  670. this.picker.find('.next').css({visibility: 'hidden'});
  671. } else {
  672. this.picker.find('.next').css({visibility: 'visible'});
  673. }
  674. break;
  675. }
  676. },
  677. mousewheel: function(e){
  678. e.preventDefault();
  679. e.stopPropagation();
  680. if(this.wheelPause)
  681. {
  682. return;
  683. }
  684. this.wheelPause = true;
  685. var originalEvent = e.originalEvent;
  686. var delta = originalEvent.wheelDelta;
  687. var mode = delta > 0 ? 1:(delta === 0)?0:-1;
  688. if(this.wheelViewModeNavigationInverseDirection)
  689. {
  690. mode = -mode;
  691. }
  692. this.showMode(mode);
  693. setTimeout($.proxy(function(){
  694. this.wheelPause = false
  695. },this),this.wheelViewModeNavigationDelay);
  696. },
  697. click: function(e) {
  698. e.stopPropagation();
  699. e.preventDefault();
  700. var target = $(e.target).closest('span, td, th, legend');
  701. if (target.length == 1) {
  702. if (target.is('.disabled')) {
  703. this.element.trigger({
  704. type: 'outOfRange',
  705. date: this.viewDate,
  706. startDate: this.startDate,
  707. endDate: this.endDate
  708. });
  709. return;
  710. }
  711. switch(target[0].nodeName.toLowerCase()) {
  712. case 'th':
  713. switch(target[0].className) {
  714. case 'switch':
  715. this.showMode(1);
  716. break;
  717. case 'prev':
  718. case 'next':
  719. var dir = DPGlobal.modes[this.viewMode].navStep * (target[0].className == 'prev' ? -1 : 1);
  720. switch(this.viewMode){
  721. case 0:
  722. this.viewDate = this.moveHour(this.viewDate, dir);
  723. break;
  724. case 1:
  725. this.viewDate = this.moveDate(this.viewDate, dir);
  726. break;
  727. case 2:
  728. this.viewDate = this.moveMonth(this.viewDate, dir);
  729. break;
  730. case 3:
  731. case 4:
  732. this.viewDate = this.moveYear(this.viewDate, dir);
  733. break;
  734. }
  735. this.fill();
  736. break;
  737. case 'today':
  738. var date = new Date();
  739. date = UTCDate(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), 0);
  740. this.viewMode = this.startViewMode;
  741. this.showMode(0);
  742. this._setDate(date);
  743. this.fill();
  744. if (this.autoclose) {
  745. this.hide();
  746. }
  747. break;
  748. }
  749. break;
  750. case 'span':
  751. if (!target.is('.disabled')) {
  752. var year = this.viewDate.getUTCFullYear(),
  753. month = this.viewDate.getUTCMonth(),
  754. day = this.viewDate.getUTCDate(),
  755. hours = this.viewDate.getUTCHours(),
  756. minutes = this.viewDate.getUTCMinutes(),
  757. seconds = this.viewDate.getUTCSeconds();
  758. if (target.is('.month')) {
  759. this.viewDate.setUTCDate(1);
  760. month = target.parent().find('span').index(target);
  761. day = this.viewDate.getUTCDate();
  762. this.viewDate.setUTCMonth(month);
  763. this.element.trigger({
  764. type: 'changeMonth',
  765. date: this.viewDate
  766. });
  767. if (this.viewSelect >= 3) {
  768. this._setDate(UTCDate(year, month, day, hours, minutes, seconds, 0));
  769. }
  770. } else if (target.is('.year')) {
  771. this.viewDate.setUTCDate(1);
  772. year = parseInt(target.text(), 10) || 0;
  773. this.viewDate.setUTCFullYear(year);
  774. this.element.trigger({
  775. type: 'changeYear',
  776. date: this.viewDate
  777. });
  778. if (this.viewSelect >= 4) {
  779. this._setDate(UTCDate(year, month, day, hours, minutes, seconds, 0));
  780. }
  781. } else if (target.is('.hour')){
  782. hours = parseInt(target.text(), 10) || 0;
  783. if (target.hasClass('hour_am') || target.hasClass('hour_pm')) {
  784. if (hours == 12 && target.hasClass('hour_am')) {
  785. hours = 0;
  786. } else if (hours != 12 && target.hasClass('hour_pm')) {
  787. hours += 12;
  788. }
  789. }
  790. this.viewDate.setUTCHours(hours);
  791. this.element.trigger({
  792. type: 'changeHour',
  793. date: this.viewDate
  794. });
  795. if (this.viewSelect >= 1) {
  796. this._setDate(UTCDate(year, month, day, hours, minutes, seconds, 0));
  797. }
  798. } else if (target.is('.minute')){
  799. minutes = parseInt(target.text().substr(target.text().indexOf(':')+1), 10) || 0;
  800. this.viewDate.setUTCMinutes(minutes);
  801. this.element.trigger({
  802. type: 'changeMinute',
  803. date: this.viewDate
  804. });
  805. if (this.viewSelect >= 0) {
  806. this._setDate(UTCDate(year, month, day, hours, minutes, seconds, 0));
  807. }
  808. }
  809. if (this.viewMode != 0) {
  810. var oldViewMode = this.viewMode;
  811. this.showMode(-1);
  812. this.fill();
  813. if (oldViewMode == this.viewMode && this.autoclose) {
  814. this.hide();
  815. }
  816. } else {
  817. this.fill();
  818. if (this.autoclose) {
  819. this.hide();
  820. }
  821. }
  822. }
  823. break;
  824. case 'td':
  825. if (target.is('.day') && !target.is('.disabled')){
  826. var day = parseInt(target.text(), 10) || 1;
  827. var year = this.viewDate.getUTCFullYear(),
  828. month = this.viewDate.getUTCMonth(),
  829. hours = this.viewDate.getUTCHours(),
  830. minutes = this.viewDate.getUTCMinutes(),
  831. seconds = this.viewDate.getUTCSeconds();
  832. if (target.is('.old')) {
  833. if (month === 0) {
  834. month = 11;
  835. year -= 1;
  836. } else {
  837. month -= 1;
  838. }
  839. } else if (target.is('.new')) {
  840. if (month == 11) {
  841. month = 0;
  842. year += 1;
  843. } else {
  844. month += 1;
  845. }
  846. }
  847. this.viewDate.setUTCFullYear(year);
  848. this.viewDate.setUTCMonth(month);
  849. this.viewDate.setUTCDate(day);
  850. this.element.trigger({
  851. type: 'changeDay',
  852. date: this.viewDate
  853. });
  854. if (this.viewSelect >= 2) {
  855. this._setDate(UTCDate(year, month, day, hours, minutes, seconds, 0));
  856. }
  857. }
  858. var oldViewMode = this.viewMode;
  859. this.showMode(-1);
  860. this.fill();
  861. if (oldViewMode == this.viewMode && this.autoclose) {
  862. this.hide();
  863. }
  864. break;
  865. }
  866. }
  867. },
  868. _setDate: function(date, which){
  869. if (!which || which == 'date')
  870. this.date = date;
  871. if (!which || which == 'view')
  872. this.viewDate = date;
  873. this.fill();
  874. this.setValue();
  875. var element;
  876. if (this.isInput) {
  877. element = this.element;
  878. } else if (this.component){
  879. element = this.element.find('input');
  880. }
  881. if (element) {
  882. element.change();
  883. if (this.autoclose && (!which || which == 'date')) {
  884. //this.hide();
  885. }
  886. }
  887. this.element.trigger({
  888. type: 'changeDate',
  889. date: this.date
  890. });
  891. },
  892. moveMinute: function(date, dir){
  893. if (!dir) return date;
  894. var new_date = new Date(date.valueOf());
  895. //dir = dir > 0 ? 1 : -1;
  896. new_date.setUTCMinutes(new_date.getUTCMinutes() + (dir * this.minuteStep));
  897. return new_date;
  898. },
  899. moveHour: function(date, dir){
  900. if (!dir) return date;
  901. var new_date = new Date(date.valueOf());
  902. //dir = dir > 0 ? 1 : -1;
  903. new_date.setUTCHours(new_date.getUTCHours() + dir);
  904. return new_date;
  905. },
  906. moveDate: function(date, dir){
  907. if (!dir) return date;
  908. var new_date = new Date(date.valueOf());
  909. //dir = dir > 0 ? 1 : -1;
  910. new_date.setUTCDate(new_date.getUTCDate() + dir);
  911. return new_date;
  912. },
  913. moveMonth: function(date, dir){
  914. if (!dir) return date;
  915. var new_date = new Date(date.valueOf()),
  916. day = new_date.getUTCDate(),
  917. month = new_date.getUTCMonth(),
  918. mag = Math.abs(dir),
  919. new_month, test;
  920. dir = dir > 0 ? 1 : -1;
  921. if (mag == 1){
  922. test = dir == -1
  923. // If going back one month, make sure month is not current month
  924. // (eg, Mar 31 -> Feb 31 == Feb 28, not Mar 02)
  925. ? function(){ return new_date.getUTCMonth() == month; }
  926. // If going forward one month, make sure month is as expected
  927. // (eg, Jan 31 -> Feb 31 == Feb 28, not Mar 02)
  928. : function(){ return new_date.getUTCMonth() != new_month; };
  929. new_month = month + dir;
  930. new_date.setUTCMonth(new_month);
  931. // Dec -> Jan (12) or Jan -> Dec (-1) -- limit expected date to 0-11
  932. if (new_month < 0 || new_month > 11)
  933. new_month = (new_month + 12) % 12;
  934. } else {
  935. // For magnitudes >1, move one month at a time...
  936. for (var i=0; i<mag; i++)
  937. // ...which might decrease the day (eg, Jan 31 to Feb 28, etc)...
  938. new_date = this.moveMonth(new_date, dir);
  939. // ...then reset the day, keeping it in the new month
  940. new_month = new_date.getUTCMonth();
  941. new_date.setUTCDate(day);
  942. test = function(){ return new_month != new_date.getUTCMonth(); };
  943. }
  944. // Common date-resetting loop -- if date is beyond end of month, make it
  945. // end of month
  946. while (test()){
  947. new_date.setUTCDate(--day);
  948. new_date.setUTCMonth(new_month);
  949. }
  950. return new_date;
  951. },
  952. moveYear: function(date, dir){
  953. return this.moveMonth(date, dir*12);
  954. },
  955. dateWithinRange: function(date){
  956. return date >= this.startDate && date <= this.endDate;
  957. },
  958. keydown: function(e){
  959. if (this.picker.is(':not(:visible)')){
  960. if (e.keyCode == 27) // allow escape to hide and re-show picker
  961. this.show();
  962. return;
  963. }
  964. var dateChanged = false,
  965. dir, day, month,
  966. newDate, newViewDate;
  967. switch(e.keyCode){
  968. case 27: // escape
  969. this.hide();
  970. e.preventDefault();
  971. break;
  972. case 37: // left
  973. case 39: // right
  974. if (!this.keyboardNavigation) break;
  975. dir = e.keyCode == 37 ? -1 : 1;
  976. viewMode = this.viewMode;
  977. if (e.ctrlKey) {
  978. viewMode += 2;
  979. } else if (e.shiftKey) {
  980. viewMode += 1;
  981. }
  982. if (viewMode == 4) {
  983. newDate = this.moveYear(this.date, dir);
  984. newViewDate = this.moveYear(this.viewDate, dir);
  985. } else if (viewMode == 3) {
  986. newDate = this.moveMonth(this.date, dir);
  987. newViewDate = this.moveMonth(this.viewDate, dir);
  988. } else if (viewMode == 2) {
  989. newDate = this.moveDate(this.date, dir);
  990. newViewDate = this.moveDate(this.viewDate, dir);
  991. } else if (viewMode == 1) {
  992. newDate = this.moveHour(this.date, dir);
  993. newViewDate = this.moveHour(this.viewDate, dir);
  994. } else if (viewMode == 0) {
  995. newDate = this.moveMinute(this.date, dir);
  996. newViewDate = this.moveMinute(this.viewDate, dir);
  997. }
  998. if (this.dateWithinRange(newDate)){
  999. this.date = newDate;
  1000. this.viewDate = newViewDate;
  1001. this.setValue();
  1002. this.update();
  1003. e.preventDefault();
  1004. dateChanged = true;
  1005. }
  1006. break;
  1007. case 38: // up
  1008. case 40: // down
  1009. if (!this.keyboardNavigation) break;
  1010. dir = e.keyCode == 38 ? -1 : 1;
  1011. viewMode = this.viewMode;
  1012. if (e.ctrlKey) {
  1013. viewMode += 2;
  1014. } else if (e.shiftKey) {
  1015. viewMode += 1;
  1016. }
  1017. if (viewMode == 4) {
  1018. newDate = this.moveYear(this.date, dir);
  1019. newViewDate = this.moveYear(this.viewDate, dir);
  1020. } else if (viewMode == 3) {
  1021. newDate = this.moveMonth(this.date, dir);
  1022. newViewDate = this.moveMonth(this.viewDate, dir);
  1023. } else if (viewMode == 2) {
  1024. newDate = this.moveDate(this.date, dir * 7);
  1025. newViewDate = this.moveDate(this.viewDate, dir * 7);
  1026. } else if (viewMode == 1) {
  1027. if (this.showMeridian) {
  1028. newDate = this.moveHour(this.date, dir * 6);
  1029. newViewDate = this.moveHour(this.viewDate, dir * 6);
  1030. } else {
  1031. newDate = this.moveHour(this.date, dir * 4);
  1032. newViewDate = this.moveHour(this.viewDate, dir * 4);
  1033. }
  1034. } else if (viewMode == 0) {
  1035. newDate = this.moveMinute(this.date, dir * 4);
  1036. newViewDate = this.moveMinute(this.viewDate, dir * 4);
  1037. }
  1038. if (this.dateWithinRange(newDate)){
  1039. this.date = newDate;
  1040. this.viewDate = newViewDate;
  1041. this.setValue();
  1042. this.update();
  1043. e.preventDefault();
  1044. dateChanged = true;
  1045. }
  1046. break;
  1047. case 13: // enter
  1048. if (this.viewMode != 0) {
  1049. var oldViewMode = this.viewMode;
  1050. this.showMode(-1);
  1051. this.fill();
  1052. if (oldViewMode == this.viewMode && this.autoclose) {
  1053. this.hide();
  1054. }
  1055. } else {
  1056. this.fill();
  1057. if (this.autoclose) {
  1058. this.hide();
  1059. }
  1060. }
  1061. e.preventDefault();
  1062. break;
  1063. case 9: // tab
  1064. this.hide();
  1065. break;
  1066. }
  1067. if (dateChanged){
  1068. var element;
  1069. if (this.isInput) {
  1070. element = this.element;
  1071. } else if (this.component){
  1072. element = this.element.find('input');
  1073. }
  1074. if (element) {
  1075. element.change();
  1076. }
  1077. this.element.trigger({
  1078. type: 'changeDate',
  1079. date: this.date
  1080. });
  1081. }
  1082. },
  1083. showMode: function(dir) {
  1084. if (dir) {
  1085. var newViewMode = Math.max(0, Math.min(DPGlobal.modes.length - 1, this.viewMode + dir));
  1086. if (newViewMode >= this.minView && newViewMode <= this.maxView) {
  1087. this.element.trigger({
  1088. type: 'changeMode',
  1089. date: this.viewDate,
  1090. oldViewMode: this.viewMode,
  1091. newViewMode: newViewMode
  1092. });
  1093. this.viewMode = newViewMode;
  1094. }
  1095. }
  1096. /*
  1097. vitalets: fixing bug of very special conditions:
  1098. jquery 1.7.1 + webkit + show inline datetimepicker in bootstrap popover.
  1099. Method show() does not set display css correctly and datetimepicker is not shown.
  1100. Changed to .css('display', 'block') solve the problem.
  1101. See https://github.com/vitalets/x-editable/issues/37
  1102. In jquery 1.7.2+ everything works fine.
  1103. */
  1104. //this.picker.find('>div').hide().filter('.datetimepicker-'+DPGlobal.modes[this.viewMode].clsName).show();
  1105. this.picker.find('>div').hide().filter('.datetimepicker-'+DPGlobal.modes[this.viewMode].clsName).css('display', 'block');
  1106. this.updateNavArrows();
  1107. },
  1108. reset: function(e) {
  1109. this._setDate(null, 'date');
  1110. }
  1111. };
  1112. $.fn.datetimepicker = function ( option ) {
  1113. var args = Array.apply(null, arguments);
  1114. args.shift();
  1115. return this.each(function () {
  1116. var $this = $(this),
  1117. data = $this.data('datetimepicker'),
  1118. options = typeof option == 'object' && option;
  1119. if (!data) {
  1120. $this.data('datetimepicker', (data = new Datetimepicker(this, $.extend({}, $.fn.datetimepicker.defaults,options))));
  1121. }
  1122. if (typeof option == 'string' && typeof data[option] == 'function') {
  1123. data[option].apply(data, args);
  1124. }
  1125. });
  1126. };
  1127. $.fn.datetimepicker.defaults = {
  1128. };
  1129. $.fn.datetimepicker.Constructor = Datetimepicker;
  1130. var dates = $.fn.datetimepicker.dates = {
  1131. en: {
  1132. days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
  1133. daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  1134. daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
  1135. months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
  1136. monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  1137. meridiem: ["am", "pm"],
  1138. suffix: ["st", "nd", "rd", "th"],
  1139. today: "Today"
  1140. }
  1141. };
  1142. var DPGlobal = {
  1143. modes: [
  1144. {
  1145. clsName: 'minutes',
  1146. navFnc: 'Hours',
  1147. navStep: 1
  1148. },
  1149. {
  1150. clsName: 'hours',
  1151. navFnc: 'Date',
  1152. navStep: 1
  1153. },
  1154. {
  1155. clsName: 'days',
  1156. navFnc: 'Month',
  1157. navStep: 1
  1158. },
  1159. {
  1160. clsName: 'months',
  1161. navFnc: 'FullYear',
  1162. navStep: 1
  1163. },
  1164. {
  1165. clsName: 'years',
  1166. navFnc: 'FullYear',
  1167. navStep: 10
  1168. }],
  1169. isLeapYear: function (year) {
  1170. return (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0))
  1171. },
  1172. getDaysInMonth: function (year, month) {
  1173. return [31, (DPGlobal.isLeapYear(year) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month]
  1174. },
  1175. getDefaultFormat: function (type, field) {
  1176. if (type == "standard") {
  1177. if (field == 'input')
  1178. return 'yyyy-mm-dd hh:ii';
  1179. else
  1180. return 'yyyy-mm-dd hh:ii:ss';
  1181. } else if (type == "php") {
  1182. if (field == 'input')
  1183. return 'Y-m-d H:i';
  1184. else
  1185. return 'Y-m-d H:i:s';
  1186. } else {
  1187. throw new Error("Invalid format type.");
  1188. }
  1189. },
  1190. validParts: function (type) {
  1191. if (type == "standard") {
  1192. return /hh?|HH?|p|P|ii?|ss?|dd?|DD?|mm?|MM?|yy(?:yy)?/g;
  1193. } else if (type == "php") {
  1194. return /[dDjlNwzFmMnStyYaABgGhHis]/g;
  1195. } else {
  1196. throw new Error("Invalid format type.");
  1197. }
  1198. },
  1199. nonpunctuation: /[^ -\/:-@\[-`{-~\t\n\rTZ]+/g,
  1200. parseFormat: function(format, type){
  1201. // IE treats \0 as a string end in inputs (truncating the value),
  1202. // so it's a bad format delimiter, anyway
  1203. var separators = format.replace(this.validParts(type), '\0').split('\0'),
  1204. parts = format.match(this.validParts(type));
  1205. if (!separators || !separators.length || !parts || parts.length == 0){
  1206. throw new Error("Invalid date format.");
  1207. }
  1208. return {separators: separators, parts: parts};
  1209. },
  1210. parseDate: function(date, format, language, type) {
  1211. if (date instanceof Date) {
  1212. var dateUTC = new Date(date.valueOf() - date.getTimezoneOffset() * 60000);
  1213. dateUTC.setMilliseconds(0);
  1214. return dateUTC;
  1215. }
  1216. if (/^\d{4}\-\d{1,2}\-\d{1,2}$/.test(date)) {
  1217. format = this.parseFormat('yyyy-mm-dd', type);
  1218. }
  1219. if (/^\d{4}\-\d{1,2}\-\d{1,2}[T ]\d{1,2}\:\d{1,2}$/.test(date)) {
  1220. format = this.parseFormat('yyyy-mm-dd hh:ii', type);
  1221. }
  1222. if (/^\d{4}\-\d{1,2}\-\d{1,2}[T ]\d{1,2}\:\d{1,2}\:\d{1,2}[Z]{0,1}$/.test(date)) {
  1223. format = this.parseFormat('yyyy-mm-dd hh:ii:ss', type);
  1224. }
  1225. if (/^[-+]\d+[dmwy]([\s,]+[-+]\d+[dmwy])*$/.test(date)) {
  1226. var part_re = /([-+]\d+)([dmwy])/,
  1227. parts = date.match(/([-+]\d+)([dmwy])/g),
  1228. part, dir;
  1229. date = new Date();
  1230. for (var i=0; i<parts.length; i++) {
  1231. part = part_re.exec(parts[i]);
  1232. dir = parseInt(part[1]);
  1233. switch(part[2]){
  1234. case 'd':
  1235. date.setUTCDate(date.getUTCDate() + dir);
  1236. break;
  1237. case 'm':
  1238. date = Datetimepicker.prototype.moveMonth.call(Datetimepicker.prototype, date, dir);
  1239. break;
  1240. case 'w':
  1241. date.setUTCDate(date.getUTCDate() + dir * 7);
  1242. break;
  1243. case 'y':
  1244. date = Datetimepicker.prototype.moveYear.call(Datetimepicker.prototype, date, dir);
  1245. break;
  1246. }
  1247. }
  1248. return UTCDate(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds(), 0);
  1249. }
  1250. var parts = date && date.match(this.nonpunctuation) || [],
  1251. date = new Date(0, 0, 0, 0, 0, 0, 0),
  1252. parsed = {},
  1253. setters_order = ['hh', 'h', 'ii', 'i', 'ss', 's', 'yyyy', 'yy', 'M', 'MM', 'm', 'mm', 'D', 'DD', 'd', 'dd', 'H', 'HH', 'p', 'P'],
  1254. setters_map = {
  1255. hh: function(d,v){ return d.setUTCHours(v); },
  1256. h: function(d,v){ return d.setUTCHours(v); },
  1257. HH: function(d,v){ return d.setUTCHours(v==12?0:v); },
  1258. H: function(d,v){ return d.setUTCHours(v==12?0:v); },
  1259. ii: function(d,v){ return d.setUTCMinutes(v); },
  1260. i: function(d,v){ return d.setUTCMinutes(v); },
  1261. ss: function(d,v){ return d.setUTCSeconds(v); },
  1262. s: function(d,v){ return d.setUTCSeconds(v); },
  1263. yyyy: function(d,v){ return d.setUTCFullYear(v); },
  1264. yy: function(d,v){ return d.setUTCFullYear(2000+v); },
  1265. m: function(d,v){
  1266. v -= 1;
  1267. while (v<0) v += 12;
  1268. v %= 12;
  1269. d.setUTCMonth(v);
  1270. while (d.getUTCMonth() != v)
  1271. d.setUTCDate(d.getUTCDate()-1);
  1272. return d;
  1273. },
  1274. d: function(d,v){ return d.setUTCDate(v); },
  1275. p: function(d,v){ return d.setUTCHours(v==1?d.getUTCHours()+12:d.getUTCHours()); }
  1276. },
  1277. val, filtered, part;
  1278. setters_map['M'] = setters_map['MM'] = setters_map['mm'] = setters_map['m'];
  1279. setters_map['dd'] = setters_map['d'];
  1280. setters_map['P'] = setters_map['p'];
  1281. date = UTCDate(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());
  1282. if (parts.length == format.parts.length) {
  1283. for (var i=0, cnt = format.parts.length; i < cnt; i++) {
  1284. val = parseInt(parts[i], 10);
  1285. part = format.parts[i];
  1286. if (isNaN(val)) {
  1287. switch(part) {
  1288. case 'MM':
  1289. filtered = $(dates[language].months).filter(function(){
  1290. var m = this.slice(0, parts[i].length),
  1291. p = parts[i].slice(0, m.length);
  1292. return m == p;
  1293. });
  1294. val = $.inArray(filtered[0], dates[language].months) + 1;
  1295. break;
  1296. case 'M':
  1297. filtered = $(dates[language].monthsShort).filter(function(){
  1298. var m = this.slice(0, parts[i].length),
  1299. p = parts[i].slice(0, m.length);
  1300. return m == p;
  1301. });
  1302. val = $.inArray(filtered[0], dates[language].monthsShort) + 1;
  1303. break;
  1304. case 'p':
  1305. case 'P':
  1306. val = $.inArray(parts[i].toLowerCase(), dates[language].meridiem);
  1307. break;
  1308. }
  1309. }
  1310. parsed[part] = val;
  1311. }
  1312. for (var i=0, s; i<setters_order.length; i++){
  1313. s = setters_order[i];
  1314. if (s in parsed && !isNaN(parsed[s]))
  1315. setters_map[s](date, parsed[s])
  1316. }
  1317. }
  1318. return date;
  1319. },
  1320. formatDate: function(date, format, language, type){
  1321. if (date == null) {
  1322. return '';
  1323. }
  1324. var val;
  1325. if (type == 'standard') {
  1326. val = {
  1327. // year
  1328. yy: date.getUTCFullYear().toString().substring(2),
  1329. yyyy: date.getUTCFullYear(),
  1330. // month
  1331. m: date.getUTCMonth() + 1,
  1332. M: dates[language].monthsShort[date.getUTCMonth()],
  1333. MM: dates[language].months[date.getUTCMonth()],
  1334. // day
  1335. d: date.getUTCDate(),
  1336. D: dates[language].daysShort[date.getUTCDay()],
  1337. DD: dates[language].days[date.getUTCDay()],
  1338. p: (dates[language].meridiem.length==2?dates[language].meridiem[date.getUTCHours()<12?0:1]:''),
  1339. // hour
  1340. h: date.getUTCHours(),
  1341. // minute
  1342. i: date.getUTCMinutes(),
  1343. // second
  1344. s: date.getUTCSeconds()
  1345. };
  1346. val.H = (val.h%12==0? 12 : val.h%12);
  1347. val.HH = (val.H < 10 ? '0' : '') + val.H;
  1348. val.P = val.p.toUpperCase();
  1349. val.hh = (val.h < 10 ? '0' : '') + val.h;
  1350. val.ii = (val.i < 10 ? '0' : '') + val.i;
  1351. val.ss = (val.s < 10 ? '0' : '') + val.s;
  1352. val.dd = (val.d < 10 ? '0' : '') + val.d;
  1353. val.mm = (val.m < 10 ? '0' : '') + val.m;
  1354. } else if (type == 'php') {
  1355. // php format
  1356. val = {
  1357. // year
  1358. y: date.getUTCFullYear().toString().substring(2),
  1359. Y: date.getUTCFullYear(),
  1360. // month
  1361. F: dates[language].months[date.getUTCMonth()],
  1362. M: dates[language].monthsShort[date.getUTCMonth()],
  1363. n: date.getUTCMonth() + 1,
  1364. t: DPGlobal.getDaysInMonth(date.getUTCFullYear(), date.getUTCMonth()),
  1365. // day
  1366. j: date.getUTCDate(),
  1367. l: dates[language].days[date.getUTCDay()],
  1368. D: dates[language].daysShort[date.getUTCDay()],
  1369. w: date.getUTCDay(), // 0 -> 6
  1370. N: (date.getUTCDay()==0?7:date.getUTCDay()), // 1 -> 7
  1371. S: (date.getUTCDate()%10<=dates[language].suffix.length?dates[language].suffix[date.getUTCDate()%10-1]:''),
  1372. // hour
  1373. a: (dates[language].meridiem.length==2?dates[language].meridiem[date.getUTCHours()<12?0:1]:''),
  1374. g: (date.getUTCHours()%12==0?12:date.getUTCHours()%12),
  1375. G: date.getUTCHours(),
  1376. // minute
  1377. i: date.getUTCMinutes(),
  1378. // second
  1379. s: date.getUTCSeconds()
  1380. };
  1381. val.m = (val.n < 10 ? '0' : '') + val.n;
  1382. val.d = (val.j < 10 ? '0' : '') + val.j;
  1383. val.A = val.a.toString().toUpperCase();
  1384. val.h = (val.g < 10 ? '0' : '') + val.g;
  1385. val.H = (val.G < 10 ? '0' : '') + val.G;
  1386. val.i = (val.i < 10 ? '0' : '') + val.i;
  1387. val.s = (val.s < 10 ? '0' : '') + val.s;
  1388. } else {
  1389. throw new Error("Invalid format type.");
  1390. }
  1391. var date = [],
  1392. seps = $.extend([], format.separators);
  1393. for (var i=0, cnt = format.parts.length; i < cnt; i++) {
  1394. if (seps.length)
  1395. date.push(seps.shift())
  1396. date.push(val[format.parts[i]]);
  1397. }
  1398. return date.join('');
  1399. },
  1400. convertViewMode: function(viewMode){
  1401. switch (viewMode) {
  1402. case 4:
  1403. case 'decade':
  1404. viewMode = 4;
  1405. break;
  1406. case 3:
  1407. case 'year':
  1408. viewMode = 3;
  1409. break;
  1410. case 2:
  1411. case 'month':
  1412. viewMode = 2;
  1413. break;
  1414. case 1:
  1415. case 'day':
  1416. viewMode = 1;
  1417. break;
  1418. case 0:
  1419. case 'hour':
  1420. viewMode = 0;
  1421. break;
  1422. }
  1423. return viewMode;
  1424. },
  1425. headTemplate: '<thead>'+
  1426. '<tr>'+
  1427. '<th class="prev"><i class="icon-angle-left"/></th>'+
  1428. '<th colspan="5" class="switch"></th>'+
  1429. '<th class="next"><i class="icon-angle-right"/></th>'+
  1430. '</tr>'+
  1431. '</thead>',
  1432. contTemplate: '<tbody><tr><td colspan="7"></td></tr></tbody>',
  1433. footTemplate: '<tfoot><tr><th colspan="7" class="today"></th></tr></tfoot>'
  1434. };
  1435. DPGlobal.template = '<div class="datetimepicker">'+
  1436. '<div class="datetimepicker-minutes">'+
  1437. '<table class=" table-condensed">'+
  1438. DPGlobal.headTemplate+
  1439. DPGlobal.contTemplate+
  1440. DPGlobal.footTemplate+
  1441. '</table>'+
  1442. '</div>'+
  1443. '<div class="datetimepicker-hours">'+
  1444. '<table class=" table-condensed">'+
  1445. DPGlobal.headTemplate+
  1446. DPGlobal.contTemplate+
  1447. DPGlobal.footTemplate+
  1448. '</table>'+
  1449. '</div>'+
  1450. '<div class="datetimepicker-days">'+
  1451. '<table class=" table-condensed">'+
  1452. DPGlobal.headTemplate+
  1453. '<tbody></tbody>'+
  1454. DPGlobal.footTemplate+
  1455. '</table>'+
  1456. '</div>'+
  1457. '<div class="datetimepicker-months">'+
  1458. '<table class="table-condensed">'+
  1459. DPGlobal.headTemplate+
  1460. DPGlobal.contTemplate+
  1461. DPGlobal.footTemplate+
  1462. '</table>'+
  1463. '</div>'+
  1464. '<div class="datetimepicker-years">'+
  1465. '<table class="table-condensed">'+
  1466. DPGlobal.headTemplate+
  1467. DPGlobal.contTemplate+
  1468. DPGlobal.footTemplate+
  1469. '</table>'+
  1470. '</div>'+
  1471. '</div>';
  1472. $.fn.datetimepicker.DPGlobal = DPGlobal;
  1473. /* DATETIMEPICKER NO CONFLICT
  1474. * =================== */
  1475. $.fn.datetimepicker.noConflict = function () {
  1476. $.fn.datetimepicker = old;
  1477. return this;
  1478. };
  1479. /* DATETIMEPICKER DATA-API
  1480. * ================== */
  1481. $(document).on(
  1482. 'focus.datetimepicker.data-api click.datetimepicker.data-api',
  1483. '[data-provide="datetimepicker"]',
  1484. function (e) {
  1485. var $this = $(this);
  1486. if ($this.data('datetimepicker')) return;
  1487. e.preventDefault();
  1488. // component click requires us to explicitly show it
  1489. $this.datetimepicker('show');
  1490. }
  1491. );
  1492. $(function () {
  1493. $('[data-provide="datetimepicker-inline"]').datetimepicker();
  1494. });
  1495. }( window.jQuery );