@itfin/components 1.2.74 → 1.2.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.2.74",
+  "version": "1.2.76",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/datepicker/DatePickerInline.vue

@@ -183,7 +183,11 @@ class itfDatePickerInline extends Vue {
 
   @Watch('value')
   onValueChanged() {
-    this.calendar.selectDate(this.valueAsLuxon && this.valueAsLuxon.toJSDate());
+    if (!this.valueAsLuxon) {
+      this.calendar && this.calendar.clear({ silent: true });
+      return;
+    }
+    this.calendar.selectDate(this.valueAsLuxon.toJSDate(), { silent: true });
   }
 }
 </script>

package/src/components/datepicker/DateRangePickerInline.vue

@@ -181,19 +181,20 @@ class itfDatePickerInline extends Vue {
     const lxDate1 = date[0].set({ hours: 0, minutes: 0, seconds: 0 });
     const lxDate2 = date[1].set({ hours: 23, minutes: 59, seconds: 59 });
     this.updateValue(lxDate1.toFormat(this.displayFormat), lxDate2.toFormat(this.displayFormat));
-    this.calendar.selectDate([lxDate1.toJSDate(), lxDate2.toJSDate()]);
+    this.calendar.selectDate([lxDate1.toJSDate(), lxDate2.toJSDate()], { silent: true });
   }
 
   @Watch('value')
   onValueChanged() {
     if (!this.valueAsLuxon) {
+      this.calendar && this.calendar.clear({ silent: true });
       return;
     }
     const date1 = this.calendar.rangeDateFrom && DateTime.fromJSDate(this.calendar.rangeDateFrom).toFormat('yyyy-MM-dd')
     const date2 = this.calendar.rangeDateTo && DateTime.fromJSDate(this.calendar.rangeDateTo).toFormat('yyyy-MM-dd')
     if (date1 !== this.valueAsLuxon[0].toFormat('yyyy-MM-dd') || date2 !== this.valueAsLuxon[1].toFormat('yyyy-MM-dd')) {
       this.$nextTick(() => {
-        this.calendar.selectDate(this.valueAsLuxon && [this.valueAsLuxon[0].toJSDate(), this.valueAsLuxon[1].toJSDate()]);
+        this.calendar.selectDate(this.valueAsLuxon && [this.valueAsLuxon[0].toJSDate(), this.valueAsLuxon[1].toJSDate()], { silent: true });
       });
     }
   }

package/src/components/datepicker/index.stories.js

@@ -61,7 +61,7 @@ storiesOf('Common', module)
         <br />
         <br />
 
-        <itf-date-picker value-format="yyyy-MM-dd" :value="date" min-date="2023-05-01" v-model.lazy="date"></itf-date-picker>
+        <itf-date-picker value-format="yyyy-MM-dd" :value="date"  clearable min-date="2023-05-01" v-model.lazy="date"></itf-date-picker>
 
         <br />
         <br />