web/src/components/JalaliDatePicker.vue

<script setup lang="ts">
import { computed } from 'vue'
import Vue3PersianDatetimePicker from 'vue3-persian-datetime-picker'
import {
  iranDateInputToIso,
  isoToIranDateInput,
  todayIranDateInput,
} from '@/utils/datetime'

const props = withDefaults(
  defineProps<{
    modelValue?: string | null
    /** 'iso' = ISO string for API; 'ymd' = YYYY-MM-DD Gregorian (Iran day) */
    valueType?: 'iso' | 'ymd'
    placeholder?: string
    disabled?: boolean
    clearable?: boolean
    size?: 'large' | 'middle' | 'small'
  }>(),
  {
    modelValue: null,
    valueType: 'iso',
    placeholder: 'انتخاب تاریخ',
    disabled: false,
    clearable: true,
    size: 'large',
  },
)

const emit = defineEmits<{
  'update:modelValue': [value: string | null]
}>()

const pickerValue = computed({
  get() {
    if (!props.modelValue) return ''
    if (props.valueType === 'ymd') return props.modelValue
    return isoToIranDateInput(props.modelValue)
  },
  set(val: string | null | undefined) {
    const raw = (val || '').trim()
    if (!raw) {
      emit('update:modelValue', null)
      return
    }
    if (props.valueType === 'ymd') {
      emit('update:modelValue', raw)
      return
    }
    emit('update:modelValue', iranDateInputToIso(raw))
  },
})

function setToday() {
  const ymd = todayIranDateInput()
  if (props.valueType === 'ymd') {
    emit('update:modelValue', ymd)
  } else {
    emit('update:modelValue', iranDateInputToIso(ymd))
  }
}
</script>

<template>
  <div class="jalali-date-field" :class="[`size-${size}`]">
    <Vue3PersianDatetimePicker
      v-model="pickerValue"
      simple
      :disabled="disabled"
      :clearable="clearable"
      format="YYYY-MM-DD"
      display-format="jYYYY/jMM/jDD"
      :placeholder="placeholder"
      input-class="jalali-date-input"
      class="jalali-picker"
    />
    <button
      v-if="!disabled"
      type="button"
      class="today-btn"
      @click="setToday"
    >
      امروز
    </button>
  </div>
</template>

<style scoped>
.jalali-date-field {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}

.jalali-date-field :deep(.vpd-input-group),
.jalali-date-field :deep(.jalali-picker) {
  flex: 1;
  width: 100%;
}

.jalali-date-field :deep(.jalali-date-input),
.jalali-date-field :deep(input) {
  width: 100%;
  height: 40px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 4px 11px;
  font-family: inherit;
  font-size: 14px;
  direction: ltr;
  text-align: left;
  background: #fff;
}

.size-large :deep(.jalali-date-input),
.size-large :deep(input) {
  height: 48px;
  font-size: 16px;
  border-radius: 10px;
}

.jalali-date-field :deep(input:focus) {
  border-color: #20c997;
  outline: none;
  box-shadow: 0 0 0 2px rgba(32, 201, 151, 0.15);
}

.today-btn {
  appearance: none;
  border: 1px solid #d9d9d9;
  background: #f8fafc;
  border-radius: 10px;
  padding: 0 12px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
}

.today-btn:hover {
  border-color: #20c997;
  color: #0f766e;
}
</style>