opnform/resources/js/components/forms/DateInput.vue

197 lines
5.2 KiB
Vue
Raw Normal View History

2022-09-20 19:59:52 +00:00
<template>
2023-11-28 07:47:40 +00:00
<input-wrapper
v-bind="$props"
>
<template #label>
<slot name="label" />
</template>
<div class="flex" v-if="!dateRange">
2023-10-28 10:17:50 +00:00
<input :type="useTime ? 'datetime-local' : 'date'" :id="id?id:name" v-model="fromDate" :class="inputClasses"
:disabled="disabled"
:style="inputStyle" :name="name" data-date-format="YYYY-MM-DD"
:min="setMinDate" :max="setMaxDate"
/>
</div>
<div :class="inputClasses" v-else>
<div class="flex -mx-2">
2023-10-28 10:17:50 +00:00
<p class="text-gray-900 px-4">From</p>
<input :type="useTime ? 'datetime-local' : 'date'" :id="id?id:name" v-model="fromDate" :disabled="disabled"
:style="inputStyle" :name="name" data-date-format="YYYY-MM-DD"
class="flex-grow border-transparent focus:outline-none "
:min="setMinDate" :max="setMaxDate"
/>
<p class="text-gray-900 px-4">To</p>
<input v-if="dateRange" :type="useTime ? 'datetime-local' : 'date'" :id="id?id:name" v-model="toDate"
:disabled="disabled"
:style="inputStyle" :name="name" class="flex-grow border-transparent focus:outline-none"
:min="setMinDate" :max="setMaxDate"
/>
</div>
</div>
2023-11-28 07:47:40 +00:00
<template #help>
<slot name="help" />
</template>
<template #error>
<slot name="error" />
</template>
</input-wrapper>
2022-09-20 19:59:52 +00:00
</template>
<script>
2023-11-28 07:47:40 +00:00
import { inputProps, useFormInput } from './useFormInput.js'
import InputWrapper from './components/InputWrapper.vue'
2023-11-17 10:55:10 +00:00
import {fixedClasses} from '../../plugins/config/vue-tailwind/datePicker.js'
2022-09-20 19:59:52 +00:00
export default {
name: 'DateInput',
2023-11-28 07:47:40 +00:00
components: { InputWrapper },
mixins: [],
2022-09-20 19:59:52 +00:00
props: {
2023-11-28 07:47:40 +00:00
...inputProps,
withTime: {type: Boolean, default: false},
dateRange: {type: Boolean, default: false},
disablePastDates: {type: Boolean, default: false},
disableFutureDates: {type: Boolean, default: false}
2022-09-20 19:59:52 +00:00
},
2023-11-28 07:47:40 +00:00
setup (props, context) {
const {
compVal,
inputStyle,
hasValidation,
hasError
} = useFormInput(props, context)
return {
compVal,
inputStyle,
hasValidation,
hasError
}
},
2022-09-20 19:59:52 +00:00
data: () => ({
2023-11-17 10:55:10 +00:00
fixedClasses: fixedClasses,
fromDate: null,
toDate: null
2022-09-20 19:59:52 +00:00
}),
computed: {
2023-10-28 10:17:50 +00:00
inputClasses() {
let str = 'border border-gray-300 dark:bg-notion-dark-light dark:border-gray-600 dark:placeholder-gray-500 dark:text-gray-300 flex-1 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-opacity-100 placeholder-gray-400 px-4 py-2 rounded-lg shadow-sm text-base text-black text-gray-700'
str += this.dateRange ? ' w-50' : ' w-full'
str += this.disabled ? ' !cursor-not-allowed !bg-gray-200' : ''
return str
},
useTime() {
2022-09-20 19:59:52 +00:00
return this.withTime && !this.dateRange
},
2023-10-28 10:17:50 +00:00
setMinDate() {
if (this.disablePastDates) {
return new Date().toISOString().split('T')[0]
}
return false
},
2023-10-28 10:17:50 +00:00
setMaxDate() {
if (this.disableFutureDates) {
return new Date().toISOString().split('T')[0]
}
return false
2022-09-20 19:59:52 +00:00
}
},
watch: {
color: {
handler() {
2022-09-20 19:59:52 +00:00
this.setInputColor()
},
immediate: true
},
fromDate: {
handler(val) {
2023-10-28 10:17:50 +00:00
if (this.dateRange) {
if (!Array.isArray(this.compVal)) {
this.compVal = [];
}
this.compVal[0] = this.dateToUTC(val)
2023-10-28 10:17:50 +00:00
} else {
this.compVal = this.dateToUTC(val)
}
},
2023-02-07 12:40:46 +00:00
immediate: false
},
toDate: {
handler(val) {
2023-10-28 10:17:50 +00:00
if (this.dateRange) {
if (!Array.isArray(this.compVal)) {
this.compVal = [null];
}
this.compVal[1] = this.dateToUTC(val)
2023-10-28 10:17:50 +00:00
} else {
this.compVal = null
}
},
2023-02-07 12:40:46 +00:00
immediate: false
2022-09-20 19:59:52 +00:00
}
},
mounted() {
2023-10-28 10:17:50 +00:00
if (this.compVal) {
if (Array.isArray(this.compVal)) {
this.fromDate = this.compVal[0] ?? null
this.toDate = this.compVal[1] ?? null
2023-10-28 10:17:50 +00:00
} else {
this.fromDate = this.dateToLocal(this.compVal)
}
}
2023-10-28 10:17:50 +00:00
this.fixedClasses.input = this.theme.default.input
2022-09-20 19:59:52 +00:00
this.setInputColor()
},
methods: {
/**
* Pressing enter won't submit form
* @param event
* @returns {boolean}
*/
onEnterPress(event) {
2022-09-20 19:59:52 +00:00
event.preventDefault()
return false
},
setInputColor() {
2022-09-20 19:59:52 +00:00
if (this.$refs.datepicker) {
const dateInput = this.$refs.datepicker.$el.getElementsByTagName('input')[0]
dateInput.style.setProperty('--tw-ring-color', this.color)
}
},
2023-10-28 10:17:50 +00:00
dateToUTC(val) {
if (!val) {
return null
}
2023-10-28 10:17:50 +00:00
if (!this.useTime) {
return val
}
return new Date(val).toISOString()
},
2023-10-28 10:17:50 +00:00
dateToLocal(val) {
if (!val) {
return null
}
const dateObj = new Date(val)
let dateStr = dateObj.getFullYear() + '-' +
2023-10-28 10:17:50 +00:00
String(dateObj.getMonth() + 1).padStart(2, '0') + '-' +
String(dateObj.getDate()).padStart(2, '0')
if (this.useTime) {
dateStr += 'T' + String(dateObj.getHours()).padStart(2, '0') + ':' +
2023-10-28 10:17:50 +00:00
String(dateObj.getMinutes()).padStart(2, '0');
}
return dateStr
2022-09-20 19:59:52 +00:00
}
}
}
</script>