统一预订事项日期选择控件

2026-07-22 09:39:31 +07:00
parent fb980c6814
commit 434afeb7c5
8 changed files with 315 additions and 271 deletions
--- a/client/src/utils/localizedDatePicker.ts
+++ b/client/src/utils/localizedDatePicker.ts
@@ -0,0 +1,130 @@
+import type { PrimeVueLocaleOptions } from 'primevue/config'
+
+export type SupportedDatePickerLocale = 'zh-CN' | 'en-US' | 'th-TH'
+
+export type LocalizedDatePickerLocaleOptions = Pick<
+  PrimeVueLocaleOptions,
+  'fileSizeTypes' | 'dayNames' | 'dayNamesShort' | 'dayNamesMin' | 'monthNames' | 'monthNamesShort'
+> &
+  Partial<PrimeVueLocaleOptions>
+
+export const primeVueDatePickerLocales: Record<SupportedDatePickerLocale, LocalizedDatePickerLocaleOptions> = {
+  'zh-CN': {
+    fileSizeTypes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+    dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+    dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+    dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
+    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+    monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+    chooseDate: '选择日期',
+    chooseMonth: '选择月份',
+    chooseYear: '选择年份',
+    prevMonth: '上个月',
+    nextMonth: '下个月',
+    prevYear: '上一年',
+    nextYear: '下一年',
+    today: '今天',
+    clear: '清除',
+    firstDayOfWeek: 1,
+    showMonthAfterYear: true,
+    dateFormat: 'yy-mm-dd',
+  },
+  'en-US': {
+    fileSizeTypes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+    dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    monthNames: [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
+    ],
+    monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    chooseDate: 'Choose date',
+    chooseMonth: 'Choose month',
+    chooseYear: 'Choose year',
+    prevMonth: 'Previous month',
+    nextMonth: 'Next month',
+    prevYear: 'Previous year',
+    nextYear: 'Next year',
+    today: 'Today',
+    clear: 'Clear',
+    firstDayOfWeek: 0,
+    showMonthAfterYear: false,
+    dateFormat: 'yy-mm-dd',
+  },
+  'th-TH': {
+    fileSizeTypes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+    dayNames: ['วันอาทิตย์', 'วันจันทร์', 'วันอังคาร', 'วันพุธ', 'วันพฤหัสบดี', 'วันศุกร์', 'วันเสาร์'],
+    dayNamesShort: ['อา.', 'จ.', 'อ.', 'พ.', 'พฤ.', 'ศ.', 'ส.'],
+    dayNamesMin: ['อา.', 'จ.', 'อ.', 'พ.', 'พฤ.', 'ศ.', 'ส.'],
+    monthNames: [
+      'มกราคม',
+      'กุมภาพันธ์',
+      'มีนาคม',
+      'เมษายน',
+      'พฤษภาคม',
+      'มิถุนายน',
+      'กรกฎาคม',
+      'สิงหาคม',
+      'กันยายน',
+      'ตุลาคม',
+      'พฤศจิกายน',
+      'ธันวาคม',
+    ],
+    monthNamesShort: ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.', 'ส.ค.', 'ก.ย.', 'ต.ค.', 'พ.ย.', 'ธ.ค.'],
+    chooseDate: 'เลือกวันที่',
+    chooseMonth: 'เลือกเดือน',
+    chooseYear: 'เลือกปี',
+    prevMonth: 'เดือนก่อนหน้า',
+    nextMonth: 'เดือนถัดไป',
+    prevYear: 'ปีก่อนหน้า',
+    nextYear: 'ปีถัดไป',
+    today: 'วันนี้',
+    clear: 'ล้าง',
+    firstDayOfWeek: 1,
+    showMonthAfterYear: false,
+    dateFormat: 'yy-mm-dd',
+  },
+}
+
+export function normalizeDatePickerLocale(nextLocale: string): SupportedDatePickerLocale {
+  if (nextLocale === 'en-US' || nextLocale === 'th-TH') {
+    return nextLocale
+  }
+  return 'zh-CN'
+}
+
+export function parseDatePickerValue(value: string): Date | null {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value)
+  if (!match) {
+    return null
+  }
+  const year = Number(match[1])
+  const month = Number(match[2])
+  const day = Number(match[3])
+  const date = new Date(year, month - 1, day)
+  if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
+    return null
+  }
+  return date
+}
+
+export function formatDatePickerValue(value: Date | null | undefined): string {
+  if (!(value instanceof Date) || Number.isNaN(value.getTime())) {
+    return ''
+  }
+  const year = value.getFullYear()
+  const month = String(value.getMonth() + 1).padStart(2, '0')
+  const day = String(value.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}