Merge pull request #1832 from noirbizarre/dgfr#79-clear-temporal-cove…

…rage

Allows to clear dataset form temporal coverage

CHANGELOG.md

@@ -18,6 +18,7 @@
 ### Bugfixes
 
 - Ensure that admin notifications are displayed once and with a constant width. [#1831](https://github.com/opendatateam/udata/pull/1831)
+- Allows to clear the dataset form temporal coverage. [#1832](https://github.com/opendatateam/udata/pull/1832)
 
 ### Internal
 

js/components/form/daterange-picker.vue

@@ -3,26 +3,39 @@
     .dropdown-menu {
         min-width: auto;
     }
+
+    input.form-control {
+        border-right: none;
+
+        &:nth-of-type(2) {  // End date
+            border-left: none;
+        }
+    }
 }
 </style>
 
 <template>
 <div class="input-group dropdown daterange-picker" :class="{ 'open': picking }"
     v-outside="onOutside">
     <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
-    <input type="text" class="input-sm form-control"
+    <input type="text" class="form-control"
         v-el:start-input :placeholder="_('Start')"
         @focus="onFocus" @input="onChange | debounce 500"
         :required="required"
         :value="startValue|dt dateFormat ''"
         :readonly="readonly">
     <span class="input-group-addon">{{ _('to') }}</span>
-    <input type="text" class="input-sm form-control"
+    <input type="text" class="form-control daterange-picker-end"
         v-el:end-input :placeholder="_('End')"
         @focus="onFocus" @input="onChange | debounce 500"
         :required="required"
         :value="endValue|dt dateFormat ''"
         :readonly="readonly">
+    <span class="input-group-btn">
+        <button class="btn btn-danger" type="button" @click.prevent="clear">
+            <span class="fa fa-remove">
+        </button>
+    </span>
     <div class="dropdown-menu" :style="dropdownStyle">
         <calendar v-ref:calendar :selected="currentValue" :min="dateMin" :max="dateMax"></calendar>
     </div>
@@ -126,6 +139,10 @@ export default {
         });
     },
     methods: {
+        clear() {
+            this.startValue = '';
+            this.endValue = '';
+        },
         onFocus(e) {
             if (!this.picking || e.target !== this.pickedField) {
                 this.$nextTick(this.$refs.calendar.focus);