0.0.8.5
This commit is contained in:
@@ -0,0 +1,84 @@
|
||||
"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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user