JAVASCRIPT   23

bootstrap datepicker js

Guest on 21st June 2022 01:56:45 AM

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

Raw Paste


Login or Register to edit or fork this paste. It's free.