文件操作 - AppDatepicker.vue

文件: /var/www/app.ltlcompare.com/components/AppDatepicker.vue

编辑文件内容

const { locale } = useI18n();

const { resetInvalid } = useForm();

interface Props extends VueDatePickerProps {
  title?: string;
  placeholder?: string;
  required?: boolean;
  errorText?: string;
  disabledSelectMinutes?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  autoPosition: () => true,
  autoApply: () => true,
  minDate: () => new Date(),
  format: () => 'MM/dd/yyyy',
  noToday: () => true,
  yearRange: () => {
    const year = new Date().getFullYear();
    return [year, year + 1];
  },
});

const model = defineModel<string | Date>();
</script>

<template>
  <div class="form-block form-block-datepicker">
    <div
      v-if="title"
      class="form-block-title"
    >
      {{ title }}
    </div>
    <div class="input-block">
      <VueDatePicker
        ref="dp"
        v-bind="{ ...props, locale, model }"
        @update:model-value="(value: string | Date) => (model = value)"
      >
        <template #dp-input="{ value }">
          <AppIcon
            name="сalendar"
            class="input-icon"
          ></AppIcon>
          <input
            type="text"
            class="input datepicker-input"
            :value="value"
            @focus="resetInvalid($event.currentTarget as HTMLInputElement)"
            readonly
            :placeholder="placeholder"
            :required="required"
          />
          <AppIcon
            name="сalendar"
            class="datepicker-input-icon"
          ></AppIcon>
        </template>
      </VueDatePicker>
    </div>
    <div
      v-if="required || errorText"
      class="input-error"
    >
      {{ errorText || $t('app.input.error') }}
    </div>
  </div>
</template>

.datepicker-input-icon {
  position: absolute;
  color: #a6a6a6;
  --size: 22px;
  right: 16px;
  top: calc(0.5 * var(--input-height) - 11px);
  z-index: 1;
  pointer-events: none;
}
</style>

文件操作 - AppDatepicker.vue

文件: /var/www/app.ltlcompare.com/components/AppDatepicker.vue

编辑文件内容

修改文件时间

删除文件