fix: allow both v-model & value+change for datepickers

frappe · Jun 12, 2024 · 770ce56 · 770ce56
1 parent 0d4edfb
commit 770ce56
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 27 deletions.
diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
@@ -9,7 +9,7 @@
  type="text"
  icon-left="calendar"
  :placeholder="placeholder"
- :value="modelValue && formatter ? formatter(modelValue) : modelValue"
+ :value="dateValue && formatter ? formatter(dateValue) : dateValue"
  @focus="!readonly ? togglePopover() : null"
  class="w-full"
  :class="inputClass"
@@ -43,7 +43,7 @@
  <TextInput
  class="text-sm"
  type="text"
- :value="modelValue"
+ :value="dateValue"
  @change="
  selectDate(getDate($event.target.value)) || togglePopover()
  "
@@ -80,7 +80,7 @@
  'font-extrabold text-gray-900':
  toValue(date) === toValue(today),
  'bg-gray-800 text-white hover:bg-gray-800':
- toValue(date) === modelValue,
+ toValue(date) === dateValue,
  }"
  @click="
  () => {
@@ -118,8 +118,15 @@ import FeatherIcon from './FeatherIcon.vue'
 import TextInput from './TextInput.vue'
 export default {
  name: 'DatePicker',
- props: ['modelValue', 'placeholder', 'formatter', 'readonly', 'inputClass'],
- emits: ['update:modelValue'],
+ props: [
+ 'value',
+ 'modelValue',
+ 'placeholder',
+ 'formatter',
+ 'readonly',
+ 'inputClass',
+ ],
+ emits: ['update:modelValue', 'change'],
  components: {
  Popover,
  Input,
@@ -185,15 +192,17 @@ export default {
  })
  return `${month}, ${date.getFullYear()}`
  },
+ dateValue() {
+ return this.value ? this.value : this.modelValue
+ },
  },
  methods: {
  selectDate(date) {
+ this.$emit('change', this.toValue(date))
  this.$emit('update:modelValue', this.toValue(date))
  },
  selectCurrentMonthYear() {
- let date = this.modelValue
- ? this.getDate(this.modelValue)
- : this.getDate()
+ let date = this.dateValue ? this.getDate(this.dateValue) : this.getDate()
  if (date === 'Invalid Date') {
  date = this.getDate()
  }

diff --git a/src/components/DateRangePicker.vue b/src/components/DateRangePicker.vue
@@ -9,7 +9,7 @@
  type="text"
  icon-left="calendar"
  :placeholder="placeholder"
- :value="modelValue && formatter ? formatDates(modelValue) : modelValue"
+ :value="dateValue && formatter ? formatDates(dateValue) : dateValue"
  @focus="!readonly ? togglePopover() : null"
  class="w-full"
  :class="inputClass"
@@ -108,7 +108,7 @@ import TextInput from './TextInput.vue'
 export default {
  name: 'DateRangePicker',
  props: ['modelValue', 'placeholder', 'formatter', 'readonly', 'inputClass'],
- emits: ['update:modelValue'],
+ emits: ['update:modelValue', 'change'],
  components: {
  Popover,
  Input,
@@ -117,8 +117,8 @@ export default {
  TextInput,
  },
  data() {
- const fromDate = this.modelValue ? this.modelValue[0] : ''
- const toDate = this.modelValue ? this.modelValue[1] : ''
+ const fromDate = this.dateValue ? this.dateValue[0] : ''
+ const toDate = this.dateValue ? this.dateValue[1] : ''
  return {
  currentYear: null,
  currentMonth: null,
@@ -178,6 +178,9 @@ export default {
  })
  return `${month}, ${date.getFullYear()}`
  },
+ dateValue() {
+ return this.value ? this.value : this.modelValue
+ },
  },
  methods: {
  handleDateClick(date) {
@@ -192,10 +195,12 @@ export default {
  this.swapDatesIfNecessary()
  },
  selectDates() {
+ let val = `${this.fromDate},${this.toDate}`
  if (!this.fromDate && !this.toDate) {
- return this.$emit('update:modelValue', '')
+ val = ''
  }
- this.$emit('update:modelValue', `${this.fromDate},${this.toDate}`)
+ this.$emit('change', val)
+ this.$emit('update:modelValue', val)
  },
  swapDatesIfNecessary() {
  if (!this.fromDate || !this.toDate) {

diff --git a/src/components/DateTimePicker.vue b/src/components/DateTimePicker.vue
@@ -9,7 +9,7 @@
  type="text"
  icon-left="calendar"
  :placeholder="placeholder"
- :value="modelValue && formatter ? formatter(modelValue) : modelValue"
+ :value="dateValue && formatter ? formatter(dateValue) : dateValue"
  @focus="!readonly ? togglePopover() : null"
  class="w-full"
  :class="inputClass"
@@ -43,7 +43,7 @@
  <TextInput
  class="text-sm"
  type="text"
- :value="modelValue"
+ :value="dateValue"
  @change="updateDate($event.target.value) || togglePopover()"
  />
  <Button
@@ -78,7 +78,7 @@
  'font-extrabold text-gray-900':
  toValue(date) === toValue(today),
  'bg-gray-800 text-white hover:bg-gray-800':
- toValue(date) === modelValue,
+ toValue(date) === dateValue,
  }"
  @click="
  () => {
@@ -157,8 +157,15 @@ import FeatherIcon from './FeatherIcon.vue'
 import TextInput from './TextInput.vue'
 export default {
  name: 'DatePicker',
- props: ['modelValue', 'placeholder', 'formatter', 'readonly', 'inputClass'],
- emits: ['update:modelValue'],
+ props: [
+ 'value',
+ 'modelValue',
+ 'placeholder',
+ 'formatter',
+ 'readonly',
+ 'inputClass',
+ ],
+ emits: ['update:modelValue', 'change'],
  components: {
  Popover,
  Input,
@@ -227,30 +234,31 @@ export default {
  })
  return `${month}, ${date.getFullYear()}`
  },
+ dateValue() {
+ return this.value ? this.value : this.modelValue
+ },
  },
  methods: {
  changeTime() {
- let date = this.modelValue
- ? this.getDate(this.modelValue)
- : this.getDate()
+ let date = this.dateValue ? this.getDate(this.dateValue) : this.getDate()
  this.selectDate(date, true)
  },
  selectDate(date, isTimeChange = false, isNow = false) {
  if (!isTimeChange) {
  let currentDate =
- this.modelValue && !isNow
- ? this.getDate(this.modelValue)
+ this.dateValue && !isNow
+ ? this.getDate(this.dateValue)
  : this.getDate()
  this.hour = currentDate.getHours()
  this.minute = currentDate.getMinutes()
  this.second = currentDate.getSeconds()
  }
+
+ this.$emit('change', this.toValue(date))
  this.$emit('update:modelValue', this.toValue(date))
  },
  selectCurrentMonthYear() {
- let date = this.modelValue
- ? this.getDate(this.modelValue)
- : this.getDate()
+ let date = this.dateValue ? this.getDate(this.dateValue) : this.getDate()
  if (date === 'Invalid Date') {
  date = this.getDate()
  }