diff --git a/grunt.js b/grunt.js
index 18428e2..acd77ff 100644
--- a/grunt.js
+++ b/grunt.js
@@ -15,9 +15,15 @@ function getFiles() {
inputs+'date/date.js',
inputs+'date/datefield.js',
inputs+'date/bootstrap-datepicker/js/bootstrap-datepicker.js',
+ inputs+'datetime/datetime.js',
+ inputs+'datetime/datetimefield.js',
+ inputs+'datetime/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js',
inputs+'typeahead.js'
],
- css: [inputs+'date/bootstrap-datepicker/css/datepicker.css']
+ css: [
+ inputs+'date/bootstrap-datepicker/css/datepicker.css',
+ inputs+'datetime/bootstrap-datetimepicker/css/datetimepicker.css'
+ ]
},
jqueryui: {
form: [forms+'editable-form-jqueryui.js'],
@@ -165,6 +171,7 @@ module.exports = function(grunt) {
'src/inputs/*.js',
'src/inputs/date/*.js',
'src/inputs/dateui/*.js',
+ 'src/inputs/datetime/*.js',
'src/inputs/combodate/*.js',
'src/inputs/select2/*.js',
diff --git a/src/inputs/datetime/bootstrap-datetimepicker/css/datetimepicker.css b/src/inputs/datetime/bootstrap-datetimepicker/css/datetimepicker.css
new file mode 100644
index 0000000..73eeb25
--- /dev/null
+++ b/src/inputs/datetime/bootstrap-datetimepicker/css/datetimepicker.css
@@ -0,0 +1,342 @@
+/*!
+ * Datetimepicker for Bootstrap
+ *
+ * Copyright 2012 Stefan Petre
+ * Improvements by Andrew Rowls
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ */
+.datetimepicker {
+ padding: 4px;
+ margin-top: 1px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ direction: ltr;
+ /*.dow {
+ border-top: 1px solid #ddd !important;
+ }*/
+
+}
+.datetimepicker-inline {
+ width: 220px;
+}
+.datetimepicker.datetimepicker-rtl {
+ direction: rtl;
+}
+.datetimepicker.datetimepicker-rtl table tr td span {
+ float: right;
+}
+.datetimepicker-dropdown, .datetimepicker-dropdown-left {
+ top: 0;
+ left: 0;
+}
+.datetimepicker-dropdown:before {
+ content: '';
+ display: inline-block;
+ border-left: 7px solid transparent;
+ border-right: 7px solid transparent;
+ border-bottom: 7px solid #ccc;
+ border-bottom-color: rgba(0, 0, 0, 0.2);
+ position: absolute;
+ top: -7px;
+ left: 6px;
+}
+.datetimepicker-dropdown:after {
+ content: '';
+ display: inline-block;
+ border-left: 6px solid transparent;
+ border-right: 6px solid transparent;
+ border-bottom: 6px solid #ffffff;
+ position: absolute;
+ top: -6px;
+ left: 7px;
+}
+.datetimepicker-dropdown-left:before {
+ content: '';
+ display: inline-block;
+ border-left: 7px solid transparent;
+ border-right: 7px solid transparent;
+ border-bottom: 7px solid #ccc;
+ border-bottom-color: rgba(0, 0, 0, 0.2);
+ position: absolute;
+ top: -7px;
+ right: 6px;
+}
+.datetimepicker-dropdown-left:after {
+ content: '';
+ display: inline-block;
+ border-left: 6px solid transparent;
+ border-right: 6px solid transparent;
+ border-bottom: 6px solid #ffffff;
+ position: absolute;
+ top: -6px;
+ right: 7px;
+}
+.datetimepicker > div {
+ display: none;
+}
+.datetimepicker.minutes div.datetimepicker-minutes {
+ display: block;
+}
+.datetimepicker.hours div.datetimepicker-hours {
+ display: block;
+}
+.datetimepicker.days div.datetimepicker-days {
+ display: block;
+}
+.datetimepicker.months div.datetimepicker-months {
+ display: block;
+}
+.datetimepicker.years div.datetimepicker-years {
+ display: block;
+}
+.datetimepicker table {
+ margin: 0;
+}
+.datetimepicker td,
+.datetimepicker th {
+ text-align: center;
+ width: 20px;
+ height: 20px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ border: none;
+}
+.table-striped .datetimepicker table tr td,
+.table-striped .datetimepicker table tr th {
+ background-color: transparent;
+}
+.datetimepicker table tr td.minute:hover {
+ background: #eeeeee;
+ cursor: pointer;
+}
+.datetimepicker table tr td.hour:hover {
+ background: #eeeeee;
+ cursor: pointer;
+}
+.datetimepicker table tr td.day:hover {
+ background: #eeeeee;
+ cursor: pointer;
+}
+.datetimepicker table tr td.old,
+.datetimepicker table tr td.new {
+ color: #999999;
+}
+.datetimepicker table tr td.disabled,
+.datetimepicker table tr td.disabled:hover {
+ background: none;
+ color: #999999;
+ cursor: default;
+}
+.datetimepicker table tr td.today,
+.datetimepicker table tr td.today:hover,
+.datetimepicker table tr td.today.disabled,
+.datetimepicker table tr td.today.disabled:hover {
+ background-color: #fde19a;
+ background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
+ background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
+ background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a);
+ background-image: -o-linear-gradient(top, #fdd49a, #fdf59a);
+ background-image: linear-gradient(top, #fdd49a, #fdf59a);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
+ border-color: #fdf59a #fdf59a #fbed50;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+.datetimepicker table tr td.today:hover,
+.datetimepicker table tr td.today:hover:hover,
+.datetimepicker table tr td.today.disabled:hover,
+.datetimepicker table tr td.today.disabled:hover:hover,
+.datetimepicker table tr td.today:active,
+.datetimepicker table tr td.today:hover:active,
+.datetimepicker table tr td.today.disabled:active,
+.datetimepicker table tr td.today.disabled:hover:active,
+.datetimepicker table tr td.today.active,
+.datetimepicker table tr td.today:hover.active,
+.datetimepicker table tr td.today.disabled.active,
+.datetimepicker table tr td.today.disabled:hover.active,
+.datetimepicker table tr td.today.disabled,
+.datetimepicker table tr td.today:hover.disabled,
+.datetimepicker table tr td.today.disabled.disabled,
+.datetimepicker table tr td.today.disabled:hover.disabled,
+.datetimepicker table tr td.today[disabled],
+.datetimepicker table tr td.today:hover[disabled],
+.datetimepicker table tr td.today.disabled[disabled],
+.datetimepicker table tr td.today.disabled:hover[disabled] {
+ background-color: #fdf59a;
+}
+.datetimepicker table tr td.today:active,
+.datetimepicker table tr td.today:hover:active,
+.datetimepicker table tr td.today.disabled:active,
+.datetimepicker table tr td.today.disabled:hover:active,
+.datetimepicker table tr td.today.active,
+.datetimepicker table tr td.today:hover.active,
+.datetimepicker table tr td.today.disabled.active,
+.datetimepicker table tr td.today.disabled:hover.active {
+ background-color: #fbf069 \9;
+}
+.datetimepicker table tr td.active,
+.datetimepicker table tr td.active:hover,
+.datetimepicker table tr td.active.disabled,
+.datetimepicker table tr td.active.disabled:hover {
+ background-color: #006dcc;
+ background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
+ background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
+ background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
+ background-image: -o-linear-gradient(top, #0088cc, #0044cc);
+ background-image: linear-gradient(top, #0088cc, #0044cc);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
+ border-color: #0044cc #0044cc #002a80;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+ color: #fff;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.datetimepicker table tr td.active:hover,
+.datetimepicker table tr td.active:hover:hover,
+.datetimepicker table tr td.active.disabled:hover,
+.datetimepicker table tr td.active.disabled:hover:hover,
+.datetimepicker table tr td.active:active,
+.datetimepicker table tr td.active:hover:active,
+.datetimepicker table tr td.active.disabled:active,
+.datetimepicker table tr td.active.disabled:hover:active,
+.datetimepicker table tr td.active.active,
+.datetimepicker table tr td.active:hover.active,
+.datetimepicker table tr td.active.disabled.active,
+.datetimepicker table tr td.active.disabled:hover.active,
+.datetimepicker table tr td.active.disabled,
+.datetimepicker table tr td.active:hover.disabled,
+.datetimepicker table tr td.active.disabled.disabled,
+.datetimepicker table tr td.active.disabled:hover.disabled,
+.datetimepicker table tr td.active[disabled],
+.datetimepicker table tr td.active:hover[disabled],
+.datetimepicker table tr td.active.disabled[disabled],
+.datetimepicker table tr td.active.disabled:hover[disabled] {
+ background-color: #0044cc;
+}
+.datetimepicker table tr td.active:active,
+.datetimepicker table tr td.active:hover:active,
+.datetimepicker table tr td.active.disabled:active,
+.datetimepicker table tr td.active.disabled:hover:active,
+.datetimepicker table tr td.active.active,
+.datetimepicker table tr td.active:hover.active,
+.datetimepicker table tr td.active.disabled.active,
+.datetimepicker table tr td.active.disabled:hover.active {
+ background-color: #003399 \9;
+}
+.datetimepicker table tr td span {
+ display: block;
+ width: 23%;
+ height: 54px;
+ line-height: 54px;
+ float: left;
+ margin: 1%;
+ cursor: pointer;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+}
+.datetimepicker .datetimepicker-hours span {
+ height: 26px;
+ line-height: 26px;
+}
+.datetimepicker .datetimepicker-hours table tr td span.hour_am,
+.datetimepicker .datetimepicker-hours table tr td span.hour_pm {
+ width: 14.6%;
+}
+.datetimepicker .datetimepicker-hours fieldset legend,
+.datetimepicker .datetimepicker-minutes fieldset legend {
+ margin-bottom: inherit;
+ line-height: 30px;
+}
+.datetimepicker .datetimepicker-minutes span {
+ height: 26px;
+ line-height: 26px;
+}
+.datetimepicker table tr td span:hover {
+ background: #eeeeee;
+}
+.datetimepicker table tr td span.disabled,
+.datetimepicker table tr td span.disabled:hover {
+ background: none;
+ color: #999999;
+ cursor: default;
+}
+.datetimepicker table tr td span.active,
+.datetimepicker table tr td span.active:hover,
+.datetimepicker table tr td span.active.disabled,
+.datetimepicker table tr td span.active.disabled:hover {
+ background-color: #006dcc;
+ background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
+ background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
+ background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
+ background-image: -o-linear-gradient(top, #0088cc, #0044cc);
+ background-image: linear-gradient(top, #0088cc, #0044cc);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
+ border-color: #0044cc #0044cc #002a80;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+ color: #fff;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.datetimepicker table tr td span.active:hover,
+.datetimepicker table tr td span.active:hover:hover,
+.datetimepicker table tr td span.active.disabled:hover,
+.datetimepicker table tr td span.active.disabled:hover:hover,
+.datetimepicker table tr td span.active:active,
+.datetimepicker table tr td span.active:hover:active,
+.datetimepicker table tr td span.active.disabled:active,
+.datetimepicker table tr td span.active.disabled:hover:active,
+.datetimepicker table tr td span.active.active,
+.datetimepicker table tr td span.active:hover.active,
+.datetimepicker table tr td span.active.disabled.active,
+.datetimepicker table tr td span.active.disabled:hover.active,
+.datetimepicker table tr td span.active.disabled,
+.datetimepicker table tr td span.active:hover.disabled,
+.datetimepicker table tr td span.active.disabled.disabled,
+.datetimepicker table tr td span.active.disabled:hover.disabled,
+.datetimepicker table tr td span.active[disabled],
+.datetimepicker table tr td span.active:hover[disabled],
+.datetimepicker table tr td span.active.disabled[disabled],
+.datetimepicker table tr td span.active.disabled:hover[disabled] {
+ background-color: #0044cc;
+}
+.datetimepicker table tr td span.active:active,
+.datetimepicker table tr td span.active:hover:active,
+.datetimepicker table tr td span.active.disabled:active,
+.datetimepicker table tr td span.active.disabled:hover:active,
+.datetimepicker table tr td span.active.active,
+.datetimepicker table tr td span.active:hover.active,
+.datetimepicker table tr td span.active.disabled.active,
+.datetimepicker table tr td span.active.disabled:hover.active {
+ background-color: #003399 \9;
+}
+.datetimepicker table tr td span.old {
+ color: #999999;
+}
+.datetimepicker th.switch {
+ width: 145px;
+}
+.datetimepicker thead tr:first-child th,
+.datetimepicker tfoot tr:first-child th {
+ cursor: pointer;
+}
+.datetimepicker thead tr:first-child th:hover,
+.datetimepicker tfoot tr:first-child th:hover {
+ background: #eeeeee;
+}
+.input-append.date .add-on i,
+.input-prepend.date .add-on i {
+ cursor: pointer;
+ width: 14px;
+ height: 14px;
+}
diff --git a/src/inputs/datetime/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js b/src/inputs/datetime/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js
new file mode 100644
index 0000000..8e8b83d
--- /dev/null
+++ b/src/inputs/datetime/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js
@@ -0,0 +1,1453 @@
+/* =========================================================
+ * bootstrap-datetimepicker.js
+ * =========================================================
+ * Copyright 2012 Stefan Petre
+ * Improvements by Andrew Rowls
+ * Improvements by Sébastien Malot
+ * Project URL : http://www.malot.fr/bootstrap-datetimepicker
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================= */
+
+!function( $ ) {
+
+ function UTCDate(){
+ return new Date(Date.UTC.apply(Date, arguments));
+ }
+ function UTCToday(){
+ var today = new Date();
+ return UTCDate(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate(), today.getUTCHours(), today.getUTCMinutes(), today.getUTCSeconds(), 0);
+ }
+
+ // Picker object
+
+ var Datetimepicker = function(element, options) {
+ var that = this;
+
+ this.element = $(element);
+ this.language = options.language || this.element.data('date-language') || "en";
+ this.language = this.language in dates ? this.language : "en";
+ this.isRTL = dates[this.language].rtl || false;
+ this.formatType = options.formatType || this.element.data('format-type') || 'standard';
+ this.format = DPGlobal.parseFormat(options.format || this.element.data('date-format') || DPGlobal.getDefaultFormat(this.formatType, 'input'), this.formatType);
+ this.isInline = false;
+ this.isVisible = false;
+ this.isInput = this.element.is('input');
+ this.component = this.element.is('.date') ? this.element.find('.add-on .icon-th, .add-on .icon-time, .add-on .icon-calendar').parent() : false;
+ this.componentReset = this.element.is('.date') ? this.element.find('.add-on .icon-remove').parent() : false;
+ this.hasInput = this.component && this.element.find('input').length;
+ if (this.component && this.component.length === 0) {
+ this.component = false;
+ }
+ this.linkField = options.linkField || this.element.data('link-field') || false;
+ this.linkFormat = DPGlobal.parseFormat(options.linkFormat || this.element.data('link-format') || DPGlobal.getDefaultFormat(this.formatType, 'link'), this.formatType);
+ this.minuteStep = options.minuteStep || this.element.data('minute-step') || 5;
+ this.pickerPosition = options.pickerPosition || this.element.data('picker-position') || 'bottom-right';
+ this.showMeridian = options.showMeridian || this.element.data('show-meridian') || false;
+ this.initialDate = options.initialDate || new Date();
+
+ this._attachEvents();
+
+ this.minView = 0;
+ if ('minView' in options) {
+ this.minView = options.minView;
+ } else if ('minView' in this.element.data()) {
+ this.minView = this.element.data('min-view');
+ }
+ this.minView = DPGlobal.convertViewMode(this.minView);
+
+ this.maxView = DPGlobal.modes.length-1;
+ if ('maxView' in options) {
+ this.maxView = options.maxView;
+ } else if ('maxView' in this.element.data()) {
+ this.maxView = this.element.data('max-view');
+ }
+ this.maxView = DPGlobal.convertViewMode(this.maxView);
+
+ this.startViewMode = 2;
+ if ('startView' in options) {
+ this.startViewMode = options.startView;
+ } else if ('startView' in this.element.data()) {
+ this.startViewMode = this.element.data('start-view');
+ }
+ this.startViewMode = DPGlobal.convertViewMode(this.startViewMode);
+ this.viewMode = this.startViewMode;
+
+ this.viewSelect = this.minView;
+ if ('viewSelect' in options) {
+ this.viewSelect = options.viewSelect;
+ } else if ('viewSelect' in this.element.data()) {
+ this.viewSelect = this.element.data('view-select');
+ }
+ this.viewSelect = DPGlobal.convertViewMode(this.viewSelect);
+
+ this.forceParse = true;
+ if ('forceParse' in options) {
+ this.forceParse = options.forceParse;
+ } else if ('dateForceParse' in this.element.data()) {
+ this.forceParse = this.element.data('date-force-parse');
+ }
+
+ this.picker = $(DPGlobal.template)
+ .appendTo(this.isInline ? this.element : 'body')
+ .on({
+ click: $.proxy(this.click, this),
+ mousedown: $.proxy(this.mousedown, this)
+ });
+
+ if (this.isInline) {
+ this.picker.addClass('datetimepicker-inline');
+ } else {
+ if (this.component && this.pickerPosition == 'bottom-left') {
+ this.picker.addClass('datetimepicker-dropdown-left dropdown-menu');
+ } else {
+ this.picker.addClass('datetimepicker-dropdown dropdown-menu');
+ }
+ }
+ if (this.isRTL){
+ this.picker.addClass('datetimepicker-rtl');
+ this.picker.find('.prev i, .next i')
+ .toggleClass('icon-arrow-left icon-arrow-right');
+ }
+ $(document).on('mousedown', function (e) {
+ // Clicked outside the datetimepicker, hide it
+ if ($(e.target).closest('.datetimepicker').length === 0) {
+ that.hide();
+ }
+ });
+
+ this.autoclose = false;
+ if ('autoclose' in options) {
+ this.autoclose = options.autoclose;
+ } else if ('dateAutoclose' in this.element.data()) {
+ this.autoclose = this.element.data('date-autoclose');
+ }
+
+ this.keyboardNavigation = true;
+ if ('keyboardNavigation' in options) {
+ this.keyboardNavigation = options.keyboardNavigation;
+ } else if ('dateKeyboardNavigation' in this.element.data()) {
+ this.keyboardNavigation = this.element.data('date-keyboard-navigation');
+ }
+
+ this.todayBtn = (options.todayBtn || this.element.data('date-today-btn') || false);
+ this.todayHighlight = (options.todayHighlight || this.element.data('date-today-highlight') || false);
+
+ this.weekStart = ((options.weekStart || this.element.data('date-weekstart') || dates[this.language].weekStart || 0) % 7);
+ this.weekEnd = ((this.weekStart + 6) % 7);
+ this.startDate = -Infinity;
+ this.endDate = Infinity;
+ this.daysOfWeekDisabled = [];
+ this.setStartDate(options.startDate || this.element.data('date-startdate'));
+ this.setEndDate(options.endDate || this.element.data('date-enddate'));
+ this.setDaysOfWeekDisabled(options.daysOfWeekDisabled || this.element.data('date-days-of-week-disabled'));
+ this.fillDow();
+ this.fillMonths();
+ this.update();
+ this.showMode();
+
+ if(this.isInline) {
+ this.show();
+ }
+ };
+
+ Datetimepicker.prototype = {
+ constructor: Datetimepicker,
+
+ _events: [],
+ _attachEvents: function(){
+ this._detachEvents();
+ if (this.isInput) { // single input
+ this._events = [
+ [this.element, {
+ focus: $.proxy(this.show, this),
+ keyup: $.proxy(this.update, this),
+ keydown: $.proxy(this.keydown, this)
+ }]
+ ];
+ }
+ else if (this.component && this.hasInput){ // component: input + button
+ this._events = [
+ // For components that are not readonly, allow keyboard nav
+ [this.element.find('input'), {
+ focus: $.proxy(this.show, this),
+ keyup: $.proxy(this.update, this),
+ keydown: $.proxy(this.keydown, this)
+ }],
+ [this.component, {
+ click: $.proxy(this.show, this)
+ }]
+ ];
+ if (this.componentReset) {
+ this._events.push([
+ this.componentReset,
+ {click: $.proxy(this.reset, this)}
+ ]);
+ }
+ }
+ else if (this.element.is('div')) { // inline datetimepicker
+ this.isInline = true;
+ }
+ else {
+ this._events = [
+ [this.element, {
+ click: $.proxy(this.show, this)
+ }]
+ ];
+ }
+ for (var i=0, el, ev; i<this._events.length; i++){
+ el = this._events[i][0];
+ ev = this._events[i][1];
+ el.on(ev);
+ }
+ },
+
+ _detachEvents: function(){
+ for (var i=0, el, ev; i<this._events.length; i++){
+ el = this._events[i][0];
+ ev = this._events[i][1];
+ el.off(ev);
+ }
+ this._events = [];
+ },
+
+ show: function(e) {
+ this.picker.show();
+ this.height = this.component ? this.component.outerHeight() : this.element.outerHeight();
+ if (this.forceParse) {
+ this.update();
+ }
+ this.place();
+ $(window).on('resize', $.proxy(this.place, this));
+ if (e) {
+ e.stopPropagation();
+ e.preventDefault();
+ }
+ this.isVisible = true;
+ this.element.trigger({
+ type: 'show',
+ date: this.date
+ });
+ },
+
+ hide: function(e){
+ if(!this.isVisible) return;
+ if(this.isInline) return;
+ this.picker.hide();
+ $(window).off('resize', this.place);
+ this.viewMode = this.startViewMode;
+ this.showMode();
+ if (!this.isInput) {
+ $(document).off('mousedown', this.hide);
+ }
+
+ if (
+ this.forceParse &&
+ (
+ this.isInput && this.element.val() ||
+ this.hasInput && this.element.find('input').val()
+ )
+ )
+ this.setValue();
+ this.isVisible = false;
+ this.element.trigger({
+ type: 'hide',
+ date: this.date
+ });
+ },
+
+ remove: function() {
+ this._detachEvents();
+ this.picker.remove();
+ delete this.element.data().datetimepicker;
+ },
+
+ getDate: function() {
+ var d = this.getUTCDate();
+ return new Date(d.getTime() + (d.getTimezoneOffset()*60000));
+ },
+
+ getUTCDate: function() {
+ return this.date;
+ },
+
+ setDate: function(d) {
+ this.setUTCDate(new Date(d.getTime() - (d.getTimezoneOffset()*60000)));
+ },
+
+ setUTCDate: function(d) {
+ if (d >= this.startDate && d <= this.endDate) {
+ this.date = d;
+ this.setValue();
+ this.viewDate = this.date;
+ this.fill();
+ } else {
+ this.element.trigger({
+ type: 'outOfRange',
+ date: d,
+ startDate: this.startDate,
+ endDate: this.endDate
+ });
+ }
+ },
+
+ setValue: function() {
+ var formatted = this.getFormattedDate();
+ if (!this.isInput) {
+ if (this.component){
+ this.element.find('input').prop('value', formatted);
+ }
+ this.element.data('date', formatted);
+ } else {
+ this.element.prop('value', formatted);
+ }
+ if (this.linkField) {
+ $('#' + this.linkField).val(this.getFormattedDate(this.linkFormat));
+ }
+ },
+
+ getFormattedDate: function(format) {
+ if(format == undefined) format = this.format;
+ return DPGlobal.formatDate(this.date, format, this.language, this.formatType);
+ },
+
+ setStartDate: function(startDate){
+ this.startDate = startDate || -Infinity;
+ if (this.startDate !== -Infinity) {
+ this.startDate = DPGlobal.parseDate(this.startDate, this.format, this.language, this.formatType);
+ }
+ this.update();
+ this.updateNavArrows();
+ },
+
+ setEndDate: function(endDate){
+ this.endDate = endDate || Infinity;
+ if (this.endDate !== Infinity) {
+ this.endDate = DPGlobal.parseDate(this.endDate, this.format, this.language, this.formatType);
+ }
+ this.update();
+ this.updateNavArrows();
+ },
+
+ setDaysOfWeekDisabled: function(daysOfWeekDisabled){
+ this.daysOfWeekDisabled = daysOfWeekDisabled || [];
+ if (!$.isArray(this.daysOfWeekDisabled)) {
+ this.daysOfWeekDisabled = this.daysOfWeekDisabled.split(/,\s*/);
+ }
+ this.daysOfWeekDisabled = $.map(this.daysOfWeekDisabled, function (d) {
+ return parseInt(d, 10);
+ });
+ this.update();
+ this.updateNavArrows();
+ },
+
+ place: function(){
+ if(this.isInline) return;
+ var zIndex = parseInt(this.element.parents().filter(function() {
+ return $(this).css('z-index') != 'auto';
+ }).first().css('z-index'))+10;
+ var offset, left;
+ if (this.component) {
+ offset = this.component.offset();
+ left = offset.left;
+ if (this.pickerPosition == 'bottom-left') {
+ left += this.component.outerWidth() - this.picker.outerWidth();
+ }
+ } else {
+ offset = this.element.offset();
+ left = offset.left;
+ }
+ this.picker.css({
+ top: offset.top + this.height,
+ left: left,
+ zIndex: zIndex
+ });
+ },
+
+ update: function(){
+ var date, fromArgs = false;
+ if(arguments && arguments.length && (typeof arguments[0] === 'string' || arguments[0] instanceof Date)) {
+ date = arguments[0];
+ fromArgs = true;
+ } else {
+ date = this.isInput ? this.element.prop('value') : this.element.data('date') || this.element.find('input').prop('value') || this.initialDate;
+ }
+
+ if (!date) {
+ date = new Date();
+ fromArgs = false;
+ }
+
+ this.date = DPGlobal.parseDate(date, this.format, this.language, this.formatType);
+
+ if (fromArgs) this.setValue();
+
+ if (this.date < this.startDate) {
+ this.viewDate = new Date(this.startDate);
+ } else if (this.date > this.endDate) {
+ this.viewDate = new Date(this.endDate);
+ } else {
+ this.viewDate = new Date(this.date);
+ }
+ this.fill();
+ },
+
+ fillDow: function(){
+ var dowCnt = this.weekStart,
+ html = '<tr>';
+ while (dowCnt < this.weekStart + 7) {
+ html += '<th class="dow">'+dates[this.language].daysMin[(dowCnt++)%7]+'</th>';
+ }
+ html += '</tr>';
+ this.picker.find('.datetimepicker-days thead').append(html);
+ },
+
+ fillMonths: function(){
+ var html = '',
+ i = 0;
+ while (i < 12) {
+ html += '<span class="month">'+dates[this.language].monthsShort[i++]+'</span>';
+ }
+ this.picker.find('.datetimepicker-months td').html(html);
+ },
+
+ fill: function() {
+ if (this.date == null || this.viewDate == null) {
+ return;
+ }
+ var d = new Date(this.viewDate),
+ year = d.getUTCFullYear(),
+ month = d.getUTCMonth(),
+ dayMonth = d.getUTCDate(),
+ hours = d.getUTCHours(),
+ minutes = d.getUTCMinutes(),
+ startYear = this.startDate !== -Infinity ? this.startDate.getUTCFullYear() : -Infinity,
+ startMonth = this.startDate !== -Infinity ? this.startDate.getUTCMonth() : -Infinity,
+ endYear = this.endDate !== Infinity ? this.endDate.getUTCFullYear() : Infinity,
+ endMonth = this.endDate !== Infinity ? this.endDate.getUTCMonth() : Infinity,
+ currentDate = (new UTCDate(this.date.getUTCFullYear(), this.date.getUTCMonth(), this.date.getUTCDate())).valueOf(),
+ today = new Date();
+ this.picker.find('.datetimepicker-days thead th:eq(1)')
+ .text(dates[this.language].months[month]+' '+year);
+ this.picker.find('.datetimepicker-hours thead th:eq(1)')
+ .text(dayMonth+' '+dates[this.language].months[month]+' '+year);
+ this.picker.find('.datetimepicker-minutes thead th:eq(1)')
+ .text(dayMonth+' '+dates[this.language].months[month]+' '+year);
+ this.picker.find('tfoot th.today')
+ .text(dates[this.language].today)
+ .toggle(this.todayBtn !== false);
+ this.updateNavArrows();
+ this.fillMonths();
+ /*var prevMonth = UTCDate(year, month, 0,0,0,0,0);
+ prevMonth.setUTCDate(prevMonth.getDate() - (prevMonth.getUTCDay() - this.weekStart + 7)%7);*/
+ var prevMonth = UTCDate(year, month-1, 28,0,0,0,0),
+ day = DPGlobal.getDaysInMonth(prevMonth.getUTCFullYear(), prevMonth.getUTCMonth());
+ prevMonth.setUTCDate(day);
+ prevMonth.setUTCDate(day - (prevMonth.getUTCDay() - this.weekStart + 7)%7);
+ var nextMonth = new Date(prevMonth);
+ nextMonth.setUTCDate(nextMonth.getUTCDate() + 42);
+ nextMonth = nextMonth.valueOf();
+ var html = [];
+ var clsName;
+ while(prevMonth.valueOf() < nextMonth) {
+ if (prevMonth.getUTCDay() == this.weekStart) {
+ html.push('<tr>');
+ }
+ clsName = '';
+ if (prevMonth.getUTCFullYear() < year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() < month)) {
+ clsName += ' old';
+ } else if (prevMonth.getUTCFullYear() > year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() > month)) {
+ clsName += ' new';
+ }
+ // Compare internal UTC date with local today, not UTC today
+ if (this.todayHighlight &&
+ prevMonth.getUTCFullYear() == today.getFullYear() &&
+ prevMonth.getUTCMonth() == today.getMonth() &&
+ prevMonth.getUTCDate() == today.getDate()) {
+ clsName += ' today';
+ }
+ if (prevMonth.valueOf() == currentDate) {
+ clsName += ' active';
+ }
+ if ((prevMonth.valueOf() + 86400000) <= this.startDate || prevMonth.valueOf() > this.endDate ||
+ $.inArray(prevMonth.getUTCDay(), this.daysOfWeekDisabled) !== -1) {
+ clsName += ' disabled';
+ }
+ html.push('<td class="day'+clsName+'">'+prevMonth.getUTCDate() + '</td>');
+ if (prevMonth.getUTCDay() == this.weekEnd) {
+ html.push('</tr>');
+ }
+ prevMonth.setUTCDate(prevMonth.getUTCDate()+1);
+ }
+ this.picker.find('.datetimepicker-days tbody').empty().append(html.join(''));
+
+ html = [];
+ var txt = '', meridian = '', meridianOld = '';
+ for (var i=0;i<24;i++) {
+ var actual = UTCDate(year, month, dayMonth, i);
+ clsName = '';
+ // We want the previous hour for the startDate
+ if ((actual.valueOf() + 3600000) <= this.startDate || actual.valueOf() > this.endDate) {
+ clsName += ' disabled';
+ } else if (hours == i) {
+ clsName += ' active';
+ }
+ if (this.showMeridian && dates[this.language].meridiem.length == 2) {
+ meridian = (i<12?dates[this.language].meridiem[0]:dates[this.language].meridiem[1]);
+ if (meridian != meridianOld) {
+ if (meridianOld != '') {
+ html.push('</fieldset>');
+ }
+ html.push('<fieldset class="hour"><legend>'+meridian.toUpperCase()+'</legend>');
+ }
+ meridianOld = meridian;
+ txt = (i%12?i%12:12);
+ html.push('<span class="hour'+clsName+' hour_'+(i<12?'am':'pm')+'">'+txt+'</span>');
+ if (i == 23) {
+ html.push('</fieldset>');
+ }
+ } else {
+ txt = i+':00';
+ html.push('<span class="hour'+clsName+'">'+txt+'</span>');
+ }
+ }
+ this.picker.find('.datetimepicker-hours td').html(html.join(''));
+
+ html = [];
+ txt = '', meridian = '', meridianOld = '';
+ for(var i=0;i<60;i+=this.minuteStep) {
+ var actual = UTCDate(year, month, dayMonth, hours, i, 0);
+ clsName = '';
+ if (actual.valueOf() < this.startDate || actual.valueOf() > this.endDate) {
+ clsName += ' disabled';
+ } else if (Math.floor(minutes/this.minuteStep) == Math.floor(i/this.minuteStep)) {
+ clsName += ' active';
+ }
+ if (this.showMeridian && dates[this.language].meridiem.length == 2) {
+ meridian = (hours<12?dates[this.language].meridiem[0]:dates[this.language].meridiem[1]);
+ if (meridian != meridianOld) {
+ if (meridianOld != '') {
+ html.push('</fieldset>');
+ }
+ html.push('<fieldset class="minute"><legend>'+meridian.toUpperCase()+'</legend>');
+ }
+ meridianOld = meridian;
+ txt = (hours%12?hours%12:12);
+ //html.push('<span class="minute'+clsName+' minute_'+(hours<12?'am':'pm')+'">'+txt+'</span>');
+ html.push('<span class="minute'+clsName+'">'+txt+':'+(i<10?'0'+i:i)+'</span>');
+ if (i == 59) {
+ html.push('</fieldset>');
+ }
+ } else {
+ txt = i+':00';
+ //html.push('<span class="hour'+clsName+'">'+txt+'</span>');
+ html.push('<span class="minute'+clsName+'">'+hours+':'+(i<10?'0'+i:i)+'</span>');
+ }
+ }
+ this.picker.find('.datetimepicker-minutes td').html(html.join(''));
+
+ var currentYear = this.date.getUTCFullYear();
+ var months = this.picker.find('.datetimepicker-months')
+ .find('th:eq(1)')
+ .text(year)
+ .end()
+ .find('span').removeClass('active');
+ if (currentYear == year) {
+ months.eq(this.date.getUTCMonth()).addClass('active');
+ }
+ if (year < startYear || year > endYear) {
+ months.addClass('disabled');
+ }
+ if (year == startYear) {
+ months.slice(0, startMonth).addClass('disabled');
+ }
+ if (year == endYear) {
+ months.slice(endMonth+1).addClass('disabled');
+ }
+
+ html = '';
+ year = parseInt(year/10, 10) * 10;
+ var yearCont = this.picker.find('.datetimepicker-years')
+ .find('th:eq(1)')
+ .text(year + '-' + (year + 9))
+ .end()
+ .find('td');
+ year -= 1;
+ for (var i = -1; i < 11; i++) {
+ html += '<span class="year'+(i == -1 || i == 10 ? ' old' : '')+(currentYear == year ? ' active' : '')+(year < startYear || year > endYear ? ' disabled' : '')+'">'+year+'</span>';
+ year += 1;
+ }
+ yearCont.html(html);
+ },
+
+ updateNavArrows: function() {
+ var d = new Date(this.viewDate),
+ year = d.getUTCFullYear(),
+ month = d.getUTCMonth(),
+ day = d.getUTCDate(),
+ hour = d.getUTCHours();
+ switch (this.viewMode) {
+ case 0:
+ if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear()
+ && month <= this.startDate.getUTCMonth()
+ && day <= this.startDate.getUTCDate()
+ && hour <= this.startDate.getUTCHours()) {
+ this.picker.find('.prev').css({visibility: 'hidden'});
+ } else {
+ this.picker.find('.prev').css({visibility: 'visible'});
+ }
+ if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear()
+ && month >= this.endDate.getUTCMonth()
+ && day >= this.endDate.getUTCDate()
+ && hour >= this.endDate.getUTCHours()) {
+ this.picker.find('.next').css({visibility: 'hidden'});
+ } else {
+ this.picker.find('.next').css({visibility: 'visible'});
+ }
+ break;
+ case 1:
+ if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear()
+ && month <= this.startDate.getUTCMonth()
+ && day <= this.startDate.getUTCDate()) {
+ this.picker.find('.prev').css({visibility: 'hidden'});
+ } else {
+ this.picker.find('.prev').css({visibility: 'visible'});
+ }
+ if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear()
+ && month >= this.endDate.getUTCMonth()
+ && day >= this.endDate.getUTCDate()) {
+ this.picker.find('.next').css({visibility: 'hidden'});
+ } else {
+ this.picker.find('.next').css({visibility: 'visible'});
+ }
+ break;
+ case 2:
+ if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear()
+ && month <= this.startDate.getUTCMonth()) {
+ this.picker.find('.prev').css({visibility: 'hidden'});
+ } else {
+ this.picker.find('.prev').css({visibility: 'visible'});
+ }
+ if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear()
+ && month >= this.endDate.getUTCMonth()) {
+ this.picker.find('.next').css({visibility: 'hidden'});
+ } else {
+ this.picker.find('.next').css({visibility: 'visible'});
+ }
+ break;
+ case 3:
+ case 4:
+ if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear()) {
+ this.picker.find('.prev').css({visibility: 'hidden'});
+ } else {
+ this.picker.find('.prev').css({visibility: 'visible'});
+ }
+ if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear()) {
+ this.picker.find('.next').css({visibility: 'hidden'});
+ } else {
+ this.picker.find('.next').css({visibility: 'visible'});
+ }
+ break;
+ }
+ },
+
+ click: function(e) {
+ e.stopPropagation();
+ e.preventDefault();
+ var target = $(e.target).closest('span, td, th, legend');
+ if (target.length == 1) {
+ if (target.is('.disabled')) {
+ this.element.trigger({
+ type: 'outOfRange',
+ date: this.viewDate,
+ startDate: this.startDate,
+ endDate: this.endDate
+ });
+ return;
+ }
+ switch(target[0].nodeName.toLowerCase()) {
+ case 'th':
+ switch(target[0].className) {
+ case 'switch':
+ this.showMode(1);
+ break;
+ case 'prev':
+ case 'next':
+ var dir = DPGlobal.modes[this.viewMode].navStep * (target[0].className == 'prev' ? -1 : 1);
+ switch(this.viewMode){
+ case 0:
+ this.viewDate = this.moveHour(this.viewDate, dir);
+ break;
+ case 1:
+ this.viewDate = this.moveDate(this.viewDate, dir);
+ break;
+ case 2:
+ this.viewDate = this.moveMonth(this.viewDate, dir);
+ break;
+ case 3:
+ case 4:
+ this.viewDate = this.moveYear(this.viewDate, dir);
+ break;
+ }
+ this.fill();
+ break;
+ case 'today':
+ var date = new Date();
+ date = UTCDate(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), 0);
+
+ this.viewMode = this.startViewMode;
+ this.showMode(0);
+ this._setDate(date);
+ this.fill();
+ if (this.autoclose) {
+ this.hide();
+ }
+ break;
+ }
+ break;
+ case 'span':
+ if (!target.is('.disabled')) {
+ var year = this.viewDate.getUTCFullYear(),
+ month = this.viewDate.getUTCMonth(),
+ day = this.viewDate.getUTCDate(),
+ hours = this.viewDate.getUTCHours(),
+ minutes = this.viewDate.getUTCMinutes(),
+ seconds = this.viewDate.getUTCSeconds();
+
+ if (target.is('.month')) {
+ this.viewDate.setUTCDate(1);
+ month = target.parent().find('span').index(target);
+ day = this.viewDate.getUTCDate();
+ this.viewDate.setUTCMonth(month);
+ this.element.trigger({
+ type: 'changeMonth',
+ date: this.viewDate
+ });
+ if (this.viewSelect >= 3) {
+ this._setDate(UTCDate(year, month, day, hours, minutes, seconds, 0));
+ }
+ } else if (target.is('.year')) {
+ this.viewDate.setUTCDate(1);
+ year = parseInt(target.text(), 10) || 0;
+ this.viewDate.setUTCFullYear(year);
+ this.element.trigger({
+ type: 'changeYear',
+ date: this.viewDate
+ });
+ if (this.viewSelect >= 4) {
+ this._setDate(UTCDate(year, month, day, hours, minutes, seconds, 0));
+ }
+ } else if (target.is('.hour')){
+ hours = parseInt(target.text(), 10) || 0;
+ if (target.hasClass('hour_am') || target.hasClass('hour_pm')) {
+ if (hours == 12 && target.hasClass('hour_am')) {
+ hours = 0;
+ } else if (hours != 12 && target.hasClass('hour_pm')) {
+ hours += 12;
+ }
+ }
+ this.viewDate.setUTCHours(hours);
+ this.element.trigger({
+ type: 'changeHour',
+ date: this.viewDate
+ });
+ if (this.viewSelect >= 1) {
+ this._setDate(UTCDate(year, month, day, hours, minutes, seconds, 0));
+ }
+ } else if (target.is('.minute')){
+ minutes = parseInt(target.text().substr(target.text().indexOf(':')+1), 10) || 0;
+ this.viewDate.setUTCMinutes(minutes);
+ this.element.trigger({
+ type: 'changeMinute',
+ date: this.viewDate
+ });
+ if (this.viewSelect >= 0) {
+ this._setDate(UTCDate(year, month, day, hours, minutes, seconds, 0));
+ }
+ }
+ if (this.viewMode != 0) {
+ var oldViewMode = this.viewMode;
+ this.showMode(-1);
+ this.fill();
+ if (oldViewMode == this.viewMode && this.autoclose) {
+ this.hide();
+ }
+ } else {
+ this.fill();
+ if (this.autoclose) {
+ this.hide();
+ }
+ }
+ }
+ break;
+ case 'td':
+ if (target.is('.day') && !target.is('.disabled')){
+ var day = parseInt(target.text(), 10) || 1;
+ var year = this.viewDate.getUTCFullYear(),
+ month = this.viewDate.getUTCMonth(),
+ hours = this.viewDate.getUTCHours(),
+ minutes = this.viewDate.getUTCMinutes(),
+ seconds = this.viewDate.getUTCSeconds();
+ if (target.is('.old')) {
+ if (month === 0) {
+ month = 11;
+ year -= 1;
+ } else {
+ month -= 1;
+ }
+ } else if (target.is('.new')) {
+ if (month == 11) {
+ month = 0;
+ year += 1;
+ } else {
+ month += 1;
+ }
+ }
+ this.viewDate.setUTCDate(day);
+ this.viewDate.setUTCMonth(month);
+ this.viewDate.setUTCFullYear(year);
+ this.element.trigger({
+ type: 'changeDay',
+ date: this.viewDate
+ });
+ if (this.viewSelect >= 2) {
+ this._setDate(UTCDate(year, month, day, hours, minutes, seconds, 0));
+ }
+ }
+ var oldViewMode = this.viewMode;
+ this.showMode(-1);
+ this.fill();
+ if (oldViewMode == this.viewMode && this.autoclose) {
+ this.hide();
+ }
+ break;
+ }
+ }
+ },
+
+ _setDate: function(date, which){
+ if (!which || which == 'date')
+ this.date = date;
+ if (!which || which == 'view')
+ this.viewDate = date;
+ this.fill();
+ this.element.trigger({
+ type: 'changeDate',
+ date: this.date
+ });
+ this.setValue();
+ var element;
+ if (this.isInput) {
+ element = this.element;
+ } else if (this.component){
+ element = this.element.find('input');
+ }
+ if (element) {
+ element.change();
+ if (this.autoclose && (!which || which == 'date')) {
+ //this.hide();
+ }
+ }
+ },
+
+ moveMinute: function(date, dir){
+ if (!dir) return date;
+ var new_date = new Date(date.valueOf());
+ //dir = dir > 0 ? 1 : -1;
+ new_date.setUTCMinutes(new_date.getUTCMinutes() + (dir * this.minuteStep));
+ return new_date;
+ },
+
+ moveHour: function(date, dir){
+ if (!dir) return date;
+ var new_date = new Date(date.valueOf());
+ //dir = dir > 0 ? 1 : -1;
+ new_date.setUTCHours(new_date.getUTCHours() + dir);
+ return new_date;
+ },
+
+ moveDate: function(date, dir){
+ if (!dir) return date;
+ var new_date = new Date(date.valueOf());
+ //dir = dir > 0 ? 1 : -1;
+ new_date.setUTCDate(new_date.getUTCDate() + dir);
+ return new_date;
+ },
+
+ moveMonth: function(date, dir){
+ if (!dir) return date;
+ var new_date = new Date(date.valueOf()),
+ day = new_date.getUTCDate(),
+ month = new_date.getUTCMonth(),
+ mag = Math.abs(dir),
+ new_month, test;
+ dir = dir > 0 ? 1 : -1;
+ if (mag == 1){
+ test = dir == -1
+ // If going back one month, make sure month is not current month
+ // (eg, Mar 31 -> Feb 31 == Feb 28, not Mar 02)
+ ? function(){ return new_date.getUTCMonth() == month; }
+ // If going forward one month, make sure month is as expected
+ // (eg, Jan 31 -> Feb 31 == Feb 28, not Mar 02)
+ : function(){ return new_date.getUTCMonth() != new_month; };
+ new_month = month + dir;
+ new_date.setUTCMonth(new_month);
+ // Dec -> Jan (12) or Jan -> Dec (-1) -- limit expected date to 0-11
+ if (new_month < 0 || new_month > 11)
+ new_month = (new_month + 12) % 12;
+ } else {
+ // For magnitudes >1, move one month at a time...
+ for (var i=0; i<mag; i++)
+ // ...which might decrease the day (eg, Jan 31 to Feb 28, etc)...
+ new_date = this.moveMonth(new_date, dir);
+ // ...then reset the day, keeping it in the new month
+ new_month = new_date.getUTCMonth();
+ new_date.setUTCDate(day);
+ test = function(){ return new_month != new_date.getUTCMonth(); };
+ }
+ // Common date-resetting loop -- if date is beyond end of month, make it
+ // end of month
+ while (test()){
+ new_date.setUTCDate(--day);
+ new_date.setUTCMonth(new_month);
+ }
+ return new_date;
+ },
+
+ moveYear: function(date, dir){
+ return this.moveMonth(date, dir*12);
+ },
+
+ dateWithinRange: function(date){
+ return date >= this.startDate && date <= this.endDate;
+ },
+
+ keydown: function(e){
+ if (this.picker.is(':not(:visible)')){
+ if (e.keyCode == 27) // allow escape to hide and re-show picker
+ this.show();
+ return;
+ }
+ var dateChanged = false,
+ dir, day, month,
+ newDate, newViewDate;
+ switch(e.keyCode){
+ case 27: // escape
+ this.hide();
+ e.preventDefault();
+ break;
+ case 37: // left
+ case 39: // right
+ if (!this.keyboardNavigation) break;
+ dir = e.keyCode == 37 ? -1 : 1;
+ viewMode = this.viewMode;
+ if (e.ctrlKey) {
+ viewMode += 2;
+ } else if (e.shiftKey) {
+ viewMode += 1;
+ }
+ if (viewMode == 4) {
+ newDate = this.moveYear(this.date, dir);
+ newViewDate = this.moveYear(this.viewDate, dir);
+ } else if (viewMode == 3) {
+ newDate = this.moveMonth(this.date, dir);
+ newViewDate = this.moveMonth(this.viewDate, dir);
+ } else if (viewMode == 2) {
+ newDate = this.moveDate(this.date, dir);
+ newViewDate = this.moveDate(this.viewDate, dir);
+ } else if (viewMode == 1) {
+ newDate = this.moveHour(this.date, dir);
+ newViewDate = this.moveHour(this.viewDate, dir);
+ } else if (viewMode == 0) {
+ newDate = this.moveMinute(this.date, dir);
+ newViewDate = this.moveMinute(this.viewDate, dir);
+ }
+ if (this.dateWithinRange(newDate)){
+ this.date = newDate;
+ this.viewDate = newViewDate;
+ this.setValue();
+ this.update();
+ e.preventDefault();
+ dateChanged = true;
+ }
+ break;
+ case 38: // up
+ case 40: // down
+ if (!this.keyboardNavigation) break;
+ dir = e.keyCode == 38 ? -1 : 1;
+ viewMode = this.viewMode;
+ if (e.ctrlKey) {
+ viewMode += 2;
+ } else if (e.shiftKey) {
+ viewMode += 1;
+ }
+ if (viewMode == 4) {
+ newDate = this.moveYear(this.date, dir);
+ newViewDate = this.moveYear(this.viewDate, dir);
+ } else if (viewMode == 3) {
+ newDate = this.moveMonth(this.date, dir);
+ newViewDate = this.moveMonth(this.viewDate, dir);
+ } else if (viewMode == 2) {
+ newDate = this.moveDate(this.date, dir * 7);
+ newViewDate = this.moveDate(this.viewDate, dir * 7);
+ } else if (viewMode == 1) {
+ if (this.showMeridian) {
+ newDate = this.moveHour(this.date, dir * 6);
+ newViewDate = this.moveHour(this.viewDate, dir * 6);
+ } else {
+ newDate = this.moveHour(this.date, dir * 4);
+ newViewDate = this.moveHour(this.viewDate, dir * 4);
+ }
+ } else if (viewMode == 0) {
+ newDate = this.moveMinute(this.date, dir * 4);
+ newViewDate = this.moveMinute(this.viewDate, dir * 4);
+ }
+ if (this.dateWithinRange(newDate)){
+ this.date = newDate;
+ this.viewDate = newViewDate;
+ this.setValue();
+ this.update();
+ e.preventDefault();
+ dateChanged = true;
+ }
+ break;
+ case 13: // enter
+ if (this.viewMode != 0) {
+ var oldViewMode = this.viewMode;
+ this.showMode(-1);
+ this.fill();
+ if (oldViewMode == this.viewMode && this.autoclose) {
+ this.hide();
+ }
+ } else {
+ this.fill();
+ if (this.autoclose) {
+ this.hide();
+ }
+ }
+ e.preventDefault();
+ break;
+ case 9: // tab
+ this.hide();
+ break;
+ }
+ if (dateChanged){
+ this.element.trigger({
+ type: 'changeDate',
+ date: this.date
+ });
+ var element;
+ if (this.isInput) {
+ element = this.element;
+ } else if (this.component){
+ element = this.element.find('input');
+ }
+ if (element) {
+ element.change();
+ }
+ }
+ },
+
+ showMode: function(dir) {
+ if (dir) {
+ var newViewMode = Math.max(0, Math.min(DPGlobal.modes.length - 1, this.viewMode + dir));
+ if (newViewMode >= this.minView && newViewMode <= this.maxView) {
+ this.viewMode = newViewMode;
+ }
+ }
+ /*
+ vitalets: fixing bug of very special conditions:
+ jquery 1.7.1 + webkit + show inline datetimepicker in bootstrap popover.
+ Method show() does not set display css correctly and datetimepicker is not shown.
+ Changed to .css('display', 'block') solve the problem.
+ See https://github.com/vitalets/x-editable/issues/37
+
+ In jquery 1.7.2+ everything works fine.
+ */
+ //this.picker.find('>div').hide().filter('.datetimepicker-'+DPGlobal.modes[this.viewMode].clsName).show();
+ this.picker.find('>div').hide().filter('.datetimepicker-'+DPGlobal.modes[this.viewMode].clsName).css('display', 'block');
+ this.updateNavArrows();
+ },
+
+ reset: function(e) {
+ this._setDate(null, 'date');
+ }
+ };
+
+ $.fn.datetimepicker = function ( option ) {
+ var args = Array.apply(null, arguments);
+ args.shift();
+ return this.each(function () {
+ var $this = $(this),
+ data = $this.data('datetimepicker'),
+ options = typeof option == 'object' && option;
+ if (!data) {
+ $this.data('datetimepicker', (data = new Datetimepicker(this, $.extend({}, $.fn.datetimepicker.defaults,options))));
+ }
+ if (typeof option == 'string' && typeof data[option] == 'function') {
+ data[option].apply(data, args);
+ }
+ });
+ };
+
+ $.fn.datetimepicker.defaults = {
+ };
+ $.fn.datetimepicker.Constructor = Datetimepicker;
+ var dates = $.fn.datetimepicker.dates = {
+ en: {
+ days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
+ daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+ daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
+ months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+ monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+ meridiem: ["am", "pm"],
+ suffix: ["st", "nd", "rd", "th"],
+ today: "Today"
+ }
+ };
+
+ var DPGlobal = {
+ modes: [
+ {
+ clsName: 'minutes',
+ navFnc: 'Hours',
+ navStep: 1
+ },
+ {
+ clsName: 'hours',
+ navFnc: 'Date',
+ navStep: 1
+ },
+ {
+ clsName: 'days',
+ navFnc: 'Month',
+ navStep: 1
+ },
+ {
+ clsName: 'months',
+ navFnc: 'FullYear',
+ navStep: 1
+ },
+ {
+ clsName: 'years',
+ navFnc: 'FullYear',
+ navStep: 10
+ }],
+ isLeapYear: function (year) {
+ return (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0))
+ },
+ getDaysInMonth: function (year, month) {
+ return [31, (DPGlobal.isLeapYear(year) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month]
+ },
+ getDefaultFormat: function (type, field) {
+ if (type == "standard") {
+ if (field == 'input')
+ return 'yyyy-mm-dd hh:ii';
+ else
+ return 'yyyy-mm-dd hh:ii:ss';
+ } else if (type == "php") {
+ if (field == 'input')
+ return 'Y-m-d H:i';
+ else
+ return 'Y-m-d H:i:s';
+ } else {
+ throw new Error("Invalid format type.");
+ }
+ },
+ validParts: function (type) {
+ if (type == "standard") {
+ return /hh?|HH?|p|P|ii?|ss?|dd?|DD?|mm?|MM?|yy(?:yy)?/g;
+ } else if (type == "php") {
+ return /[dDjlNwzFmMnStyYaABgGhHis]/g;
+ } else {
+ throw new Error("Invalid format type.");
+ }
+ },
+ nonpunctuation: /[^ -\/:-@\[-`{-~\t\n\rTZ]+/g,
+ parseFormat: function(format, type){
+ // IE treats \0 as a string end in inputs (truncating the value),
+ // so it's a bad format delimiter, anyway
+ var separators = format.replace(this.validParts(type), '\0').split('\0'),
+ parts = format.match(this.validParts(type));
+ if (!separators || !separators.length || !parts || parts.length == 0){
+ throw new Error("Invalid date format.");
+ }
+ return {separators: separators, parts: parts};
+ },
+ parseDate: function(date, format, language, type) {
+ if (date instanceof Date) {
+ var dateUTC = new Date(date.valueOf() - date.getTimezoneOffset() * 60000);
+ dateUTC.setMilliseconds(0);
+ return dateUTC;
+ }
+ if (/^\d{4}\-\d{1,2}\-\d{1,2}$/.test(date)) {
+ format = this.parseFormat('yyyy-mm-dd', type);
+ }
+ if (/^\d{4}\-\d{1,2}\-\d{1,2}[T ]\d{1,2}\:\d{1,2}$/.test(date)) {
+ format = this.parseFormat('yyyy-mm-dd hh:ii', type);
+ }
+ if (/^\d{4}\-\d{1,2}\-\d{1,2}[T ]\d{1,2}\:\d{1,2}\:\d{1,2}[Z]{0,1}$/.test(date)) {
+ format = this.parseFormat('yyyy-mm-dd hh:ii:ss', type);
+ }
+ if (/^[-+]\d+[dmwy]([\s,]+[-+]\d+[dmwy])*$/.test(date)) {
+ var part_re = /([-+]\d+)([dmwy])/,
+ parts = date.match(/([-+]\d+)([dmwy])/g),
+ part, dir;
+ date = new Date();
+ for (var i=0; i<parts.length; i++) {
+ part = part_re.exec(parts[i]);
+ dir = parseInt(part[1]);
+ switch(part[2]){
+ case 'd':
+ date.setUTCDate(date.getUTCDate() + dir);
+ break;
+ case 'm':
+ date = Datetimepicker.prototype.moveMonth.call(Datetimepicker.prototype, date, dir);
+ break;
+ case 'w':
+ date.setUTCDate(date.getUTCDate() + dir * 7);
+ break;
+ case 'y':
+ date = Datetimepicker.prototype.moveYear.call(Datetimepicker.prototype, date, dir);
+ break;
+ }
+ }
+ return UTCDate(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds(), 0);
+ }
+ var parts = date && date.match(this.nonpunctuation) || [],
+ date = new Date(0, 0, 0, 0, 0, 0, 0),
+ parsed = {},
+ setters_order = ['hh', 'h', 'ii', 'i', 'ss', 's', 'yyyy', 'yy', 'M', 'MM', 'm', 'mm', 'D', 'DD', 'd', 'dd', 'H', 'HH', 'p', 'P'],
+ setters_map = {
+ hh: function(d,v){ return d.setUTCHours(v); },
+ h: function(d,v){ return d.setUTCHours(v); },
+ HH: function(d,v){ return d.setUTCHours(v==12?0:v); },
+ H: function(d,v){ return d.setUTCHours(v==12?0:v); },
+ ii: function(d,v){ return d.setUTCMinutes(v); },
+ i: function(d,v){ return d.setUTCMinutes(v); },
+ ss: function(d,v){ return d.setUTCSeconds(v); },
+ s: function(d,v){ return d.setUTCSeconds(v); },
+ yyyy: function(d,v){ return d.setUTCFullYear(v); },
+ yy: function(d,v){ return d.setUTCFullYear(2000+v); },
+ m: function(d,v){
+ v -= 1;
+ while (v<0) v += 12;
+ v %= 12;
+ d.setUTCMonth(v);
+ while (d.getUTCMonth() != v)
+ d.setUTCDate(d.getUTCDate()-1);
+ return d;
+ },
+ d: function(d,v){ return d.setUTCDate(v); },
+ p: function(d,v){ return d.setUTCHours(v==1?d.getUTCHours()+12:d.getUTCHours()); }
+ },
+ val, filtered, part;
+ setters_map['M'] = setters_map['MM'] = setters_map['mm'] = setters_map['m'];
+ setters_map['dd'] = setters_map['d'];
+ setters_map['P'] = setters_map['p'];
+ date = UTCDate(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());
+ if (parts.length == format.parts.length) {
+ for (var i=0, cnt = format.parts.length; i < cnt; i++) {
+ val = parseInt(parts[i], 10);
+ part = format.parts[i];
+ if (isNaN(val)) {
+ switch(part) {
+ case 'MM':
+ filtered = $(dates[language].months).filter(function(){
+ var m = this.slice(0, parts[i].length),
+ p = parts[i].slice(0, m.length);
+ return m == p;
+ });
+ val = $.inArray(filtered[0], dates[language].months) + 1;
+ break;
+ case 'M':
+ filtered = $(dates[language].monthsShort).filter(function(){
+ var m = this.slice(0, parts[i].length),
+ p = parts[i].slice(0, m.length);
+ return m == p;
+ });
+ val = $.inArray(filtered[0], dates[language].monthsShort) + 1;
+ break;
+ case 'p':
+ case 'P':
+ val = $.inArray(parts[i].toLowerCase(), dates[language].meridiem);
+ break;
+ }
+ }
+ parsed[part] = val;
+ }
+ for (var i=0, s; i<setters_order.length; i++){
+ s = setters_order[i];
+ if (s in parsed && !isNaN(parsed[s]))
+ setters_map[s](date, parsed[s])
+ }
+ }
+ return date;
+ },
+ formatDate: function(date, format, language, type){
+ if (date == null) {
+ return '';
+ }
+ var val;
+ if (type == 'standard') {
+ val = {
+ // year
+ yy: date.getUTCFullYear().toString().substring(2),
+ yyyy: date.getUTCFullYear(),
+ // month
+ m: date.getUTCMonth() + 1,
+ M: dates[language].monthsShort[date.getUTCMonth()],
+ MM: dates[language].months[date.getUTCMonth()],
+ // day
+ d: date.getUTCDate(),
+ D: dates[language].daysShort[date.getUTCDay()],
+ DD: dates[language].days[date.getUTCDay()],
+ p: (dates[language].meridiem.length==2?dates[language].meridiem[date.getUTCHours()<12?0:1]:''),
+ // hour
+ h: date.getUTCHours(),
+ // minute
+ i: date.getUTCMinutes(),
+ // second
+ s: date.getUTCSeconds()
+ };
+ val.H = (val.h%12==0? 12 : val.h%12);
+ val.HH = (val.H < 10 ? '0' : '') + val.H;
+ val.P = val.p.toUpperCase();
+ val.hh = (val.h < 10 ? '0' : '') + val.h;
+ val.ii = (val.i < 10 ? '0' : '') + val.i;
+ val.ss = (val.s < 10 ? '0' : '') + val.s;
+ val.dd = (val.d < 10 ? '0' : '') + val.d;
+ val.mm = (val.m < 10 ? '0' : '') + val.m;
+ } else if (type == 'php') {
+ // php format
+ val = {
+ // year
+ y: date.getUTCFullYear().toString().substring(2),
+ Y: date.getUTCFullYear(),
+ // month
+ F: dates[language].months[date.getUTCMonth()],
+ M: dates[language].monthsShort[date.getUTCMonth()],
+ n: date.getUTCMonth() + 1,
+ t: DPGlobal.getDaysInMonth(date.getUTCFullYear(), date.getUTCMonth()),
+ // day
+ j: date.getUTCDate(),
+ l: dates[language].days[date.getUTCDay()],
+ D: dates[language].daysShort[date.getUTCDay()],
+ w: date.getUTCDay(), // 0 -> 6
+ N: (date.getUTCDay()==0?7:date.getUTCDay()), // 1 -> 7
+ S: (date.getUTCDate()%10<=dates[language].suffix.length?dates[language].suffix[date.getUTCDate()%10-1]:''),
+ // hour
+ a: (dates[language].meridiem.length==2?dates[language].meridiem[date.getUTCHours()<12?0:1]:''),
+ g: (date.getUTCHours()%12==0?12:date.getUTCHours()%12),
+ G: date.getUTCHours(),
+ // minute
+ i: date.getUTCMinutes(),
+ // second
+ s: date.getUTCSeconds()
+ };
+ val.m = (val.n < 10 ? '0' : '') + val.n;
+ val.d = (val.j < 10 ? '0' : '') + val.j;
+ val.A = val.a.toString().toUpperCase();
+ val.h = (val.g < 10 ? '0' : '') + val.g;
+ val.H = (val.G < 10 ? '0' : '') + val.G;
+ val.i = (val.i < 10 ? '0' : '') + val.i;
+ val.s = (val.s < 10 ? '0' : '') + val.s;
+ } else {
+ throw new Error("Invalid format type.");
+ }
+ var date = [],
+ seps = $.extend([], format.separators);
+ for (var i=0, cnt = format.parts.length; i < cnt; i++) {
+ if (seps.length)
+ date.push(seps.shift())
+ date.push(val[format.parts[i]]);
+ }
+ return date.join('');
+ },
+ convertViewMode: function(viewMode){
+ switch (viewMode) {
+ case 4:
+ case 'decade':
+ viewMode = 4;
+ break;
+ case 3:
+ case 'year':
+ viewMode = 3;
+ break;
+ case 2:
+ case 'month':
+ viewMode = 2;
+ break;
+ case 1:
+ case 'day':
+ viewMode = 1;
+ break;
+ case 0:
+ case 'hour':
+ viewMode = 0;
+ break;
+ }
+
+ return viewMode;
+ },
+ headTemplate: '<thead>'+
+ '<tr>'+
+ '<th class="prev"><i class="icon-arrow-left"/></th>'+
+ '<th colspan="5" class="switch"></th>'+
+ '<th class="next"><i class="icon-arrow-right"/></th>'+
+ '</tr>'+
+ '</thead>',
+ contTemplate: '<tbody><tr><td colspan="7"></td></tr></tbody>',
+ footTemplate: '<tfoot><tr><th colspan="7" class="today"></th></tr></tfoot>'
+ };
+ DPGlobal.template = '<div class="datetimepicker">'+
+ '<div class="datetimepicker-minutes">'+
+ '<table class=" table-condensed">'+
+ DPGlobal.headTemplate+
+ DPGlobal.contTemplate+
+ DPGlobal.footTemplate+
+ '</table>'+
+ '</div>'+
+ '<div class="datetimepicker-hours">'+
+ '<table class=" table-condensed">'+
+ DPGlobal.headTemplate+
+ DPGlobal.contTemplate+
+ DPGlobal.footTemplate+
+ '</table>'+
+ '</div>'+
+ '<div class="datetimepicker-days">'+
+ '<table class=" table-condensed">'+
+ DPGlobal.headTemplate+
+ '<tbody></tbody>'+
+ DPGlobal.footTemplate+
+ '</table>'+
+ '</div>'+
+ '<div class="datetimepicker-months">'+
+ '<table class="table-condensed">'+
+ DPGlobal.headTemplate+
+ DPGlobal.contTemplate+
+ DPGlobal.footTemplate+
+ '</table>'+
+ '</div>'+
+ '<div class="datetimepicker-years">'+
+ '<table class="table-condensed">'+
+ DPGlobal.headTemplate+
+ DPGlobal.contTemplate+
+ DPGlobal.footTemplate+
+ '</table>'+
+ '</div>'+
+ '</div>';
+
+ $.fn.datetimepicker.DPGlobal = DPGlobal;
+
+}( window.jQuery );
diff --git a/src/inputs/datetime/datetime.js b/src/inputs/datetime/datetime.js
new file mode 100644
index 0000000..9ad4d8a
--- /dev/null
+++ b/src/inputs/datetime/datetime.js
@@ -0,0 +1,204 @@
+/**
+Bootstrap-datetimepicker.
+Description and examples: https://github.com/smalot/bootstrap-datetimepicker.
+For **i18n** you should include js file from here: https://github.com/smalot/bootstrap-datetimepicker/tree/master/js/locales
+and set `language` option.
+
+@class datetime
+@extends abstractinput
+@final
+@example
+<a href="#" id="last_seen" data-type="datetime" data-pk="1" data-url="/post" data-original-title="Select date & time">15/03/2013 12:45</a>
+<script>
+$(function(){
+ $('#last_seen').editable({
+ format: 'yyyy-mm-dd hh:ii:ss',
+ viewformat: 'dd/mm/yyyy hh:ii:ss',
+ datetimepicker: {
+ weekStart: 1
+ }
+ }
+ });
+});
+</script>
+**/
+(function ($) {
+
+ var DateTime = function (options) {
+ this.init('datetime', options, DateTime.defaults);
+ this.initPicker(options, DateTime.defaults);
+ };
+
+ $.fn.editableutils.inherit(DateTime, $.fn.editabletypes.abstractinput);
+
+ $.extend(DateTime.prototype, {
+ initPicker: function(options, defaults) {
+ //'format' is set directly from settings or data-* attributes
+
+ //by default viewformat equals to format
+ if(!this.options.viewformat) {
+ this.options.viewformat = this.options.format;
+ }
+
+ //overriding datetimepicker config (as by default jQuery extend() is not recursive)
+ //since 1.4 datetimepicker internally uses viewformat instead of format. Format is for submit only
+ this.options.datetimepicker = $.extend({}, defaults.datetimepicker, options.datetimepicker, {
+ format: this.options.viewformat
+ });
+
+ //language
+ this.options.datetimepicker.language = this.options.datetimepicker.language || 'en';
+
+ //store DPglobal
+ this.dpg = $.fn.datetimepicker.DPGlobal;
+
+ //store parsed formats
+ this.parsedFormat = this.dpg.parseFormat(this.options.format, this.options.formatType);
+ this.parsedViewFormat = this.dpg.parseFormat(this.options.viewformat, this.options.formatType);
+
+ //
+ this.options.datetimepicker.startView = this.options.startView;
+ this.options.datetimepicker.minView = this.options.minView;
+ this.options.datetimepicker.maxView = this.options.maxView;
+ },
+
+ render: function () {
+ this.$input.datetimepicker(this.options.datetimepicker);
+
+ //"clear" link
+ if(this.options.clear) {
+ this.$clear = $('<a href="#"></a>').html(this.options.clear).click($.proxy(function(e){
+ e.preventDefault();
+ e.stopPropagation();
+ this.clear();
+ }, this));
+
+ this.$tpl.parent().append($('<div class="editable-clear">').append(this.$clear));
+ }
+ },
+
+ value2html: function(value, element) {
+ var text = value ? this.dpg.formatDate(value, this.parsedViewFormat, this.options.datetimepicker.language, this.options.formatType) : '';
+ DateTime.superclass.value2html(text, element);
+ },
+
+ html2value: function(html) {
+ return html ? this.dpg.parseDate(html, this.parsedViewFormat, this.options.datetimepicker.language, this.options.formatType) : null;
+ },
+
+ value2str: function(value) {
+ return value ? this.dpg.formatDate(value, this.parsedFormat, this.options.datetimepicker.language, this.options.formatType) : '';
+ },
+
+ str2value: function(str) {
+ return str ? this.dpg.parseDate(str, this.parsedFormat, this.options.datetimepicker.language, this.options.formatType) : null;
+ },
+
+ value2submit: function(value) {
+ return this.value2str(value);
+ },
+
+ value2input: function(value) {
+ this.$input.datetimepicker('update', value);
+ },
+
+ input2value: function() {
+ return this.$input.data('datetimepicker').date;
+ },
+
+ activate: function() {
+ },
+
+ clear: function() {
+ this.$input.data('datetimepicker').date = null;
+ this.$input.find('.active').removeClass('active');
+ },
+
+ autosubmit: function() {
+ this.$input.on('mouseup', '.day', function(e){
+ if($(e.currentTarget).is('.old') || $(e.currentTarget).is('.new')) {
+ return;
+ }
+ var $form = $(this).closest('form');
+ setTimeout(function() {
+ $form.submit();
+ }, 200);
+ });
+ //changedate is not suitable as it triggered when showing datetimepicker. see #149
+ /*
+ this.$input.on('changeDate', function(e){
+ var $form = $(this).closest('form');
+ setTimeout(function() {
+ $form.submit();
+ }, 200);
+ });
+ */
+ }
+
+ });
+
+ DateTime.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
+ /**
+ @property tpl
+ @default <div></div>
+ **/
+ tpl:'<div class="editable-date well"></div>',
+ /**
+ @property inputclass
+ @default null
+ **/
+ inputclass: null,
+ /**
+ Format used for sending value to server. Also applied when converting date from <code>data-value</code> attribute.<br>
+ Possible tokens are: <code>d, dd, m, mm, yy, yyyy</code>
+
+ @property format
+ @type string
+ @default yyyy-mm-dd hh:ii
+ **/
+ format:'yyyy-mm-dd hh:ii',
+ formatType:'standard',
+ /**
+ Format used for displaying date. Also applied when converting date from element's text on init.
+ If not specified equals to <code>format</code>
+
+ @property viewformat
+ @type string
+ @default null
+ **/
+ viewformat: null,
+ /**
+ Configuration of datetimepicker.
+ Full list of options: https://github.com/smalot/bootstrap-datetimepicker
+
+ @property datetimepicker
+ @type object
+ @default {
+ weekStart: 0,
+ startView: 0,
+ minView: 0,
+ autoclose: false
+ }
+ **/
+ datetimepicker:{
+ weekStart: 0,
+ startView: 2, // month
+ maxView: 4, // decade
+ minView: 0,
+ todayHighlight: false,
+ autoclose: false
+ },
+ /**
+ Text shown as clear date button.
+ If <code>false</code> clear button will not be rendered.
+
+ @property clear
+ @type boolean|string
+ @default 'x clear'
+ **/
+ clear: '× clear'
+ });
+
+ $.fn.editabletypes.datetime = DateTime;
+
+}(window.jQuery));
diff --git a/src/inputs/datetime/datetimefield.js b/src/inputs/datetime/datetimefield.js
new file mode 100644
index 0000000..a12f268
--- /dev/null
+++ b/src/inputs/datetime/datetimefield.js
@@ -0,0 +1,80 @@
+/**
+Bootstrap datetimefield input - modification for inline mode.
+Shows normal <input type="text"> and binds popup datetimepicker.
+Automatically shown in inline mode.
+
+@class datetimefield
+@extends datetime
+
+**/
+(function ($) {
+
+ var DateTimeField = function (options) {
+ this.init('datetimefield', options, DateTimeField.defaults);
+ this.initPicker(options, DateTimeField.defaults);
+ };
+
+ $.fn.editableutils.inherit(DateTimeField, $.fn.editabletypes.datetime);
+
+ $.extend(DateTimeField.prototype, {
+ render: function () {
+ this.$input = this.$tpl.find('input');
+ this.setClass();
+ this.setAttr('placeholder');
+
+ this.$tpl.datetimepicker(this.options.datetimepicker);
+
+ //need to disable original event handlers
+ this.$input.off('focus keydown');
+
+ //update value of datepicker
+ this.$input.keyup($.proxy(function(){
+ this.$tpl.removeData('date');
+ this.$tpl.datetimepicker('update');
+ }, this));
+
+ },
+
+ value2input: function(value) {
+ this.$input.val(value ? this.dpg.formatDate(value, this.parsedViewFormat, this.options.datepicker.language) : '');
+ this.$tpl.datepicker('update');
+ },
+
+ input2value: function() {
+ return this.html2value(this.$input.val());
+ },
+
+ activate: function() {
+ $.fn.editabletypes.text.prototype.activate.call(this);
+ },
+
+ autosubmit: function() {
+ //reset autosubmit to empty
+ }
+ });
+
+ DateTimeField.defaults = $.extend({}, $.fn.editabletypes.datetime.defaults, {
+ /**
+ @property tpl
+ **/
+ tpl:'<div class="input-append date"><input type="text"/><span class="add-on"><i class="icon-th"></i></span></div>',
+ /**
+ @property inputclass
+ @default 'input-small'
+ **/
+ inputclass: 'input-small',
+
+ /* datetimepicker config */
+ datetimepicker:{
+ weekStart: 0,
+ startView: 2, // month
+ maxView: 4, // decade
+ minView: 0,
+ todayHighlight: false,
+ autoclose: true
+ }
+ });
+
+ $.fn.editabletypes.datetimefield = DateTimeField;
+
+}(window.jQuery));
\ No newline at end of file
diff --git a/test/loader.js b/test/loader.js
index 5fe77fd..e2a1f8c 100644
--- a/test/loader.js
+++ b/test/loader.js
@@ -104,6 +104,15 @@ define(function () {
loadCss(require.toUrl("./bootstrap-datepicker/css/datepicker.css"));
}
},
+ 'inputs/datetime/datetime': {
+ deps: ['require',
+ 'bootstrap/js/bootstrap',
+ 'inputs/abstract',
+ 'inputs/datetime/bootstrap-datetimepicker/js/bootstrap-datetimepicker'],
+ init: function(require) {
+ loadCss(require.toUrl("./bootstrap-datetimepicker/css/datetimepicker.css"));
+ }
+ },
//wysihtml5
// 'inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.min': ['inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/wysihtml5-0.3.0.min'],
@@ -133,6 +142,9 @@ define(function () {
//datefield
'inputs/date/datefield': ['inputs/date/date'],
+ //datetimefield
+ 'inputs/datetime/datetimefield': ['inputs/datetime/datetime'],
+
/* ------------------------------
jqueryui
------------------------------ */
@@ -195,6 +207,7 @@ define(function () {
if(f === 'bootstrap') {
//bootstrap
shim['editable-form/editable-form'].deps.push('inputs/date/datefield');
+ shim['editable-form/editable-form'].deps.push('inputs/datetime/datetimefield');
shim['editable-form/editable-form'].deps.push('inputs-ext/wysihtml5/wysihtml5');
shim['editable-form/editable-form'].deps.push('inputs/typeahead');
shim['element/editable-element'].deps.push('editable-form/editable-form-bootstrap');