From 46dc38e5a533328d546c6059ca1df0ee2b244c1e Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Thu, 11 Apr 2019 14:03:53 +0200
Subject: [PATCH] UX: minor local-dates form improvements (#7360)

---
 .../discourse-local-dates-create-form.js.es6  | 20 +++++++++++++++++++
 .../discourse-local-dates-create-form.hbs     |  4 ++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/plugins/discourse-local-dates/assets/javascripts/discourse/components/discourse-local-dates-create-form.js.es6 b/plugins/discourse-local-dates/assets/javascripts/discourse/components/discourse-local-dates-create-form.js.es6
index fcf9bbe41ee..f2c3c1096c4 100644
--- a/plugins/discourse-local-dates/assets/javascripts/discourse/components/discourse-local-dates-create-form.js.es6
+++ b/plugins/discourse-local-dates/assets/javascripts/discourse/components/discourse-local-dates-create-form.js.es6
@@ -307,6 +307,14 @@ export default Ember.Component.extend({
   },
 
   actions: {
+    setTime(event) {
+      this._setTimeIfValid(event.target.value, "time");
+    },
+
+    setToTime(event) {
+      this._setTimeIfValid(event.target.value, "toTime");
+    },
+
     eraseToDateTime() {
       this.setProperties({ toDate: null, toTime: null });
       this._setPickerDate(null);
@@ -340,6 +348,17 @@ export default Ember.Component.extend({
     }
   },
 
+  _setTimeIfValid(time, key) {
+    if (Ember.isEmpty(time)) {
+      this.set(key, null);
+      return;
+    }
+
+    if (/^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/.test(time)) {
+      this.set(key, time);
+    }
+  },
+
   _setupPicker() {
     return new Ember.RSVP.Promise(resolve => {
       loadScript("/javascripts/pikaday.js").then(() => {
@@ -352,6 +371,7 @@ export default Ember.Component.extend({
           firstDay: 1,
           defaultDate: moment(this.get("date"), this.dateFormat).toDate(),
           setDefaultDate: true,
+          keyboardInput: false,
           i18n: {
             previousMonth: I18n.t("dates.previous_month"),
             nextMonth: I18n.t("dates.next_month"),
diff --git a/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs b/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs
index f18ec6573b1..6344c9c11e5 100644
--- a/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs
+++ b/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs
@@ -54,7 +54,7 @@
         {{#if fromSelected}}
           <div class="time-pickers">
             {{d-icon "far-clock"}}
-            {{input input=(mut time) type="time" value=time class="time-picker"}}
+            {{input maxlength=5 placeholder="hh:mm" input=(action "setTime") type="time" value=(unbound time) class="time-picker"}}
           </div>
         {{/if}}
 
@@ -62,7 +62,7 @@
         {{#if toDate}}
           <div class="time-pickers">
             {{d-icon "far-clock"}}
-            {{input input=(mut toTime) type="time" value=toTime class="time-picker"}}
+            {{input maxlength=5 placeholder="hh:mm" input=(action "setToTime") type="time" value=(unbound toTime) class="time-picker"}}
           </div>
         {{/if}}
         {{/if}}