freedakgmail
85 lines
2.4 KiB
TypeScript
85 lines
2.4 KiB
TypeScript
"use client"
|
|
|
|
import { Calendar } from 'antd'
|
|
import type { Dayjs } from 'dayjs'
|
|
import dayjs from 'dayjs'
|
|
import 'dayjs/locale/zh-cn'
|
|
import { solar2lunar } from '@/lib/lunar-calendar'
|
|
import './antd-lunar-calendar.css'
|
|
|
|
dayjs.locale('zh-cn')
|
|
|
|
interface AntdLunarCalendarProps {
|
|
onSelect?: (date: Date) => void
|
|
}
|
|
|
|
export function AntdLunarCalendar({ onSelect }: AntdLunarCalendarProps) {
|
|
const cellRender = (current: Dayjs) => {
|
|
const date = current.toDate()
|
|
const lunarInfo = solar2lunar(date)
|
|
|
|
return (
|
|
<div className="lunar-calendar-cell">
|
|
<div className="solar-date">{current.date()}</div>
|
|
{lunarInfo && (
|
|
<div className="lunar-info">
|
|
<div className="lunar-date">{lunarInfo.dayName}</div>
|
|
{lunarInfo.isLeap && (
|
|
<div className="lunar-leap-badge">闰</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const handleSelect = (date: Dayjs) => {
|
|
if (onSelect) {
|
|
onSelect(date.toDate())
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="antd-lunar-calendar-wrapper">
|
|
<Calendar
|
|
fullCellRender={cellRender}
|
|
onSelect={handleSelect}
|
|
validRange={[dayjs('1900-01-01'), dayjs('2100-12-31')]}
|
|
locale={{
|
|
lang: {
|
|
locale: 'zh-cn',
|
|
monthFormat: 'M月',
|
|
yearFormat: 'YYYY年',
|
|
today: '今天',
|
|
now: '此刻',
|
|
backToToday: '返回今天',
|
|
ok: '确定',
|
|
timeSelect: '选择时间',
|
|
dateSelect: '选择日期',
|
|
weekSelect: '选择周',
|
|
clear: '清除',
|
|
month: '月',
|
|
year: '年',
|
|
previousMonth: '上个月',
|
|
nextMonth: '下个月',
|
|
monthSelect: '选择月份',
|
|
yearSelect: '选择年份',
|
|
decadeSelect: '选择年代',
|
|
dayFormat: 'D日',
|
|
dateFormat: 'YYYY-MM-DD',
|
|
dateTimeFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
previousYear: '上一年',
|
|
nextYear: '下一年',
|
|
previousDecade: '上一年代',
|
|
nextDecade: '下一年代',
|
|
previousCentury: '上一世纪',
|
|
nextCentury: '下一世纪',
|
|
shortWeekDays: ['日', '一', '二', '三', '四', '五', '六'],
|
|
shortMonths: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|