https://innos.com/js/admin/bootstrap-datepicker.js

1/* =========================================================
2 * bootstrap-datepicker.js 
3 * http://www.eyecon.ro/bootstrap-datepicker
4 * =========================================================
5 * Copyright 2012 Stefan Petre
6 *
7 * Licensed under the Apache License, Version 2.0 (the "License");
8 * you may not use this file except in compliance with the License.
9 * You may obtain a copy of the License at
10 *
11 * http://www.apache.org/licenses/LICENSE-2.0
12 *
13 * Unless required by applicable law or agreed to in writing, software
14 * distributed under the License is distributed on an "AS IS" BASIS,
15 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 * See the License for the specific language governing permissions and
17 * limitations under the License.
18 * ========================================================= */
19
20!function ($) {
21
22    // Picker object
23
24    var Datepicker = function (element, options) {
25        this.element = $(element);
26        this.format = DPGlobal.parseFormat(options.format || this.element.data('date-format') || 'mm/dd/yyyy');
27        this.picker = $(DPGlobal.template)
28            .appendTo('body')
29            .on({
30                click: $.proxy(this.click, this)//,
31                //mousedown: $.proxy(this.mousedown, this)
32            });
33        this.isInput = this.element.is('input');
34        this.component = this.element.is('.date') ? this.element.find('.add-on') : false;
35
36        if (this.isInput) {
37            this.element.on({
38                focus: $.proxy(this.show, this),
39                //blur: $.proxy(this.hide, this),
40                keyup: $.proxy(this.update, this)
41            });
42        } else {
43            if (this.component) {
44                this.component.on('click', $.proxy(this.show, this));
45            } else {
46                this.element.on('click', $.proxy(this.show, this));
47            }
48        }
49
50        this.minViewMode = options.minViewMode || this.element.data('date-minviewmode') || 0;
51        if (typeof this.minViewMode === 'string') {
52            switch (this.minViewMode) {
53                case 'months':
54                    this.minViewMode = 1;
55                    break;
56                case 'years':
57                    this.minViewMode = 2;
58                    break;
59                default:
60                    this.minViewMode = 0;
61                    break;
62            }
63        }
64        this.viewMode = options.viewMode || this.element.data('date-viewmode') || 0;
65        if (typeof this.viewMode === 'string') {
66            switch (this.viewMode) {
67                case 'months':
68                    this.viewMode = 1;
69                    break;
70                case 'years':
71                    this.viewMode = 2;
72                    break;
73                default:
74                    this.viewMode = 0;
75                    break;
76            }
77        }
78        this.startViewMode = this.viewMode;
79        this.weekStart = options.weekStart || this.element.data('date-weekstart') || 0;
80        this.weekEnd = this.weekStart === 0 ? 6 : this.weekStart - 1;
81        this.onRender = options.onRender;
82        this.fillDow();
83        this.fillMonths();
84        this.update();
85        this.showMode();
86    };
87
88    Datepicker.prototype = {
89        constructor: Datepicker,
90
91        show: function (e) {
92            this.picker.show();
93            this.height = this.component ? this.component.outerHeight() : this.element.outerHeight();
94            this.place();
95            $(window).on('resize', $.proxy(this.place, this));
96            if (e) {
97                e.stopPropagation();
98                e.preventDefault();
99            }
100            if (!this.isInput) {
101            }
102            var that = this;
103            $(document).on('mousedown', function (ev) {
104                if ($(ev.target).closest('.datepicker').length == 0) {
105                    that.hide();
106                }
107            });
108            this.element.trigger({
109                type: 'show',
110                date: this.date
111            });
112        },
113
114        hide: function () {
115            this.picker.hide();
116            $(window).off('resize', this.place);
117            this.viewMode = this.startViewMode;
118            this.showMode();
119            if (!this.isInput) {
120                $(document).off('mousedown', this.hide);
121            }
122            //this.set();
123            this.element.trigger({
124                type: 'hide',
125                date: this.date
126            });
127        },
128
129        set: function () {
130            var formated = DPGlobal.formatDate(this.date, this.format);
131            if (!this.isInput) {
132                if (this.component) {
133                    this.element.find('input').prop('value', formated);
134                }
135                this.element.data('date', formated);
136            } else {
137                this.element.prop('value', formated);
138            }
139        },
140
141        setValue: function (newDate) {
142            if (typeof newDate === 'string') {
143                this.date = DPGlobal.parseDate(newDate, this.format);
144            } else {
145                this.date = new Date(newDate);
146            }
147            this.set();
148            this.viewDate = new Date(this.date.getFullYear(), this.date.getMonth(), 1, 0, 0, 0, 0);
149            this.fill();
150        },
151
152        place: function () {
153            var offset = this.component ? this.component.offset() : this.element.offset();
154            this.picker.css({
155                top: offset.top + this.height,
156                left: offset.left
157            });
158        },
159
160        update: function (newDate) {
161            this.date = DPGlobal.parseDate(
162                typeof newDate === 'string' ? newDate : (this.isInput ? this.element.prop('value') : this.element.data('date')),
163                this.format
164            );
165            this.viewDate = new Date(this.date.getFullYear(), this.date.getMonth(), 1, 0, 0, 0, 0);
166            this.fill();
167        },
168
169        fillDow: function () {
170            var dowCnt = this.weekStart;
171            var html = '<tr>';
172            while (dowCnt < this.weekStart + 7) {
173                html += '<th class="dow">' + DPGlobal.dates.daysMin[(dowCnt++) % 7] + '</th>';
174            }
175            html += '</tr>';
176            this.picker.find('.datepicker-days thead').append(html);
177        },
178
179        fillMonths: function () {
180            var html = '';
181            var i = 0
182            while (i < 12) {
183                html += '<span class="month">' + DPGlobal.dates.monthsShort[i++] + '</span>';
184            }
185            this.picker.find('.datepicker-months td').append(html);
186        },
187
188        fill: function () {
189            var d = new Date(this.viewDate),
190                year = d.getFullYear(),

191                month = d.getMonth(),
192                currentDate = this.date.valueOf();
193            this.picker.find('.datepicker-days th:eq(1)')
194                .text(DPGlobal.dates.months[month] + ' ' + year);
195            var prevMonth = new Date(year, month - 1, 28, 0, 0, 0, 0),
196                day = DPGlobal.getDaysInMonth(prevMonth.getFullYear(), prevMonth.getMonth());
197            prevMonth.setDate(day);
198            prevMonth.setDate(day - (prevMonth.getDay() - this.weekStart + 7) % 7);
199            var nextMonth = new Date(prevMonth);
200            nextMonth.setDate(nextMonth.getDate() + 42);
201            nextMonth = nextMonth.valueOf();
202            var html = [];
203            var clsName,
204                prevY,
205                prevM;
206            while (prevMonth.valueOf() < nextMonth) {
207                if (prevMonth.getDay() === this.weekStart) {
208                    html.push('<tr>');
209                }
210                clsName = this.onRender(prevMonth);
211                prevY = prevMonth.getFullYear();
212                prevM = prevMonth.getMonth();
213                if ((prevM < month && prevY === year) || prevY < year) {
214                    clsName += ' old';
215                } else if ((prevM > month && prevY === year) || prevY > year) {
216                    clsName += ' new';
217                }
218                if (prevMonth.valueOf() === currentDate) {
219                    clsName += ' active';
220                }
221                html.push('<td class="day ' + clsName + '">' + prevMonth.getDate() + '</td>');
222                if (prevMonth.getDay() === this.weekEnd) {
223                    html.push('</tr>');
224                }
225                prevMonth.setDate(prevMonth.getDate() + 1);
226            }
227            this.picker.find('.datepicker-days tbody').empty().append(html.join(''));
228            var currentYear = this.date.getFullYear();
229
230            var months = this.picker.find('.datepicker-months')
231                .find('th:eq(1)')
232                .text(year)
233                .end()
234                .find('span').removeClass('active');
235            if (currentYear === year) {
236                months.eq(this.date.getMonth()).addClass('active');
237            }
238
239            html = '';
240            year = parseInt(year / 10, 10) * 10;
241            var yearCont = this.picker.find('.datepicker-years')
242                .find('th:eq(1)')
243                .text(year + '-' + (year + 9))
244                .end()
245                .find('td');
246            year -= 1;
247            for (var i = -1; i < 11; i++) {
248                html += '<span class="year' + (i === -1 || i === 10 ? ' old' : '') + (currentYear === year ? ' active' : '') + '">' + year + '</span>';
249                year += 1;
250            }
251            yearCont.html(html);
252        },
253
254        click: function (e) {
255            e.stopPropagation();
256            e.preventDefault();
257            var target = $(e.target).closest('span, td, th');
258            if (target.length === 1) {
259                switch (target[0].nodeName.toLowerCase()) {
260                    case 'th':
261                        switch (target[0].className) {
262                            case 'switch':
263                                this.showMode(1);
264                                break;
265                            case 'prev':
266                            case 'next':
267                                this.viewDate['set' + DPGlobal.modes[this.viewMode].navFnc].call(
268                                    this.viewDate,
269                                    this.viewDate['get' + DPGlobal.modes[this.viewMode].navFnc].call(this.viewDate) +
270                                        DPGlobal.modes[this.viewMode].navStep * (target[0].className === 'prev' ? -1 : 1)
271                                );
272                                this.fill();
273                                this.set();
274                                break;
275                        }
276                        break;
277                    case 'span':
278                        if (target.is('.month')) {
279                            var month = target.parent().find('span').index(target);
280                            this.viewDate.setMonth(month);
281                        } else {
282                            var year = parseInt(target.text(), 10) || 0;
283                            this.viewDate.setFullYear(year);
284                        }
285                        if (this.viewMode !== 0) {
286                            this.date = new Date(this.viewDate);
287                            this.element.trigger({
288                                type: 'changeDate',
289                                date: this.date,
290                                viewMode: DPGlobal.modes[this.viewMode].clsName
291                            });
292                        }
293                        this.showMode(-1);
294                        this.fill();
295                        this.set();
296                        break;
297                    case 'td':
298                        if (target.is('.day') && !target.is('.disabled')) {
299                            var day = parseInt(target.text(), 10) || 1;

300                            var month = this.viewDate.getMonth();
301                            if (target.is('.old')) {
302                                month -= 1;
303                            } else if (target.is('.new')) {
304                                month += 1;
305                            }
306                            var year = this.viewDate.getFullYear();
307                            this.date = new Date(year, month, day, 0, 0, 0, 0);
308                            this.viewDate = new Date(year, month, Math.min(28, day), 0, 0, 0, 0);
309                            this.fill();
310                            this.set();
311                            this.element.trigger({
312                                type: 'changeDate',
313                                date: this.date,
314                                viewMode: DPGlobal.modes[this.viewMode].clsName
315                            });
316                        }
317                        break;
318                }
319            }
320        },
321
322        mousedown: function (e) {
323            e.stopPropagation();
324            e.preventDefault();
325        },
326
327        showMode: function (dir) {
328            if (dir) {
329                this.viewMode = Math.max(this.minViewMode, Math.min(2, this.viewMode + dir));
330            }
331            this.picker.find('>div').hide().filter('.datepicker-' + DPGlobal.modes[this.viewMode].clsName).show();
332        }
333    };
334
335    $.fn.datepicker = function (option, val) {
336        return this.each(function () {
337            var $this = $(this),
338                data = $this.data('datepicker'),
339                options = typeof option === 'object' && option;
340            if (!data) {
341                $this.data('datepicker', (data = new Datepicker(this, $.extend({}, $.fn.datepicker.defaults, options))));
342            }
343            if (typeof option === 'string') data[option](val);
344        });
345    };
346
347    $.fn.datepicker.defaults = {
348        onRender: function (date) {
349            return '';
350        }
351    };
352    $.fn.datepicker.Constructor = Datepicker;
353
354    var DPGlobal = {
355        modes: [
356            {
357                clsName: 'days',
358                navFnc: 'Month',
359                navStep: 1
360            },
361            {
362                clsName: 'months',
363                navFnc: 'FullYear',
364                navStep: 1
365            },
366            {
367                clsName: 'years',
368                navFnc: 'FullYear',
369                navStep: 10
370            }
371        ],
372        dates: {
373            days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
374            daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
375            daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
376            months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "

376November", "December"],
377            monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
378        },
379        isLeapYear: function (year) {
380            return (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0))
381        },
382        getDaysInMonth: function (year, month) {
383            return [31, (DPGlobal.isLeapYear(year) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month]
384        },
385        parseFormat: function (format) {
386            var separator = format.match(/[.\/\-\s].*?/),
387                parts = format.split(/\W+/);
388            if (!separator || !parts || parts.length === 0) {
389                throw new Error("Invalid date format.");
390            }
391            return {separator: separator, parts: parts};
392        },
393        parseDate: function (date, format) {
394            var parts = date.split(format.separator),
395                date = new Date(),
396                val;
397            date.setHours(0);
398            date.setMinutes(0);
399            date.setSeconds(0);
400            date.setMilliseconds(0);
401            if (parts.length === format.parts.length) {
402                var year = date.getFullYear(), day = date.getDate(), month = date.getMonth();
403                for (var i = 0, cnt = format.parts.length; i < cnt; i++) {
404                    val = parseInt(parts[i], 10) || 1;
405                    switch (format.parts[i]) {
406                        case 'dd':
407                        case 'd':
408                            day = val;
409                            date.setDate(val);
410                            break;
411                        case 'mm':
412                        case 'm':
413                            month = val - 1;
414                            date.setMonth(val - 1);
415                            break;
416                        case 'yy':
417                            year = 2000 + val;
418                            date.setFullYear(2000 + val);
419                            break;
420                        case 'yyyy':
421                            year = val;
422                            date.setFullYear(val);
423                            break;
424                    }
425                }
426                date = new Date(year, month, day, 0, 0, 0);
427            }
428            return date;
429        },
430        formatDate: function (date, format) {
431            var val = {
432                d: date.getDate(),
433                m: date.getMonth() + 1,
434                yy: date.getFullYear().toString().substring(2),
435                yyyy: date.getFullYear()
436            };
437            val.dd = (val.d < 10 ? '0' : '') + val.d;
438            val.mm = (val.m < 10 ? '0' : '') + val.m;
439            var date = [];
440            for (var i = 0, cnt = format.parts.length; i < cnt; i++) {
441                date.push(val[format.parts[i]]);
442            }
443            return date.join(format.separator);
444        },
445        headTemplate: '<thead>' +
446            '<tr>' +
447            '<th class="prev">&lsaquo;</th>' +
448            '<th colspan="5" class="switch"></th>' +
449            '<th class="next">&rsaquo;</th>' +
450            '</tr>' +
451            '</thead>',
452        contTemplate: '<tbody><tr><td colspan="7"></td></tr></tbody>'
453    };
454    DPGlobal.template = '<div class="datepicker dropdown-menu">' +
455        '<div class="datepicker-days">' +
456        '<table class=" table-condensed">' +
457        DPGlobal.headTemplate +
458        '<tbody></tbody>' +
459        '</table>' +
460        '</div>' +
461        '<div class="datepicker-months">' +
462        '<table class="table-condensed">' +
463        DPGlobal.headTemplate +
464        DPGlobal.contTemplate +
465        '</table>' +
466        '</div>' +
467        '<div class="datepicker-years">' +
468        '<table class="table-condensed">' +
469        DPGlobal.headTemplate +
470        DPGlobal.contTemplate +
471        '</table>' +
472        '</div>' +
473        '</div>';
474
475}(window.jQuery);