58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
"use client"
|
|
|
|
import { Calendar, ConfigProvider } from 'antd'
|
|
import type { Dayjs } from 'dayjs'
|
|
import dayjs from 'dayjs'
|
|
import 'dayjs/locale/zh-cn'
|
|
import locale from 'antd/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">
|
|
<ConfigProvider locale={locale}>
|
|
<Calendar
|
|
fullCellRender={cellRender}
|
|
onSelect={handleSelect}
|
|
validRange={[
|
|
dayjs('1900-01-01'),
|
|
dayjs().add(10, 'year').endOf('year')
|
|
]}
|
|
/>
|
|
</ConfigProvider>
|
|
</div>
|
|
)
|
|
}
|