Последняя версия с сервера прошлого разработчика

nova/resources/js/components/Form/DateTimeField.vue

@@ -0,0 +1,106 @@
+<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>