FEATURE: uses native date picker on mobile (#7541)

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

@@ -8,18 +8,31 @@ import {
 export default Ember.Component.extend({
   classNames: ["date-picker-wrapper"],
   _picker: null,
+  value: null,
+
+  @computed("site.mobileView")
+  inputType(mobileView) {
+    return mobileView ? "date" : "text";
+  },
 
   @on("didInsertElement")
   _loadDatePicker() {
-    const input = this.$(".date-picker")[0];
-    const container = $("#" + this.containerId)[0];
+    const container = this.element.querySelector(`#${this.containerId}`);
 
+    if (this.site.mobileView) {
+      this._loadNativePicker(container);
+    } else {
+      this._loadPikadayPicker(container);
+    }
+  },
+
+  _loadPikadayPicker(container) {
     loadScript("/javascripts/pikaday.js").then(() => {
       Ember.run.next(() => {
-        let default_opts = {
-          field: input,
-          container: container || this.$()[0],
-          bound: container === undefined,
+        const default_opts = {
+          field: this.element.querySelector(".date-picker"),
+          container: container || this.element,
+          bound: container === null,
           format: "YYYY-MM-DD",
           firstDay: 1,
           i18n: {
@@ -29,24 +42,39 @@ export default Ember.Component.extend({
             weekdays: moment.weekdays(),
             weekdaysShort: moment.weekdaysShort()
           },
-          onSelect: date => {
-            const formattedDate = moment(date).format("YYYY-MM-DD");
-
-            if (this.attrs.onSelect) {
-              this.attrs.onSelect(formattedDate);
-            }
-
-            if (!this.element || this.isDestroying || this.isDestroyed) return;
-
-            this.set("value", formattedDate);
-          }
+          onSelect: date => this._handleSelection(date)
         };
 
-        this._picker = new Pikaday(_.merge(default_opts, this._opts()));
+        this._picker = new Pikaday(Object.assign(default_opts, this._opts()));
       });
     });
   },
 
+  _loadNativePicker(container) {
+    const wrapper = container || this.element;
+    const picker = wrapper.querySelector("input.date-picker");
+    picker.onchange = () => this._handleSelection(picker.value);
+    picker.hide = () => {
+      /* do nothing for native */
+    };
+    picker.destroy = () => {
+      /* do nothing for native */
+    };
+    this._picker = picker;
+  },
+
+  _handleSelection(value) {
+    const formattedDate = moment(value).format("YYYY-MM-DD");
+
+    if (!this.element || this.isDestroying || this.isDestroyed) return;
+
+    this._picker && this._picker.hide();
+
+    if (this.onSelect) {
+      this.onSelect(formattedDate);
+    }
+  },
+
   @on("willDestroyElement")
   _destroy() {
     if (this._picker) {

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

@@ -3,7 +3,6 @@ import {
   observes
 } from "ember-addons/ember-computed-decorators";
 import { FORMAT } from "select-kit/components/future-date-input-selector";
-
 import { PUBLISH_TO_CATEGORY_STATUS_TYPE } from "discourse/controllers/edit-topic-timer";
 
 export default Ember.Component.extend({
@@ -22,16 +21,16 @@ export default Ember.Component.extend({
   init() {
     this._super(...arguments);
 
-    const input = this.input;
-
-    if (input) {
+    if (this.input) {
       if (this.basedOnLastPost) {
         this.set("selection", "set_based_on_last_post");
       } else {
-        this.set("selection", "pick_date_and_time");
-        const datetime = moment(input);
-        this.set("date", datetime.toDate());
-        this.set("time", datetime.format("HH:mm"));
+        const datetime = moment(this.input);
+        this.setProperties({
+          selection: "pick_date_and_time",
+          date: datetime.format("YYYY-MM-DD"),
+          time: datetime.format("HH:mm")
+        });
         this._updateInput();
       }
     }
@@ -39,9 +38,18 @@ export default Ember.Component.extend({
 
   @observes("date", "time")
   _updateInput() {
-    const date = moment(this.date).format("YYYY-MM-DD");
-    const time = (this.time && ` ${this.time}`) || "";
-    this.set("input", moment(`${date}${time}`).format(FORMAT));
+    if (!this.date) {
+      this.set("time", null);
+    }
+
+    const time = this.time ? ` ${this.time}` : "";
+    const dateTime = moment(`${this.date}${time}`);
+
+    if (dateTime.isValid()) {
+      this.set("input", dateTime.format(FORMAT));
+    } else {
+      this.set("input", null);
+    }
   },
 
   @observes("isBasedOnLastPost")
@@ -72,6 +80,8 @@ export default Ember.Component.extend({
   },
 
   didReceiveAttrs() {
+    this._super(...arguments);
+
     if (this.label) this.set("displayLabel", I18n.t(this.label));
   },
 

app/assets/javascripts/discourse/templates/components/date-picker.hbs

@@ -1 +1,5 @@
-{{input type="text" class="date-picker" placeholder=placeholder value=value}}
+{{input
+  type=inputType
+  class="date-picker"
+  placeholder=placeholder
+  value=value}}

app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss

@@ -13,7 +13,7 @@
   }
   input.date-picker,
   input[type="time"] {
-    width: 150px;
+    width: 200px;
     text-align: left;
   }
   .radios {