115 lines
2.7 KiB
Vue
115 lines
2.7 KiB
Vue
<template>
|
|
<DefaultField
|
|
:field="currentField"
|
|
:errors="errors"
|
|
:show-help-text="showHelpText"
|
|
:full-width-content="fullWidthContent"
|
|
>
|
|
<template #field>
|
|
<div class="flex items-center">
|
|
<input
|
|
type="datetime-local"
|
|
class="form-control form-input form-control-bordered"
|
|
ref="dateTimePicker"
|
|
:id="currentField.uniqueKey"
|
|
:dusk="field.attribute"
|
|
:name="field.name"
|
|
:value="formattedDate"
|
|
:class="errorClasses"
|
|
:disabled="currentlyIsReadonly"
|
|
@change="handleChange"
|
|
:min="currentField.min"
|
|
:max="currentField.max"
|
|
:step="currentField.step"
|
|
/>
|
|
|
|
<span class="ml-3">
|
|
{{ timezone }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</DefaultField>
|
|
</template>
|
|
|
|
<script>
|
|
import isNil from 'lodash/isNil'
|
|
import { DateTime } from 'luxon'
|
|
import { DependentFormField, HandlesValidationErrors } from '@/mixins'
|
|
import filled from '@/util/filled'
|
|
|
|
export default {
|
|
mixins: [HandlesValidationErrors, DependentFormField],
|
|
|
|
data: () => ({
|
|
formattedDate: '',
|
|
}),
|
|
|
|
methods: {
|
|
/*
|
|
* Set the initial value for the field
|
|
*/
|
|
setInitialValue() {
|
|
if (!isNil(this.currentField.value)) {
|
|
let isoDate = DateTime.fromISO(this.currentField.value || this.value, {
|
|
zone: Nova.config('timezone'),
|
|
})
|
|
|
|
this.value = isoDate.toString()
|
|
|
|
isoDate = isoDate.setZone(this.timezone)
|
|
|
|
this.formattedDate = [
|
|
isoDate.toISODate(),
|
|
isoDate.toFormat(this.timeFormat),
|
|
].join('T')
|
|
}
|
|
},
|
|
|
|
/**
|
|
* On save, populate our form data
|
|
*/
|
|
fill(formData) {
|
|
this.fillIfVisible(formData, this.fieldAttribute, this.value || '')
|
|
|
|
if (this.currentlyIsVisible && filled(this.value)) {
|
|
let isoDate = DateTime.fromISO(this.value, { zone: this.timezone })
|
|
|
|
this.formattedDate = [
|
|
isoDate.toISODate(),
|
|
isoDate.toFormat(this.timeFormat),
|
|
].join('T')
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Update the field's internal value
|
|
*/
|
|
handleChange(event) {
|
|
let value = event?.target?.value ?? event
|
|
|
|
if (filled(value)) {
|
|
let isoDate = DateTime.fromISO(value, { zone: this.timezone })
|
|
|
|
this.value = isoDate.setZone(Nova.config('timezone')).toString()
|
|
} else {
|
|
this.value = this.fieldDefaultValue()
|
|
}
|
|
|
|
if (this.field) {
|
|
this.emitFieldValueChange(this.fieldAttribute, this.value)
|
|
}
|
|
},
|
|
},
|
|
|
|
computed: {
|
|
timeFormat() {
|
|
return this.currentField.step % 60 === 0 ? 'HH:mm' : 'HH:mm:ss'
|
|
},
|
|
|
|
timezone() {
|
|
return Nova.config('userTimezone') || Nova.config('timezone')
|
|
},
|
|
},
|
|
}
|
|
</script>
|