DEV: allows time-input to be clearable (#9277)

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

@@ -32,10 +32,14 @@ export default Component.extend({
   didUpdateAttrs() {
     this._super(...arguments);
 
-    if (this._picker && typeof date === "string") {
+    if (this._picker && typeof this.date === "string") {
       const [year, month, day] = this.date.split("-").map(x => parseInt(x, 10));
       this._picker.setDate(new Date(year, month - 1, day), true);
     }
+
+    if (this._picker && !this.date) {
+      this._picker.setDate(null);
+    }
   },
 
   _loadPikadayPicker(container) {

app/assets/javascripts/discourse/components/date-time-input.js

@@ -5,6 +5,7 @@ export default Component.extend({
   classNames: ["d-date-time-input"],
   date: null,
   showTime: true,
+  clearable: false,
 
   _hours: computed("date", function() {
     return this.date && this.showTime ? new Date(this.date).getHours() : null;
@@ -15,6 +16,10 @@ export default Component.extend({
   }),
 
   actions: {
+    onClear() {
+      this.onChange(null);
+    },
+
     onChangeTime(time) {
       if (this.onChange) {
         const date = new Date(this.date);

app/assets/javascripts/discourse/templates/components/date-time-input-range.hbs

@@ -30,5 +30,6 @@
     date=to
     onChange=(action "_onChange" (hash prop="to"))
     showTime=showToTime
+    clearable=true
   }}
 </div>

app/assets/javascripts/discourse/templates/components/date-time-input.hbs

@@ -6,4 +6,8 @@
     minutes=_minutes
     onChange=(action "onChangeTime")
   }}
+
+  {{#if clearable}}
+    {{d-button icon="times" action=(action "onClear")}}
+  {{/if}}
 {{/if}}