FEATURE: new date picker component

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

@@ -0,0 +1,30 @@
+/* global Pikaday:true */
+import loadScript from "discourse/lib/load-script";
+
+export default Em.Component.extend({
+  tagName: "input",
+  classNames: ["date-picker"],
+  _picker: null,
+
+  _loadDatePicker: function() {
+    const self = this,
+          input = this.$()[0];
+
+    loadScript("/javascripts/pikaday.js").then(function() {
+      self._picker = new Pikaday({
+        field: input,
+        format: "YYYY-MM-DD",
+        defaultDate: moment().add(1, "day").toDate(),
+        minDate: new Date(),
+        onSelect: function(date) {
+          self.set("value", moment(date).format("YYYY-MM-DD"));
+        },
+      });
+    });
+  }.on("didInsertElement"),
+
+  _destroy: function() {
+    this._picker = null;
+  }.on("willDestroyElement"),
+
+});

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

@@ -35,7 +35,7 @@
         <p>
           {{{pinMessage}}}
           {{fa-icon "clock-o"}}
-          {{input type="date" value=model.pinnedInCategoryUntil}}
+          {{date-picker value=model.pinnedInCategoryUntil}}
         </p>
         <p>
           {{d-button action="pin" icon="thumb-tack" label="topic.feature.pin" class="btn-primary" disabled=pinDisabled}}
@@ -56,7 +56,7 @@
         <p>
           {{i18n "topic.feature_topic.pin_globally"}}
           {{fa-icon "clock-o"}}
-          {{input type="date" value=model.pinnedGloballyUntil}}
+          {{date-picker value=model.pinnedGloballyUntil}}
         </p>
         <p>
           {{d-button action="pinGlobally" icon="thumb-tack" label="topic.feature.pin_globally" class="btn-primary" disabled=pinGloballyDisabled}}

app/assets/stylesheets/common.scss

@@ -10,3 +10,4 @@
 @import "common/topic-entrance";
 @import "common/printer-friendly";
 @import "common/base/*";
+@import "vendor/pikaday";

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

@@ -41,8 +41,9 @@
     .badge-wrapper {
       margin-right: 0;
     }
-    input[type="date"] {
+    .date-picker {
-      width: 120px;
+      text-align: center;
+      width: 80px;
       margin: 0;
     }
     .desc {

app/assets/stylesheets/vendor/pikaday.scss

@@ -0,0 +1,217 @@
+/*!
+ * Pikaday
+ * Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/
+ */
+
+.pika-single {
+    z-index: 9999;
+    display: block;
+    position: relative;
+    color: #333;
+    background: #fff;
+    border: 1px solid #ccc;
+    border-bottom-color: #bbb;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+    &.is-hidden {
+        display: none;
+    }
+
+    &.is-bound {
+        position: absolute;
+        box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
+    }
+}
+
+// clear child float (pika-lendar), using the famous micro clearfix hack
+// http://nicolasgallagher.com/micro-clearfix-hack/
+.pika-single {
+    *zoom: 1;
+
+    &:before,
+    &:after {
+        content: " ";
+        display: table;
+    }
+
+    &:after { clear: both }
+}
+
+.pika-lendar {
+    float: left;
+    width: 240px;
+    margin: 8px;
+}
+
+.pika-title {
+    position: relative;
+    text-align: center;
+
+    select {
+        cursor: pointer;
+        position: absolute;
+        z-index: 9998;
+        margin: 0;
+        left: 0;
+        top: 5px;
+        filter: alpha(opacity=0);
+        opacity: 0;
+    }
+}
+
+.pika-label {
+    display: inline-block;
+    *display: inline;
+    position: relative;
+    z-index: 9999;
+    overflow: hidden;
+    margin: 0;
+    padding: 5px 3px;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: bold;
+    background-color: #fff;
+}
+
+.pika-prev,
+.pika-next {
+    display: block;
+    cursor: pointer;
+    position: relative;
+    outline: none;
+    border: 0;
+    padding: 0;
+    width: 20px;
+    height: 30px;
+    text-indent: 20px; // hide text using text-indent trick, using width value (it's enough)
+    white-space: nowrap;
+    overflow: hidden;
+    background-color: transparent;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: 75% 75%;
+    opacity: .5;
+    *position: absolute;
+    *top: 0;
+
+    &:hover {
+        opacity: 1;
+    }
+
+    &.is-disabled {
+        cursor: default;
+        opacity: .2;
+    }
+}
+
+.pika-prev,
+.is-rtl .pika-next {
+    float: left;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
+    *left: 0;
+}
+
+.pika-next,
+.is-rtl .pika-prev {
+    float: right;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
+    *right: 0;
+}
+
+.pika-select {
+    display: inline-block;
+    *display: inline;
+}
+
+.pika-table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    border: 0;
+
+    th,
+    td {
+        width: 14.285714285714286%;
+        padding: 0;
+    }
+
+    th {
+        color: #999;
+        font-size: 12px;
+        line-height: 25px;
+        font-weight: bold;
+        text-align: center;
+    }
+
+    abbr {
+        border-bottom: none;
+        cursor: help;
+    }
+}
+
+.pika-button {
+    cursor: pointer;
+    display: block;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    outline: none;
+    border: 0;
+    margin: 0;
+    width: 100%;
+    padding: 5px;
+    color: #666;
+    font-size: 12px;
+    line-height: 15px;
+    text-align: right;
+    background: #f5f5f5;
+
+    .is-today & {
+        color: #33aaff;
+        font-weight: bold;
+    }
+
+    .is-selected & {
+        color: #fff;
+        font-weight: bold;
+        background: #33aaff;
+        box-shadow: inset 0 1px 3px #178fe5;
+        border-radius: 3px;
+    }
+
+    .is-disabled & {
+        pointer-events: none;
+        cursor: default;
+        color: #999;
+        opacity: .3;
+    }
+
+    &:hover {
+        color: #fff;
+        background: #ff8000;
+        box-shadow: none;
+        border-radius: 3px;
+    }
+}
+
+.pika-week {
+    font-size: 11px;
+    color: #999;
+}
+
+.is-inrange .pika-button {
+    background: #D5E9F7;
+}
+
+.is-startrange .pika-button {
+    color: #fff;
+    background: #6CB31D;
+    box-shadow: none;
+    border-radius: 3px;
+}
+
+.is-endrange .pika-button {
+    color: #fff;
+    background: #33aaff;
+    box-shadow: none;
+    border-radius: 3px;
+}