107 lines
2.7 KiB
Vue
Executable File
107 lines
2.7 KiB
Vue
Executable File
<template>
|
|
<default-field :field="field" :errors="errors" :show-help-text="showHelpText">
|
|
<template slot="field">
|
|
<div class="flex items-center">
|
|
<date-time-picker
|
|
class="w-full form-control form-input form-input-bordered"
|
|
ref="dateTimePicker"
|
|
:dusk="field.attribute"
|
|
:name="field.name"
|
|
:placeholder="placeholder"
|
|
:dateFormat="pickerFormat"
|
|
:alt-format="pickerDisplayFormat"
|
|
:value="localizedValue"
|
|
:twelve-hour-time="usesTwelveHourTime"
|
|
:first-day-of-week="firstDayOfWeek"
|
|
:class="errorClasses"
|
|
@change="handleChange"
|
|
:disabled="isReadonly"
|
|
/>
|
|
|
|
<a
|
|
v-if="field.nullable"
|
|
@click.prevent="$refs.dateTimePicker.clear()"
|
|
href="#"
|
|
:title="__('Clear value')"
|
|
tabindex="-1"
|
|
class="p-1 px-2 cursor-pointer leading-none focus:outline-none"
|
|
:class="{
|
|
'text-50': !value.length,
|
|
'text-black hover:text-danger': value.length,
|
|
}"
|
|
>
|
|
<icon type="x-circle" width="22" height="22" viewBox="0 0 22 22" />
|
|
</a>
|
|
|
|
<span class="text-80 text-sm ml-2">({{ userTimezone }})</span>
|
|
</div>
|
|
</template>
|
|
</default-field>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
FormField,
|
|
HandlesValidationErrors,
|
|
InteractsWithDates,
|
|
} from 'laravel-nova'
|
|
|
|
export default {
|
|
mixins: [HandlesValidationErrors, FormField, InteractsWithDates],
|
|
|
|
data: () => ({ localizedValue: '' }),
|
|
|
|
methods: {
|
|
/*
|
|
* Set the initial value for the field
|
|
*/
|
|
setInitialValue() {
|
|
// Set the initial value of the field
|
|
this.value = this.field.value || ''
|
|
|
|
// If the field has a value let's convert it from the app's timezone
|
|
// into the user's local time to display in the field
|
|
if (this.value !== '') {
|
|
this.localizedValue = this.fromAppTimezone(this.value)
|
|
}
|
|
},
|
|
|
|
/**
|
|
* On save, populate our form data
|
|
*/
|
|
fill(formData) {
|
|
formData.append(this.field.attribute, this.value || '')
|
|
},
|
|
|
|
/**
|
|
* Update the field's internal value when it's value changes
|
|
*/
|
|
handleChange(value) {
|
|
this.value = this.toAppTimezone(value)
|
|
},
|
|
},
|
|
|
|
computed: {
|
|
firstDayOfWeek() {
|
|
return this.field.firstDayOfWeek || 0
|
|
},
|
|
|
|
format() {
|
|
return this.field.format || 'YYYY-MM-DD HH:mm:ss'
|
|
},
|
|
|
|
placeholder() {
|
|
return this.field.placeholder || moment().format(this.format)
|
|
},
|
|
|
|
pickerFormat() {
|
|
return this.field.pickerFormat || 'Y-m-d H:i:S'
|
|
},
|
|
|
|
pickerDisplayFormat() {
|
|
return this.field.pickerDisplayFormat || 'Y-m-d H:i:S'
|
|
},
|
|
},
|
|
}
|
|
</script>
|