UX: minor local-dates form improvements (#7360)

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"),

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}}