@datametria/vue-components 2.2.0 → 2.3.0

package/src/components/DatametriaDatePicker.vue

@@ -1,758 +1,382 @@
 <template>
-  <div class="dm-datepicker" ref="datepickerRef">
-    <label v-if="label" :for="inputId" class="dm-datepicker__label">
-      {{ label }}
-      <span v-if="required" class="dm-datepicker__required">*</span>
-    </label>
-    
-    <div class="dm-datepicker__wrapper">
-      <input
-        :id="inputId"
-        v-model="displayValue"
-        type="text"
-        class="dm-datepicker__input"
-        :class="{ 'dm-datepicker__input--error': errorMessage }"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :readonly="readonly"
-        :required="required"
-        :aria-label="label || 'Date picker'"
-        :aria-invalid="!!errorMessage"
-        :aria-describedby="errorMessage ? `${inputId}-error` : undefined"
-        @click="toggleCalendar"
-        @focus="handleFocus"
-        @keydown="handleKeydown"
-      />
-      
-      <button
-        v-if="clearable && hasValue"
-        type="button"
-        class="dm-datepicker__clear"
-        @click="clearDate"
-        aria-label="Clear date"
+  <div class="datametria-datepicker" :class="{ 'datametria-datepicker--disabled': disabled }">
+    <input
+      ref="inputRef"
+      v-model="displayValue"
+      type="text"
+      class="datametria-datepicker__input"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      @focus="handleFocus"
+      @blur="handleBlur"
+    />
+    <Teleport to="body">
+      <div
+        v-if="isOpen"
+        ref="dropdownRef"
+        class="datametria-datepicker__dropdown"
+        :style="dropdownStyle"
       >
-        ×
-      </button>
-    </div>
-
-    <div
-      v-if="isOpen"
-      class="dm-datepicker__calendar"
-      role="dialog"
-      aria-label="Calendar"
-      @click.stop
-    >
-      <div class="dm-datepicker__header">
-        <button
-          type="button"
-          class="dm-datepicker__nav dm-datepicker__nav-prev"
-          @click="previousMonth"
-          aria-label="Previous month"
-        >
-          ‹
-        </button>
-        
-        <button
-          type="button"
-          class="dm-datepicker__month-year"
-          @click="toggleYearPicker"
-          :aria-label="`${currentMonthYear}, click to select year`"
-        >
-          {{ currentMonthYear }}
-        </button>
-        
-        <button
-          type="button"
-          class="dm-datepicker__nav dm-datepicker__nav-next"
-          @click="nextMonth"
-          aria-label="Next month"
-        >
-          ›
-        </button>
-      </div>
-
-      <div v-if="showShortcuts && shortcuts.length > 0" class="dm-datepicker__shortcuts">
-        <button
-          v-for="shortcut in shortcuts"
-          :key="shortcut.label"
-          type="button"
-          class="dm-datepicker__shortcut"
-          @click="applyShortcut(shortcut)"
-        >
-          {{ shortcut.label }}
-        </button>
-      </div>
-
-      <div v-if="showYearPicker" class="dm-datepicker__year-picker">
-        <div
-          v-for="year in availableYears"
-          :key="year"
-          class="dm-datepicker__year-option"
-          :class="{ 'dm-datepicker__year-option--current': year === currentDate.getFullYear() }"
-          @click="selectYear(year)"
-        >
-          {{ year }}
-        </div>
-      </div>
-
-      <div v-else class="dm-datepicker__grid">
-        <div class="dm-datepicker__weekdays">
-          <div
-            v-for="day in weekdays"
-            :key="day"
-            class="dm-datepicker__weekday"
-          >
-            {{ day }}
-          </div>
-        </div>
-        
-        <div class="dm-datepicker__days">
+        <div v-if="shortcuts.length" class="datametria-datepicker__shortcuts">
           <button
-            v-for="day in calendarDays"
-            :key="`${day.date}-${day.month}`"
-            type="button"
-            class="dm-datepicker__day"
-            :class="{
-              'dm-datepicker__day--other-month': day.otherMonth,
-              'dm-datepicker__day--disabled': day.disabled,
-              'dm-datepicker__day--selected': day.selected,
-              'dm-datepicker__day--today': day.today,
-              'dm-datepicker__day--in-range': day.inRange,
-              'dm-datepicker__day--range-start': day.rangeStart,
-              'dm-datepicker__day--range-end': day.rangeEnd
-            }"
-            :data-date="day.dateString"
-            :disabled="day.disabled"
-            :aria-label="getDateAriaLabel(day)"
-            :aria-current="day.today ? 'date' : undefined"
-            @click="selectDate(day)"
+            v-for="shortcut in shortcuts"
+            :key="shortcut.text"
+            class="datametria-datepicker__shortcut"
+            @click="handleShortcut(shortcut)"
           >
-            {{ day.date }}
+            {{ shortcut.text }}
           </button>
         </div>
+        <div class="datametria-datepicker__calendar">
+          <div class="datametria-datepicker__header">
+            <button @click="prevMonth">&lt;</button>
+            <span>{{ monthYear }}</span>
+            <button @click="nextMonth">&gt;</button>
+          </div>
+          <div class="datametria-datepicker__weekdays">
+            <span v-for="day in weekdays" :key="day">{{ day }}</span>
+          </div>
+          <div class="datametria-datepicker__days">
+            <button
+              v-for="day in calendarDays"
+              :key="day.date.getTime()"
+              class="datametria-datepicker__day"
+              :class="{
+                'datametria-datepicker__day--disabled': day.disabled || isDateDisabled(day.date),
+                'datametria-datepicker__day--selected': isSelected(day.date),
+                'datametria-datepicker__day--in-range': isInRange(day.date),
+                'datametria-datepicker__day--other-month': day.otherMonth
+              }"
+              :disabled="day.disabled || isDateDisabled(day.date)"
+              @click="selectDate(day.date)"
+            >
+              {{ day.date.getDate() }}
+            </button>
+          </div>
+        </div>
       </div>
-
-      <div v-if="showToday" class="dm-datepicker__footer">
-        <button
-          type="button"
-          class="dm-datepicker__today"
-          @click="selectToday"
-        >
-          Today
-        </button>
-      </div>
-    </div>
-
-    <div v-if="errorMessage" :id="`${inputId}-error`" class="dm-datepicker__error">
-      {{ errorMessage }}
-    </div>
+    </Teleport>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-
-type DateValue = string | { start: string; end: string } | string[]
+import { ref, computed, watch } from 'vue'
 
 interface Shortcut {
-  label: string
-  value: string | { start: string; end: string } | string[]
+  text: string
+  value: Date | [Date, Date]
 }
 
 interface Props {
-  modelValue?: DateValue
-  mode?: 'single' | 'range' | 'multiple'
+  modelValue?: Date | [Date, Date] | null
+  type?: 'date' | 'datetime' | 'range'
   format?: string
   placeholder?: string
-  label?: string
-  errorMessage?: string
   disabled?: boolean
   readonly?: boolean
-  required?: boolean
-  min?: string
-  max?: string
-  disabledDates?: string[]
-  disabledWeekdays?: number[]
-  enabledDates?: string[]
-  showToday?: boolean
-  clearable?: boolean
-  closeOnSelect?: boolean
-  showShortcuts?: boolean
+  disabledDate?: (date: Date) => boolean
   shortcuts?: Shortcut[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  mode: 'single',
+  modelValue: null,
+  type: 'date',
   format: 'DD/MM/YYYY',
-  placeholder: 'Select date...',
-  showToday: false,
-  clearable: false,
-  closeOnSelect: true,
-  showShortcuts: false,
-  shortcuts: () => [
-    { label: 'Today', value: new Date().toISOString().split('T')[0] },
-    { label: 'Tomorrow', value: new Date(Date.now() + 86400000).toISOString().split('T')[0] },
-    { label: 'Next Week', value: new Date(Date.now() + 7 * 86400000).toISOString().split('T')[0] }
-  ]
+  placeholder: 'Selecione uma data',
+  disabled: false,
+  readonly: false,
+  shortcuts: () => []
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: DateValue]
-  open: []
-  close: []
-  clear: []
+  'update:modelValue': [value: Date | [Date, Date] | null]
+  change: [value: Date | [Date, Date] | null]
 }>()
 
-const datepickerRef = ref<HTMLElement>()
+const inputRef = ref<HTMLInputElement>()
+const dropdownRef = ref<HTMLDivElement>()
 const isOpen = ref(false)
-const showYearPicker = ref(false)
-const currentDate = ref(new Date())
-const isMobile = ref(false)
-
-const inputId = computed(() => `datepicker-${Math.random().toString(36).substr(2, 9)}`)
-const weekdays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
-
-const hasValue = computed(() => {
-  if (props.mode === 'single') return !!props.modelValue
-  if (props.mode === 'range') return !!(props.modelValue as any)?.start && !!(props.modelValue as any)?.end
-  if (props.mode === 'multiple') return Array.isArray(props.modelValue) && props.modelValue.length > 0
-  return false
-})
+const currentMonth = ref(new Date())
+const rangeStart = ref<Date | null>(null)
 
-const displayValue = computed(() => {
-  if (!props.modelValue) return ''
-  
-  if (props.mode === 'single') {
-    const date = new Date(props.modelValue as string)
-    return formatDate(date, props.format)
-  }
-  
-  if (props.mode === 'range') {
-    const range = props.modelValue as { start: string; end: string }
-    if (!range.start || !range.end) return ''
-    const startDate = formatDate(new Date(range.start), props.format)
-    const endDate = formatDate(new Date(range.end), props.format)
-    return `${startDate} - ${endDate}`
-  }
-  
-  if (props.mode === 'multiple') {
-    const dates = props.modelValue as string[]
-    if (dates.length === 0) return ''
-    if (dates.length === 1) return formatDate(new Date(dates[0]), props.format)
-    return `${dates.length} dates selected`
-  }
-  
-  return ''
-})
+const weekdays = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb']
 
-const currentMonthYear = computed(() => {
-  const month = currentDate.value.toLocaleString('default', { month: 'long' })
-  const year = currentDate.value.getFullYear()
-  return `${month} ${year}`
+const monthYear = computed(() => {
+  const months = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
+    'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro']
+  return `${months[currentMonth.value.getMonth()]} ${currentMonth.value.getFullYear()}`
 })
 
-const availableYears = computed(() => {
-  const currentYear = new Date().getFullYear()
-  const years = []
-  for (let i = currentYear - 50; i <= currentYear + 10; i++) {
-    years.push(i)
+const displayValue = computed(() => {
+  if (!props.modelValue) return ''
+  if (props.type === 'range' && Array.isArray(props.modelValue)) {
+    return `${formatDate(props.modelValue[0])} - ${formatDate(props.modelValue[1])}`
   }
-  return years
+  return formatDate(props.modelValue as Date)
 })
 
 const calendarDays = computed(() => {
-  const year = currentDate.value.getFullYear()
-  const month = currentDate.value.getMonth()
-  
+  const year = currentMonth.value.getFullYear()
+  const month = currentMonth.value.getMonth()
   const firstDay = new Date(year, month, 1)
-  const startDate = new Date(firstDay)
-  startDate.setDate(startDate.getDate() - firstDay.getDay())
+  const lastDay = new Date(year, month + 1, 0)
+  const prevLastDay = new Date(year, month, 0)
+  
+  const days: Array<{ date: Date; disabled: boolean; otherMonth: boolean }> = []
+  
+  // Previous month days
+  const firstDayOfWeek = firstDay.getDay()
+  for (let i = firstDayOfWeek - 1; i >= 0; i--) {
+    const date = new Date(year, month, -i)
+    days.push({ date, disabled: false, otherMonth: true })
+  }
   
-  const days = []
-  const today = new Date()
+  // Current month days
+  for (let i = 1; i <= lastDay.getDate(); i++) {
+    const date = new Date(year, month, i)
+    days.push({ date, disabled: false, otherMonth: false })
+  }
   
-  for (let i = 0; i < 42; i++) {
-    const date = new Date(startDate)
-    date.setDate(startDate.getDate() + i)
-    
-    const dateString = date.toISOString().split('T')[0]
-    const isOtherMonth = date.getMonth() !== month
-    const isDisabled = isDateDisabled(date)
-    const isSelected = isDateSelected(dateString)
-    const isToday = isSameDate(date, today)
-    
-    days.push({
-      date: date.getDate(),
-      month: date.getMonth(),
-      year: date.getFullYear(),
-      dateString,
-      otherMonth: isOtherMonth,
-      disabled: isDisabled,
-      selected: isSelected,
-      today: isToday,
-      inRange: false,
-      rangeStart: false,
-      rangeEnd: false
-    })
+  // Next month days
+  const remainingDays = 42 - days.length
+  for (let i = 1; i <= remainingDays; i++) {
+    const date = new Date(year, month + 1, i)
+    days.push({ date, disabled: false, otherMonth: true })
   }
   
   return days
 })
 
-const formatDate = (date: Date, format: string): string => {
-  const day = date.getDate().toString().padStart(2, '0')
-  const month = (date.getMonth() + 1).toString().padStart(2, '0')
-  const year = date.getFullYear().toString()
-  
-  return format
-    .replace('DD', day)
-    .replace('MM', month)
-    .replace('YYYY', year)
-}
+const dropdownStyle = computed(() => {
+  if (!inputRef.value) return {}
+  const rect = inputRef.value.getBoundingClientRect()
+  return {
+    position: 'fixed',
+    top: `${rect.bottom + 4}px`,
+    left: `${rect.left}px`,
+    zIndex: 9999
+  }
+})
 
-const isSameDate = (date1: Date, date2: Date): boolean => {
-  return date1.getFullYear() === date2.getFullYear() &&
-         date1.getMonth() === date2.getMonth() &&
-         date1.getDate() === date2.getDate()
+const formatDate = (date: Date): string => {
+  const day = String(date.getDate()).padStart(2, '0')
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const year = date.getFullYear()
+  return `${day}/${month}/${year}`
 }
 
 const isDateDisabled = (date: Date): boolean => {
-  const dateString = date.toISOString().split('T')[0]
-  
-  if (props.min && date < new Date(props.min)) return true
-  if (props.max && date > new Date(props.max)) return true
-  if (props.disabledDates?.includes(dateString)) return true
-  if (props.disabledWeekdays?.includes(date.getDay())) return true
-  if (props.enabledDates && !props.enabledDates.includes(dateString)) return true
-  
-  return false
+  return props.disabledDate ? props.disabledDate(date) : false
 }
 
-const isDateSelected = (dateString: string): boolean => {
-  if (props.mode === 'single') {
-    return props.modelValue === dateString
-  }
-  
-  if (props.mode === 'range') {
-    const range = props.modelValue as { start: string; end: string }
-    return range?.start === dateString || range?.end === dateString
-  }
-  
-  if (props.mode === 'multiple') {
-    const dates = props.modelValue as string[]
-    return dates?.includes(dateString) || false
+const isSelected = (date: Date): boolean => {
+  if (!props.modelValue) return false
+  if (props.type === 'range' && Array.isArray(props.modelValue)) {
+    return isSameDay(date, props.modelValue[0]) || isSameDay(date, props.modelValue[1])
   }
-  
-  return false
+  return isSameDay(date, props.modelValue as Date)
 }
 
-const getDateAriaLabel = (day: any): string => {
-  const date = new Date(day.year, day.month, day.date)
-  const dateString = date.toLocaleDateString('en-US', { 
-    weekday: 'long', 
-    year: 'numeric', 
-    month: 'long', 
-    day: 'numeric' 
-  })
-  
-  let label = dateString
-  if (day.today) label += ', today'
-  if (day.selected) label += ', selected'
-  if (day.disabled) label += ', disabled'
-  
-  return label
+const isInRange = (date: Date): boolean => {
+  if (props.type !== 'range' || !Array.isArray(props.modelValue)) return false
+  const [start, end] = props.modelValue
+  return date > start && date < end
 }
 
-const toggleCalendar = () => {
-  if (!props.disabled && !props.readonly) {
-    isOpen.value = !isOpen.value
-    if (isOpen.value) {
-      emit('open')
+const isSameDay = (date1: Date, date2: Date): boolean => {
+  return date1.getDate() === date2.getDate() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getFullYear() === date2.getFullYear()
+}
+
+const selectDate = (date: Date) => {
+  if (props.type === 'range') {
+    if (!rangeStart.value) {
+      rangeStart.value = date
     } else {
-      emit('close')
+      const start = rangeStart.value < date ? rangeStart.value : date
+      const end = rangeStart.value < date ? date : rangeStart.value
+      emit('update:modelValue', [start, end])
+      emit('change', [start, end])
+      rangeStart.value = null
+      isOpen.value = false
     }
+  } else {
+    emit('update:modelValue', date)
+    emit('change', date)
+    isOpen.value = false
   }
 }
 
 const handleFocus = () => {
   if (!props.disabled && !props.readonly) {
     isOpen.value = true
-    emit('open')
-  }
-}
-
-const handleKeydown = (event: KeyboardEvent) => {
-  if (event.key === 'Enter' || event.key === ' ') {
-    event.preventDefault()
-    toggleCalendar()
-  } else if (event.key === 'Escape') {
-    isOpen.value = false
-    emit('close')
   }
 }
 
-const previousMonth = () => {
-  currentDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() - 1, 1)
-}
-
-const nextMonth = () => {
-  currentDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() + 1, 1)
-}
-
-const toggleYearPicker = () => {
-  showYearPicker.value = !showYearPicker.value
-}
-
-const selectYear = (year: number) => {
-  currentDate.value = new Date(year, currentDate.value.getMonth(), 1)
-  showYearPicker.value = false
-}
-
-const selectDate = (day: any) => {
-  if (day.disabled) return
-  
-  const dateString = day.dateString
-  
-  if (props.mode === 'single') {
-    emit('update:modelValue', dateString)
-    if (props.closeOnSelect) {
+const handleBlur = (event: FocusEvent) => {
+  setTimeout(() => {
+    if (!dropdownRef.value?.contains(event.relatedTarget as Node)) {
       isOpen.value = false
-      emit('close')
-    }
-  }
-  
-  if (props.mode === 'range') {
-    const currentRange = (props.modelValue as { start: string; end: string }) || { start: '', end: '' }
-    
-    if (!currentRange.start || (currentRange.start && currentRange.end)) {
-      emit('update:modelValue', { start: dateString, end: '' })
-    } else {
-      const start = new Date(currentRange.start)
-      const selected = new Date(dateString)
-      
-      if (selected < start) {
-        emit('update:modelValue', { start: dateString, end: currentRange.start })
-      } else {
-        emit('update:modelValue', { start: currentRange.start, end: dateString })
-      }
-      
-      if (props.closeOnSelect) {
-        isOpen.value = false
-        emit('close')
-      }
-    }
-  }
-  
-  if (props.mode === 'multiple') {
-    const currentDates = (props.modelValue as string[]) || []
-    const index = currentDates.indexOf(dateString)
-    
-    if (index >= 0) {
-      const newDates = [...currentDates]
-      newDates.splice(index, 1)
-      emit('update:modelValue', newDates)
-    } else {
-      emit('update:modelValue', [...currentDates, dateString])
     }
-  }
+  }, 200)
 }
 
-const selectToday = () => {
-  const today = new Date().toISOString().split('T')[0]
-  
-  if (props.mode === 'single') {
-    emit('update:modelValue', today)
-  } else if (props.mode === 'range') {
-    emit('update:modelValue', { start: today, end: today })
-  } else if (props.mode === 'multiple') {
-    const currentDates = (props.modelValue as string[]) || []
-    if (!currentDates.includes(today)) {
-      emit('update:modelValue', [...currentDates, today])
-    }
-  }
-  
+const handleShortcut = (shortcut: Shortcut) => {
+  emit('update:modelValue', shortcut.value)
+  emit('change', shortcut.value)
   isOpen.value = false
-  emit('close')
 }
 
-const applyShortcut = (shortcut: Shortcut) => {
-  emit('update:modelValue', shortcut.value as DateValue)
-  isOpen.value = false
-  emit('close')
+const prevMonth = () => {
+  currentMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() - 1)
 }
 
-const clearDate = () => {
-  if (props.mode === 'single') {
-    emit('update:modelValue', '')
-  } else if (props.mode === 'range') {
-    emit('update:modelValue', { start: '', end: '' })
-  } else if (props.mode === 'multiple') {
-    emit('update:modelValue', [])
-  }
-  emit('clear')
+const nextMonth = () => {
+  currentMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() + 1)
 }
 
-const handleClickOutside = (event: Event) => {
-  if (datepickerRef.value && !datepickerRef.value.contains(event.target as Node)) {
-    isOpen.value = false
-    showYearPicker.value = false
-    emit('close')
+watch(() => props.modelValue, (newValue) => {
+  if (newValue && !Array.isArray(newValue)) {
+    currentMonth.value = new Date(newValue)
   }
-}
-
-const checkMobile = () => {
-  isMobile.value = window.innerWidth <= 640
-}
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-  window.addEventListener('resize', checkMobile)
-  checkMobile()
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-  window.removeEventListener('resize', checkMobile)
 })
 </script>
 
 <style scoped>
-.dm-datepicker {
+.datametria-datepicker {
   position: relative;
+  display: inline-block;
   width: 100%;
 }
 
-.dm-datepicker__label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  color: var(--dm-neutral-700, #374151);
-}
-
-.dm-datepicker__required {
-  color: var(--dm-error, #ef4444);
-}
-
-.dm-datepicker__wrapper {
-  position: relative;
-}
-
-.dm-datepicker__input {
+.datametria-datepicker__input {
   width: 100%;
-  padding: 0.75rem;
-  border: 1px solid var(--dm-neutral-300, #d1d5db);
-  border-radius: var(--dm-radius-md, 0.375rem);
-  font-size: 1rem;
+  padding: 8px 12px;
+  border: 1px solid var(--datametria-border-color, #dcdfe6);
+  border-radius: 4px;
+  font-size: 14px;
+  color: var(--datametria-text-color, #303133);
+  background-color: var(--datametria-bg-color, #ffffff);
   cursor: pointer;
   transition: border-color 0.2s;
 }
 
-.dm-datepicker__input:focus {
-  outline: none;
-  border-color: var(--dm-primary, #0072ce);
-  box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.1);
+.datametria-datepicker__input:hover {
+  border-color: var(--datametria-border-color-hover, #c0c4cc);
 }
 
-.dm-datepicker__input--error {
-  border-color: var(--dm-error, #ef4444);
+.datametria-datepicker__input:focus {
+  outline: none;
+  border-color: var(--datametria-primary-color, #0072ce);
 }
 
-.dm-datepicker__clear {
-  position: absolute;
-  right: 0.75rem;
-  top: 50%;
-  transform: translateY(-50%);
-  background: none;
-  border: none;
-  font-size: 1.25rem;
-  cursor: pointer;
-  color: var(--dm-neutral-500, #6b7280);
-}
-
-.dm-datepicker__calendar {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 1000;
-  background: white;
-  border: 1px solid var(--dm-neutral-300, #d1d5db);
-  border-radius: var(--dm-radius-md, 0.375rem);
-  box-shadow: var(--dm-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
-  padding: 1rem;
-  min-width: 280px;
+.datametria-datepicker--disabled .datametria-datepicker__input {
+  background-color: var(--datametria-disabled-bg-color, #f5f7fa);
+  cursor: not-allowed;
 }
 
-@media (max-width: 640px) {
-  .dm-datepicker__calendar {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 90vw;
-    max-width: 320px;
-  }
+.datametria-datepicker__dropdown {
+  display: flex;
+  background: var(--datametria-bg-color, #ffffff);
+  border: 1px solid var(--datametria-border-color, #dcdfe6);
+  border-radius: 4px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  padding: 12px;
 }
 
-.dm-datepicker__header {
+.datametria-datepicker__shortcuts {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1rem;
+  flex-direction: column;
+  gap: 4px;
+  padding-right: 12px;
+  border-right: 1px solid var(--datametria-border-color, #dcdfe6);
+  margin-right: 12px;
 }
 
-.dm-datepicker__nav {
-  background: none;
+.datametria-datepicker__shortcut {
+  padding: 8px 12px;
   border: none;
-  font-size: 1.25rem;
+  background: none;
   cursor: pointer;
-  padding: 0.25rem;
-  border-radius: var(--dm-radius-sm, 0.25rem);
+  text-align: left;
+  white-space: nowrap;
+  color: var(--datametria-text-color, #303133);
+  border-radius: 4px;
   transition: background-color 0.2s;
 }
 
-.dm-datepicker__nav:hover {
-  background-color: var(--dm-neutral-100, #f3f4f6);
-}
-
-.dm-datepicker__month-year {
-  background: none;
-  border: none;
-  font-weight: 600;
-  cursor: pointer;
-  padding: 0.5rem;
-  border-radius: var(--dm-radius-sm, 0.25rem);
-  transition: background-color 0.2s;
+.datametria-datepicker__shortcut:hover {
+  background-color: var(--datametria-hover-bg-color, #f5f7fa);
 }
 
-.dm-datepicker__month-year:hover {
-  background-color: var(--dm-neutral-100, #f3f4f6);
+.datametria-datepicker__calendar {
+  min-width: 280px;
 }
 
-.dm-datepicker__shortcuts {
+.datametria-datepicker__header {
   display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
 }
 
-.dm-datepicker__shortcut {
+.datametria-datepicker__header button {
+  padding: 4px 8px;
+  border: none;
   background: none;
-  border: 1px solid var(--dm-neutral-300, #d1d5db);
-  padding: 0.25rem 0.5rem;
-  border-radius: var(--dm-radius-sm, 0.25rem);
-  cursor: pointer;
-  font-size: 0.875rem;
-  transition: all 0.2s;
-}
-
-.dm-datepicker__shortcut:hover {
-  background-color: var(--dm-neutral-100, #f3f4f6);
-}
-
-.dm-datepicker__year-picker {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 0.5rem;
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-.dm-datepicker__year-option {
-  padding: 0.5rem;
-  text-align: center;
   cursor: pointer;
-  border-radius: var(--dm-radius-sm, 0.25rem);
-  transition: background-color 0.2s;
-}
-
-.dm-datepicker__year-option:hover {
-  background-color: var(--dm-neutral-100, #f3f4f6);
+  font-size: 16px;
+  color: var(--datametria-text-color, #303133);
 }
 
-.dm-datepicker__year-option--current {
-  background-color: var(--dm-primary, #0072ce);
-  color: white;
-}
-
-.dm-datepicker__weekdays {
+.datametria-datepicker__weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  gap: 0.25rem;
-  margin-bottom: 0.5rem;
-}
-
-.dm-datepicker__weekday {
-  padding: 0.5rem;
+  gap: 4px;
+  margin-bottom: 8px;
   text-align: center;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--dm-neutral-600, #4b5563);
+  font-size: 12px;
+  color: var(--datametria-info-color, #909399);
 }
 
-.dm-datepicker__days {
+.datametria-datepicker__days {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  gap: 0.25rem;
+  gap: 4px;
 }
 
-.dm-datepicker__day {
-  padding: 0.5rem;
-  text-align: center;
-  cursor: pointer;
+.datametria-datepicker__day {
+  padding: 8px;
   border: none;
   background: none;
-  border-radius: var(--dm-radius-sm, 0.25rem);
-  transition: background-color 0.2s;
-}
-
-.dm-datepicker__day:hover:not(.dm-datepicker__day--disabled) {
-  background-color: var(--dm-neutral-100, #f3f4f6);
-}
-
-.dm-datepicker__day--other-month {
-  color: var(--dm-neutral-400, #9ca3af);
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 14px;
+  color: var(--datametria-text-color, #303133);
+  transition: all 0.2s;
 }
 
-.dm-datepicker__day--disabled {
-  color: var(--dm-neutral-300, #d1d5db);
-  cursor: not-allowed;
+.datametria-datepicker__day:hover:not(:disabled) {
+  background-color: var(--datametria-hover-bg-color, #f5f7fa);
 }
 
-.dm-datepicker__day--selected {
-  background-color: var(--dm-primary, #0072ce);
+.datametria-datepicker__day--selected {
+  background-color: var(--datametria-primary-color, #0072ce);
   color: white;
 }
 
-.dm-datepicker__day--today {
-  font-weight: 600;
-  color: var(--dm-primary, #0072ce);
+.datametria-datepicker__day--in-range {
+  background-color: var(--datametria-primary-light-color, #ecf5ff);
 }
 
-.dm-datepicker__footer {
-  margin-top: 1rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--dm-neutral-200, #e5e7eb);
-  text-align: center;
-}
-
-.dm-datepicker__today {
-  background: none;
-  border: 1px solid var(--dm-primary, #0072ce);
-  color: var(--dm-primary, #0072ce);
-  padding: 0.5rem 1rem;
-  border-radius: var(--dm-radius-sm, 0.25rem);
-  cursor: pointer;
-  transition: all 0.2s;
+.datametria-datepicker__day--other-month {
+  color: var(--datametria-disabled-text-color, #c0c4cc);
 }
 
-.dm-datepicker__today:hover {
-  background-color: var(--dm-primary, #0072ce);
-  color: white;
-}
-
-.dm-datepicker__error {
-  margin-top: 0.25rem;
-  color: var(--dm-error, #ef4444);
-  font-size: 0.875rem;
+.datametria-datepicker__day--disabled {
+  color: var(--datametria-disabled-text-color, #c0c4cc);
+  cursor: not-allowed;
 }
-</style>
+</style>