update pikaday.js to latest and replace date inputs with pikadays

app/assets/javascripts/admin/templates/email_preview_digest.hbs

@@ -3,7 +3,7 @@
 <div class='admin-controls'>
   <div class='span7 controls'>
     <label for='last-seen'>{{i18n 'admin.email.last_seen_user'}}</label>
-    {{input type="date" value=lastSeen id="last-seen"}}
+    {{date-picker-past value=lastSeen id="last-seen"}}
     <label>{{i18n 'admin.email.user'}}:</label>
     {{user-selector single="true" usernames=username}}
     <button class='btn' {{action "refresh"}}>{{i18n 'admin.email.refresh'}}</button>

app/assets/javascripts/admin/templates/reports.hbs

@@ -1,8 +1,8 @@
 <h3>{{model.title}}</h3>
 
 <div class="admin-reports-filter">
-  {{i18n 'admin.dashboard.reports.start_date'}} {{input type="date" value=startDate}}
+  {{i18n 'admin.dashboard.reports.start_date'}} {{date-picker-past value=startDate}}
-  {{i18n 'admin.dashboard.reports.end_date'}} {{input type="date" value=endDate}}
+  {{i18n 'admin.dashboard.reports.end_date'}} {{date-picker-past value=endDate}}
   {{combo-box valueAttribute="value" content=categoryOptions value=categoryId}}
   {{#if showGroupOptions}}
     {{combo-box valueAttribute="value" content=groupOptions value=groupId}}

app/assets/javascripts/discourse/components/date-picker-future.js.es6

@@ -0,0 +1,12 @@
+import DatePicker from "discourse/components/date-picker";
+
+export default DatePicker.extend({
+  layoutName: "components/date-picker",
+
+  _opts() {
+    return {
+      defaultDate: moment().add(1, "day").toDate(),
+      minDate: new Date(),
+    };
+  }
+});

app/assets/javascripts/discourse/components/date-picker-past.js.es6

@@ -0,0 +1,12 @@
+import DatePicker from "discourse/components/date-picker";
+
+export default DatePicker.extend({
+  layoutName: "components/date-picker",
+
+  _opts() {
+    return {
+      defaultDate: new Date(),
+      maxDate: new Date(),
+    };
+  }
+});

app/assets/javascripts/discourse/components/date-picker.js.es6

@@ -15,8 +15,6 @@ export default Em.Component.extend({
         field: input,
         container: this.$()[0],
         format: "YYYY-MM-DD",
-        defaultDate: moment().add(1, "day").toDate(),
-        minDate: new Date(),
         firstDay: moment.localeData().firstDayOfWeek(),
         i18n: {
           previousMonth: I18n.t('dates.previous_month'),

app/assets/javascripts/discourse/templates/modal/feature-topic.hbs

@@ -39,7 +39,7 @@
         <p class="with-validation">
           {{{pinMessage}}}
           {{fa-icon "clock-o"}}
-          {{date-picker value=model.pinnedInCategoryUntil}}
+          {{date-picker-future value=model.pinnedInCategoryUntil}}
           {{popup-input-tip validation=pinInCategoryValidation shownAt=pinInCategoryTipShownAt}}
         </p>
         <p>

app/assets/stylesheets/common.scss

@@ -1,5 +1,6 @@
 @import "vendor/normalize";
 @import "vendor/font_awesome/font-awesome";
+@import "vendor/pikaday";
 @import "common/foundation/helpers";
 @import "common/foundation/base";
 @import "vendor/select2";
@@ -11,4 +12,3 @@
 @import "common/printer-friendly";
 @import "common/base/*";
 @import "common/d-editor";
-@import "vendor/pikaday";

app/assets/stylesheets/common/admin/admin_base.scss

@@ -38,12 +38,6 @@ $mobile-breakpoint: 700px;
   .filters input { margin-bottom: 0; }
 }
 
-.admin-contents .admin-reports-filter {
-  input[type="date"] {
-    width: 140px;
-  }
-}
-
 td.flaggers td {
   border-bottom: none;
   border-top: none;

app/assets/stylesheets/common/base/topic-admin-menu.scss

@@ -33,15 +33,6 @@
   }
 }
 
-.date-picker-wrapper {
-  display: inline-block;
-  position: relative;
-}
-
-.pika-single {
-  position: absolute !important;
-}
-
 .modal-body.feature-topic {
   padding: 5px;
   max-height: 500px;
@@ -53,11 +44,6 @@
     .badge-wrapper {
       margin-right: 0;
     }
-    .date-picker {
-      text-align: center;
-      width: 80px;
-      margin: 0;
-    }
     .desc {
       display: inline-block;
       vertical-align: middle;

app/assets/stylesheets/common/components/date-picker.css.scss

@@ -0,0 +1,22 @@
+.pika-table {
+  th, td {
+    padding: 0 !important;
+    border-top: none !important;
+    border-bottom: none !important;
+  }
+}
+
+.date-picker-wrapper {
+  display: inline-block;
+  position: relative;
+}
+
+.date-picker {
+  text-align: center;
+  width: 80px;
+  margin: 0;
+}
+
+.pika-single {
+  position: absolute !important;
+}

app/assets/stylesheets/vendor/pikaday.scss

@@ -3,15 +3,43 @@
  * Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/
  */
 
+// Variables
+// Declare any of these variables before importing this SCSS file to easily override defaults
+// Variables are namespaced with the pd (pikaday) prefix
+
+// Colours
+$pd-text-color: #333 !default;
+$pd-title-color: #333 !default;
+$pd-title-bg: #fff !default;
+$pd-picker-bg: #fff !default;
+$pd-picker-border: #ccc !default;
+$pd-picker-border-bottom: #bbb !default;
+$pd-picker-shadow: rgba(0,0,0,.5) !default;
+$pd-th-color: #999 !default;
+$pd-day-color: #666 !default;
+$pd-day-bg: #f5f5f5 !default;
+$pd-day-hover-color: #fff !default;
+$pd-day-hover-bg: #ff8000 !default;
+$pd-day-today-color: #33aaff !default;
+$pd-day-selected-color: #fff !default;
+$pd-day-selected-bg: #33aaff !default;
+$pd-day-selected-shadow: #178fe5 !default;
+$pd-day-disabled-color: #999 !default;
+$pd-week-color: #999 !default;
+
+// Font
+$pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+
+
 .pika-single {
     z-index: 9999;
     display: block;
     position: relative;
-    color: #333;
+    color: $pd-text-color;
-    background: #fff;
+    background: $pd-picker-bg;
-    border: 1px solid #ccc;
+    border: 1px solid $pd-picker-border;
-    border-bottom-color: #bbb;
+    border-bottom-color: $pd-picker-border-bottom;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: $pd-font-family;
 
     &.is-hidden {
         display: none;
@@ -19,7 +47,7 @@
 
     &.is-bound {
         position: absolute;
-        box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
+        box-shadow: 0 5px 15px -5px $pd-picker-shadow;
     }
 }
 
@@ -70,7 +98,8 @@
     font-size: 14px;
     line-height: 20px;
     font-weight: bold;
-    background-color: #fff;
+    color: $pd-title-color;
+    background-color: $pd-title-bg;
 }
 
 .pika-prev,
@@ -86,7 +115,9 @@
     text-indent: 20px; // hide text using text-indent trick, using width value (it's enough)
     white-space: nowrap;
     overflow: hidden;
-    background: transparent no-repeat center center;
+    background-color: transparent;
+    background-position: center center;
+    background-repeat: no-repeat;
     background-size: 75% 75%;
     opacity: .5;
     *position: absolute;
@@ -134,7 +165,7 @@
     }
 
     th {
-        color: #999;
+        color: $pd-th-color;
         font-size: 12px;
         line-height: 25px;
         font-weight: bold;
@@ -157,35 +188,36 @@
     margin: 0;
     width: 100%;
     padding: 5px;
-    color: #666;
+    color: $pd-day-color;
     font-size: 12px;
     line-height: 15px;
     text-align: right;
-    background: #f5f5f5;
+    background: $pd-day-bg;
 
     .is-today & {
-        color: #33aaff;
+        color: $pd-day-today-color;
         font-weight: bold;
     }
 
     .is-selected & {
-        color: #fff;
+        color: $pd-day-selected-color;
         font-weight: bold;
-        background: #33aaff;
+        background: $pd-day-selected-bg;
-        box-shadow: inset 0 1px 3px #178fe5;
+        box-shadow: inset 0 1px 3px $pd-day-selected-shadow;
         border-radius: 3px;
     }
 
-    .is-disabled & {
+    .is-disabled &,
+    .is-outside-current-month & {
         pointer-events: none;
         cursor: default;
-        color: #999;
+        color: $pd-day-disabled-color;
         opacity: .3;
     }
 
     &:hover {
-        color: #fff;
+        color: $pd-day-hover-color;
-        background: #ff8000;
+        background: $pd-day-hover-bg;
         box-shadow: none;
         border-radius: 3px;
     }
@@ -193,7 +225,7 @@
 
 .pika-week {
     font-size: 11px;
-    color: #999;
+    color: $pd-week-color;
 }
 
 .is-inrange .pika-button {

public/javascripts/pikaday.js

@@ -340,7 +340,7 @@
         for (i = 0; i < 7; i++) {
             arr.push('<th scope="col"><abbr title="' + renderDayName(opts, i) + '">' + renderDayName(opts, i, true) + '</abbr></th>');
         }
-        return '<thead>' + (opts.isRTL ? arr.reverse() : arr).join('') + '</thead>';
+        return '<thead><tr>' + (opts.isRTL ? arr.reverse() : arr).join('') + '</tr></thead>';
     },
 
     renderTitle = function(instance, c, year, month, refYear)
@@ -357,8 +357,8 @@
 
         for (arr = [], i = 0; i < 12; i++) {
             arr.push('<option value="' + (year === refYear ? i - c : 12 + i - c) + '"' +
-                (i === month ? ' selected': '') +
+                (i === month ? ' selected="selected"': '') +
-                ((isMinYear && i < opts.minMonth) || (isMaxYear && i > opts.maxMonth) ? 'disabled' : '') + '>' +
+                ((isMinYear && i < opts.minMonth) || (isMaxYear && i > opts.maxMonth) ? 'disabled="disabled"' : '') + '>' +
                 opts.i18n.months[i] + '</option>');
         }
         monthHtml = '<div class="pika-label">' + opts.i18n.months[month] + '<select class="pika-select pika-select-month" tabindex="-1">' + arr.join('') + '</select></div>';
@@ -373,7 +373,7 @@
 
         for (arr = []; i < j && i <= opts.maxYear; i++) {
             if (i >= opts.minYear) {
-                arr.push('<option value="' + i + '"' + (i === year ? ' selected': '') + '>' + (i) + '</option>');
+                arr.push('<option value="' + i + '"' + (i === year ? ' selected="selected"': '') + '>' + (i) + '</option>');
             }
         }
         yearHtml = '<div class="pika-label">' + year + opts.yearSuffix + '<select class="pika-select pika-select-year" tabindex="-1">' + arr.join('') + '</select></div>';
@@ -428,7 +428,7 @@
             }
 
             if (!hasClass(target, 'is-disabled')) {
-                if (hasClass(target, 'pika-button') && !hasClass(target, 'is-empty')) {
+                if (hasClass(target, 'pika-button') && !hasClass(target, 'is-empty') && !hasClass(target.parentNode, 'is-disabled')) {
                     self.setDate(new Date(target.getAttribute('data-pika-year'), target.getAttribute('data-pika-month'), target.getAttribute('data-pika-day')));
                     if (opts.bound) {
                         sto(function() {
@@ -904,10 +904,7 @@
             }
 
             if (typeof this._o.onDraw === 'function') {
-                var self = this;
+                this._o.onDraw(this);
-                sto(function() {
-                    self._o.onDraw.call(self);
-                }, 0);
             }
         },