@itfin/components 1.2.65 → 1.2.67

package/package.json

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

package/src/components/datepicker/DatePicker.vue

@@ -14,7 +14,7 @@
       @blur="onBlur"
       :value="displayValue"
       :mask="Date"
-      :pattern="displayFormat"
+      :pattern="dateFormat"
       :blocks="blocks"
       :format="format"
       :parse="parse"
@@ -40,7 +40,7 @@
           :value="value"
           :start-view="startView"
           :only-calendar="onlyCalendar"
-          :display-format="displayFormat"
+          :display-format="dateFormat"
           :value-format="valueFormat"
           :min-date="minDate"
           @input="selectInlineDate"
@@ -77,7 +77,7 @@ class itfDatePicker extends Vue {
   @Prop({ type: String }) value;
   @Prop({ type: [Number, String], default: 300 }) delayInput;
   @Prop({ type: String, default: 'ISO' }) valueFormat;
-  @Prop({ type: String, default: ITFSettings.defaultDisplayDateFormat }) displayFormat;
+  @Prop({ type: String }) displayFormat;
   @Prop({ type: String, default: 'days', validator: (value) => ['days', 'months', 'years'].includes(value) }) startView;
   @Prop({ type: Boolean, default: false }) onlyCalendar;
   @Prop({ type: String, default: '' }) placeholder;
@@ -145,15 +145,19 @@ class itfDatePicker extends Vue {
     return DateTime.fromFormat(this.value, this.valueFormat);
   }
 
+  get dateFormat() {
+    return this.displayFormat || ITFSettings.defaultDisplayDateFormat;
+  }
+
   get displayValue() {
     if (!this.valueAsLuxon) {
       return '';
     }
-    return this.valueAsLuxon.toFormat(this.displayFormat);
+    return this.valueAsLuxon.toFormat(this.dateFormat);
   }
 
   updateValue(value, emitEmpty = false) {
-    const val = value && DateTime.fromFormat(value, this.displayFormat, { zone: 'UTC' });
+    const val = value && DateTime.fromFormat(value, this.dateFormat, { zone: 'UTC' });
     if (!val || !val.isValid) {
       if (emitEmpty) {
         this.setValue(null);
@@ -164,11 +168,11 @@ class itfDatePicker extends Vue {
   }
 
   format(date) {
-    return DateTime.fromJSDate(date).toFormat(this.displayFormat);
+    return DateTime.fromJSDate(date).toFormat(this.dateFormat);
   }
 
   parse(str) {
-    return DateTime.fromFormat(str, this.displayFormat).toJSDate();
+    return DateTime.fromFormat(str, this.dateFormat).toJSDate();
   }
 
   onFocus() {

package/src/components/datepicker/DatePickerInline.vue

@@ -21,7 +21,7 @@
   </div>
 </template>
 <script>
-import { Vue, Component, Prop } from 'vue-property-decorator';
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
 import { DateTime } from 'luxon';
 import ITFSettings from '../../ITFSettings';
 
@@ -58,6 +58,7 @@ class itfDatePickerInline extends Vue {
     this.createCalendar();
   }
 
+  @Watch('minDate')
   async createCalendar() {
     if (this.calendar) {
       this.destroyCalendar();

package/src/components/datepicker/DateRangePicker.vue

@@ -16,7 +16,7 @@
         @blur="onBlur($event, 0)"
         :value="displayValue[0]"
         :mask="Date"
-        :pattern="displayFormat"
+        :pattern="dateFormat"
         :blocks="blocks"
         :format="format"
         :parse="parse"
@@ -34,7 +34,7 @@
         @blur="onBlur($event, 1)"
         :value="displayValue[1]"
         :mask="Date"
-        :pattern="displayFormat"
+        :pattern="dateFormat"
         :blocks="blocks"
         :format="format"
         :parse="parse"
@@ -93,7 +93,7 @@ class itfDateRangePicker extends Vue {
 
   @Prop({ default: () => ([]) }) value;
   @Prop({ type: String, default: 'ISO' }) valueFormat;
-  @Prop({ type: String, default: ITFSettings.defaultDisplayDateFormat }) displayFormat;
+  @Prop({ type: String }) displayFormat;
   @Prop({ type: String, default: 'days', validator: (value) => ['days', 'months', 'years'].includes(value) }) startView;
   @Prop({ type: Boolean, default: false }) onlyCalendar;
   @Prop({ type: Boolean, default: false }) clearable;
@@ -124,6 +124,10 @@ class itfDateRangePicker extends Vue {
     },
   };
 
+  get dateFormat() {
+    return this.displayFormat || ITFSettings.defaultDisplayDateFormat;
+  }
+
   isInvalid() {
     return this.itemLabel && this.itemLabel.isHasError();
   }
@@ -170,13 +174,13 @@ class itfDateRangePicker extends Vue {
       return ['', ''];
     }
     return [
-      this.valueAsLuxon[0].toFormat(this.displayFormat),
-      this.valueAsLuxon[1].toFormat(this.displayFormat)
+      this.valueAsLuxon[0].toFormat(this.dateFormat),
+      this.valueAsLuxon[1].toFormat(this.dateFormat)
     ];
   }
 
   updateValue(value, index, emitEmpty = false) {
-    const val = value && DateTime.fromFormat(value, this.displayFormat);
+    const val = value && DateTime.fromFormat(value, this.dateFormat);
     if (!val || !val.isValid) {
       if (emitEmpty) {
         this.$emit('input', []);
@@ -191,11 +195,11 @@ class itfDateRangePicker extends Vue {
   }
 
   format(date) {
-    return DateTime.fromJSDate(date).toFormat(this.displayFormat);
+    return DateTime.fromJSDate(date).toFormat(this.dateFormat);
   }
 
   parse(str) {
-    return DateTime.fromFormat(str, this.displayFormat).toJSDate();
+    return DateTime.fromFormat(str, this.dateFormat).toJSDate();
   }
 
   onFocus() {

package/src/components/datepicker/DateRangePickerInline.vue

@@ -21,7 +21,7 @@
   </div>
 </template>
 <script>
-import { Vue, Component, Prop } from 'vue-property-decorator';
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
 import { DateTime } from 'luxon';
 import ITFSettings from '../../ITFSettings';
 
@@ -57,6 +57,7 @@ class itfDatePickerInline extends Vue {
     this.createCalendar();
   }
 
+  @Watch('minDate')
   async createCalendar() {
     if (this.calendar) {
       this.destroyCalendar();

package/src/components/datepicker/PeriodPicker.vue

@@ -78,6 +78,7 @@ import { DateTime } from 'luxon';
 import tippy from 'tippy.js';
 import itfIcon from '../icon/Icon';
 import itfButton from '../button/Button';
+import ITFSettings from '../../ITFSettings';
 
 export default @Component({
   name: 'itfPeriodPicker',
@@ -96,7 +97,7 @@ class itfPeriodPicker extends Vue {
 
   @Prop({ type: Array }) value;
   @Prop({ type: String, default: 'ISO' }) valueFormat;
-  @Prop({ type: String, default: 'MM/dd/yyyy' }) displayFormat;
+  @Prop({ type: String }) displayFormat;
   @Prop({ type: String, default: 'bottom-start' }) placement;
   @Prop({ type: String, default: 'days', validator: (value) => ['days', 'months', 'years'].includes(value) }) startView;
   @Prop({ type: Boolean, default: false }) onlyCalendar;
@@ -117,6 +118,10 @@ class itfPeriodPicker extends Vue {
     ];
   }
 
+  get dateFormat() {
+    return this.displayFormat || ITFSettings.defaultDisplayDateFormat;
+  }
+
   get nextYear() {
     return this.year + 1;
   }
@@ -179,8 +184,8 @@ class itfPeriodPicker extends Vue {
       return [];
     }
     return [
-      this.valueAsLuxon[0].toFormat(this.displayFormat),
-      this.valueAsLuxon[1].toFormat(this.displayFormat)
+      this.valueAsLuxon[0].toFormat(this.dateFormat),
+      this.valueAsLuxon[1].toFormat(this.dateFormat)
     ];
   }
 

package/src/helpers/formatters.js

@@ -1,4 +1,5 @@
 import { DateTime } from 'luxon';
+import ITFSettings from '../ITFSettings';
 
 export function parseHours (str, { hoursInDay } = { hoursInDay: 8 }) {
   const source = (str || '').toString();
@@ -31,8 +32,8 @@ export function parseHours (str, { hoursInDay } = { hoursInDay: 8 }) {
   return seconds;
 }
 
-export function formatDate (date, inputFormat = 'yyyy-MM-dd', toFormat = 'MM/dd/yyyy') {
-  return DateTime.fromFormat(date, inputFormat).toFormat(toFormat);
+export function formatDate (date, inputFormat = 'yyyy-MM-dd', toFormat) {
+  return DateTime.fromFormat(date, inputFormat).toFormat(toFormat || ITFSettings.defaultDisplayDateFormat);
 }
 
 export function formatRangeDates(begin, end = null) {