Ray's changes for css and js

app/assets/javascripts/lib/bootstrap-datetimepicker.js

@@ -70,7 +70,7 @@
         icon.removeClass(this.timeIcon);
         icon.addClass(this.dateIcon);
       }
-      this.widget = $(getTemplate(this.timeIcon, options.pickDate, options.pickTime, options.pick12HourFormat)).appendTo('body');
+      this.widget = $(getTemplate(this.format, this.timeIcon, options.pickDate, options.pickTime, options.pick12HourFormat)).appendTo('body');
       this.minViewMode = options.minViewMode||this.$element.data('date-minviewmode')||0;
       if (typeof this.minViewMode === 'string') {
         switch (this.minViewMode) {
@@ -113,6 +113,7 @@
     },
 
     show: function(e) {
+      if(!e.currentTarget.value) this.setValue(new Date());
       this.widget.show();
       this.height = this.component ? this.component.outerHeight() : this.$element.outerHeight();
       this.width = this.component ? this.component.outerWidth() : this.$element.outerWidth();
@@ -442,8 +443,18 @@
               case 'prev':
               case 'next':
                 var vd = this.viewDate;
-                var navFnc = DPGlobal.modes[this.viewMode].navFnc;
-                var step = DPGlobal.modes[this.viewMode].navStep;
+                var navFnc;
+                var step;
+                if(this.format == 'yyyy') {
+                  navFnc = YGlobal.modes[this.viewMode].navFnc
+                  step = YGlobal.modes[this.viewMode].navStep
+                } else if(this.format == 'yyyy/MM') {
+                  navFnc = YMGlobal.modes[this.viewMode].navFnc
+                  step = YMGlobal.modes[this.viewMode].navStep
+                } else {
+                  navFnc = DPGlobal.modes[this.viewMode].navFnc
+                  step = DPGlobal.modes[this.viewMode].navStep
+                };
                 if (target[0].className === 'prev') step = step * -1;
                 vd['set' + navFnc](vd['get' + navFnc]() + step);
                 this.fillDate();
@@ -459,18 +470,18 @@
               var year = parseInt(target.text(), 10) || 0;
               this.viewDate.setUTCFullYear(year);
             }
-            if (this.viewMode !== 0) {
-              this._date = UTCDate(
-                this.viewDate.getUTCFullYear(),
-                this.viewDate.getUTCMonth(),
-                this.viewDate.getUTCDate(),
-                this._date.getUTCHours(),
-                this._date.getUTCMinutes(),
-                this._date.getUTCSeconds(),
-                this._date.getUTCMilliseconds()
-              );
-              this.notifyChange();
-            }
+            // if (this.viewMode !== 0) {
+            this._date = UTCDate(
+              this.viewDate.getUTCFullYear(),
+              this.viewDate.getUTCMonth(),
+              this.viewDate.getUTCDate(),
+              this._date.getUTCHours(),
+              this._date.getUTCMinutes(),
+              this._date.getUTCSeconds(),
+              this._date.getUTCMilliseconds()
+            );
+            this.notifyChange();
+            // }
             this.showMode(-1);
             this.fillDate();
             this.set();
@@ -507,7 +518,7 @@
               this.fillDate();
               this.set();
               this.notifyChange();
-              this.widget.hide();
+              // this.widget.hide();
             }
             break;
         }
@@ -703,11 +714,23 @@
 
     showMode: function(dir) {
       if (dir) {
-        this.viewMode = Math.max(this.minViewMode, Math.min(
-          2, this.viewMode + dir));
+        if(this.format == 'yyyy') {
+          this.viewMode = Math.max(this.minViewMode, Math.min(0, this.viewMode + dir));
+        } else if(this.format == 'yyyy/MM') {
+          this.viewMode = Math.max(this.minViewMode, Math.min(1, this.viewMode + dir));
+        } else {
+          this.viewMode = Math.max(this.minViewMode, Math.min(2, this.viewMode + dir));
+        }
       }
-      this.widget.find('.datepicker > div').hide().filter(
-        '.datepicker-'+DPGlobal.modes[this.viewMode].clsName).show();
+      var clsName = null;
+      if(this.format == 'yyyy') {
+        clsName = '.datepicker-'+YGlobal.modes[this.viewMode].clsName
+      } else if(this.format == 'yyyy/MM') {
+        clsName = '.datepicker-'+YMGlobal.modes[this.viewMode].clsName
+      } else {
+        clsName = '.datepicker-'+DPGlobal.modes[this.viewMode].clsName
+      };
+      this.widget.find('.datepicker > div').hide().filter(clsName).show();
     },
 
     destroy: function() {
@@ -832,6 +855,16 @@
         '^\\s*' + components.join('') + '\\s*$');
       this._propertiesByIndex = propertiesByIndex;
     },
+    _getInternetExplorerVersion: function(){
+      var rv = -1; // Return value assumes failure.
+      if (navigator.appName == 'Microsoft Internet Explorer'){
+        var ua = navigator.userAgent;
+        var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
+        if (re.exec(ua) != null)
+          rv = parseFloat( RegExp.$1 );
+      }
+      return rv;
+    },
 
     _attachDatePickerEvents: function() {
       var self = this;
@@ -872,11 +905,18 @@
           });
         }
       } else {
-        this.$element.on({
-          'focus': $.proxy(this.show, this),
-          'blur': $.proxy(this.hide, this),
-          'change': $.proxy(this.change, this),
-        }, 'input');
+        if(this._getInternetExplorerVersion() == -1){
+          this.$element.on({
+            'focus': $.proxy(this.show, this),
+            'blur': $.proxy(this.hide, this),
+            'change': $.proxy(this.change, this),
+          }, 'input');
+        }else{
+          this.$element.on({
+            'blur': $.proxy(this.hide, this),
+            'change': $.proxy(this.change, this),
+          }, 'input');
+        }
         if (this.options.maskInput) {
           this.$element.on({
             'keydown': $.proxy(this.keydown, this),
@@ -1010,7 +1050,7 @@
     else return Array(l - s.length + 1).join(c || ' ') + s;
   }
 
-  function getTemplate(timeIcon, pickDate, pickTime, is12Hours) {
+  function getTemplate(format, timeIcon, pickDate, pickTime, is12Hours) {
     if (pickDate && pickTime) {
       return (
         '<div class="bootstrap-datetimepicker-widget dropdown-menu">' +
@@ -1038,13 +1078,31 @@
         '</div>'
       );
     } else {
-      return (
-        '<div class="bootstrap-datetimepicker-widget dropdown-menu">' +
-          '<div class="datepicker">' +
-            DPGlobal.template +
-          '</div>' +
-        '</div>'
-      );
+      if(format == 'yyyy') {
+        return(
+          '<div class="bootstrap-datetimepicker-widget dropdown-menu">' +
+            '<div class="datepicker">' +
+              YGlobal.template +
+            '</div>' +
+          '</div>'
+        )
+      } else if(format == 'yyyy/MM') {
+        return (
+          '<div class="bootstrap-datetimepicker-widget dropdown-menu">' +
+            '<div class="datepicker">' +
+              YMGlobal.template +
+            '</div>' +
+          '</div>'
+        );
+      } else {
+        return (
+          '<div class="bootstrap-datetimepicker-widget dropdown-menu">' +
+            '<div class="datepicker">' +
+              DPGlobal.template +
+            '</div>' +
+          '</div>'
+        );
+      }
     }
   }
 
@@ -1055,20 +1113,21 @@
   var DPGlobal = {
     modes: [
       {
-      clsName: 'days',
-      navFnc: 'UTCMonth',
-      navStep: 1
-    },
-    {
-      clsName: 'months',
-      navFnc: 'UTCFullYear',
-      navStep: 1
-    },
-    {
-      clsName: 'years',
-      navFnc: 'UTCFullYear',
-      navStep: 10
-    }],
+        clsName: 'days',
+        navFnc: 'UTCMonth',
+        navStep: 1
+      },
+      {
+        clsName: 'months',
+        navFnc: 'UTCFullYear',
+        navStep: 1
+      },
+      {
+        clsName: 'years',
+        navFnc: 'UTCFullYear',
+        navStep: 10
+      }
+    ],
     isLeapYear: function (year) {
       return (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0))
     },
@@ -1085,6 +1144,56 @@
       '</thead>',
     contTemplate: '<tbody><tr><td colspan="7"></td></tr></tbody>'
   };
+  var YMGlobal = {
+    modes: [
+      {
+        clsName: 'months',
+        navFnc: 'UTCFullYear',
+        navStep: 1
+      },
+      {
+        clsName: 'years',
+        navFnc: 'UTCFullYear',
+        navStep: 10
+      }
+    ],
+    isLeapYear: function (year) {
+      return (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0))
+    },
+    getDaysInMonth: function (year, month) {
+      return [31, (YMGlobal.isLeapYear(year) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month]
+    },
+    headTemplate: 
+      '<thead>' +
+        '<tr>' +
+          '<th class="prev">&lsaquo;</th>' +
+          '<th colspan="5" class="switch"></th>' +
+          '<th class="next">&rsaquo;</th>' +
+        '</tr>' +
+      '</thead>',
+    contTemplate: '<tbody><tr><td colspan="7"></td></tr></tbody>'
+  };
+  var YGlobal = {
+    modes: [
+      {
+        clsName: 'years',
+        navFnc: 'UTCFullYear',
+        navStep: 10
+      }
+    ],
+    isLeapYear: function (year) {
+      return (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0))
+    },
+    headTemplate: 
+      '<thead>' +
+        '<tr>' +
+          '<th class="prev">&lsaquo;</th>' +
+          '<th colspan="5" class="switch"></th>' +
+          '<th class="next">&rsaquo;</th>' +
+        '</tr>' +
+      '</thead>',
+    contTemplate: '<tbody><tr><td colspan="7"></td></tr></tbody>'
+  };
   DPGlobal.template =
     '<div class="datepicker-days">' +
       '<table class="table-condensed">' +
@@ -1104,6 +1213,26 @@
         DPGlobal.contTemplate+
       '</table>'+
     '</div>';
+  YMGlobal.template =
+    '<div class="datepicker-months">' +
+      '<table class="table-condensed">' +
+        DPGlobal.headTemplate +
+        DPGlobal.contTemplate+
+      '</table>'+
+    '</div>'+
+    '<div class="datepicker-years">'+
+      '<table class="table-condensed">'+
+        DPGlobal.headTemplate+
+        DPGlobal.contTemplate+
+      '</table>'+
+    '</div>';
+  YGlobal.template =
+    '<div class="datepicker-years">'+
+      '<table class="table-condensed">'+
+        DPGlobal.headTemplate+
+        DPGlobal.contTemplate+
+      '</table>'+
+    '</div>';
   var TPGlobal = {
     hourTemplate: '<span data-action="showHours" data-time-component="hours" class="timepicker-hour"></span>',
     minuteTemplate: '<span data-action="showMinutes" data-time-component="minutes" class="timepicker-minute"></span>',