+
+ )
+
+ const maxDay = useMemo(
+ () => (props.max ? dayjs(props.max) : current.add(6, 'month')),
+ [props.max, current]
+ )
+ const minDay = useMemo(
+ () => (props.min ? dayjs(props.min) : current),
+ [props.min, current]
+ )
+
+ function renderBody() {
+ const cells: ReactNode[] = []
+ let monthIterator = minDay
+ // 遍历月份
+ while (monthIterator.isSameOrBefore(maxDay, 'month')) {
+ const year = monthIterator.year()
+ const month = monthIterator.month()
+ const renderMap = {
+ year,
+ month: month + 1,
+ }
+
+ cells.push(
+
+ {props.title ?? locale.Calendar.title}
+
+
+
+ )
+
+ monthIterator = monthIterator.add(1, 'month')
+ }
+
+ return cells
+ }
+ const body =
+ {locale.Calendar.yearAndMonth?.replace(
+ /\${(.*?)}/g,
+ (_, variable: keyof typeof renderMap) => {
+ return renderMap[variable]?.toString()
+ }
+ )}
+
+
+ {/* 空格填充 */}
+ {Array(
+ props.weekStartsOn === 'Monday'
+ ? monthIterator.date(1).isoWeekday() - 1
+ : monthIterator.date(1).isoWeekday()
+ )
+ .fill(null)
+ .map((_, index) => (
+
+ ))}
+ {/* 遍历每月 */}
+ {Array(monthIterator.daysInMonth())
+ .fill(null)
+ .map((_, index) => {
+ const d = monthIterator.date(index + 1)
+ let isSelect = false
+ let isBegin = false
+ let isEnd = false
+ let isSelectRowBegin = false
+ let isSelectRowEnd = false
+ if (dateRange) {
+ const [begin, end] = dateRange
+ isBegin = d.isSame(begin, 'day')
+ isEnd = d.isSame(end, 'day')
+ isSelect =
+ isBegin ||
+ isEnd ||
+ (d.isAfter(begin, 'day') && d.isBefore(end, 'day'))
+ if (isSelect) {
+ isSelectRowBegin =
+ (cells.length % 7 === 0 ||
+ d.isSame(d.startOf('month'), 'day')) &&
+ !isBegin
+ isSelectRowEnd =
+ (cells.length % 7 === 6 ||
+ d.isSame(d.endOf('month'), 'day')) &&
+ !isEnd
+ }
+ }
+ const disabled = props.shouldDisableDate
+ ? props.shouldDisableDate(d.toDate())
+ : (maxDay && d.isAfter(maxDay, 'day')) ||
+ (minDay && d.isBefore(minDay, 'day'))
+
+ const renderTop = () => {
+ const top = props.renderTop?.(d.toDate())
+
+ if (top) {
+ return top
+ }
+
+ if (props.selectionMode === 'range') {
+ if (isBegin) {
+ return locale.Calendar.start
+ }
+
+ if (isEnd) {
+ return locale.Calendar.end
+ }
+ }
+
+ if (d.isSame(today, 'day') && !isSelect) {
+ return locale.Calendar.today
+ }
+ }
+ return (
+
+ {
+ if (!props.selectionMode) return
+ if (disabled) return
+ const date = d.toDate()
+ function shouldClear() {
+ if (!props.allowClear) return false
+ if (!dateRange) return false
+ const [begin, end] = dateRange
+ return d.isSame(begin, 'date') && d.isSame(end, 'day')
+ }
+ if (props.selectionMode === 'single') {
+ if (props.allowClear && shouldClear()) {
+ setDateRange(null)
+ return
+ }
+ setDateRange([date, date])
+ } else if (props.selectionMode === 'range') {
+ if (!dateRange) {
+ setDateRange([date, date])
+ setIntermediate(true)
+ return
+ }
+ if (shouldClear()) {
+ setDateRange(null)
+ setIntermediate(false)
+ return
+ }
+ if (intermediate) {
+ const another = dateRange[0]
+ setDateRange(
+ another > date ? [date, another] : [another, date]
+ )
+ setIntermediate(false)
+ } else {
+ setDateRange([date, date])
+ setIntermediate(true)
+ }
+ }
+ }}
+ >
+
+ )
+ })}
+
+ {renderTop()}
+
+
+ {props.renderDate
+ ? props.renderDate(d.toDate())
+ : d.date()}
+
+
+ {props.renderBottom?.(d.toDate())}
+
+ {renderBody()}
+
+ const mark = (
+
+ {markItems.map((item, index) => (
+
+ )
+
+ return withNativeProps(
+ props,
+
+ {item}
+
+ ))}
+
+ {header}
+ {mark}
+ {body}
+
+ )
+ }
+)
diff --git a/src/components/calendar-view/calendar-view.zh.md b/src/components/calendar-view/calendar-view.zh.md
new file mode 100644
index 0000000000..621dc08365
--- /dev/null
+++ b/src/components/calendar-view/calendar-view.zh.md
@@ -0,0 +1,63 @@
+# CalendarView 日历
+
+`;
+
+exports[`Calendar jump to a day 1`] = `
+
+
+
+
+
+ 日期选择
+
+
+
+
+ 日
+
+
+ 一
+
+
+ 二
+
+
+ 三
+
+
+ 四
+
+
+ 五
+
+
+ 六
+
+
+
+
+
+
+ 2023年5月
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+ 周末
+
+
+ 6
+
+
+
+
+
+ 周末
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+ 周末
+
+
+ 13
+
+
+
+
+
+ 周末
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+ 周末
+
+
+ 20
+
+
+
+
+
+ 周末
+
+
+ 21
+
+
+
+
+
+ 今天
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+ 周末
+
+
+ 27
+
+
+
+
+
+ 周末
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+
+ 31
+
+
+
+
+
+
+`;
+
+exports[`Calendar jump to a day 2`] = `
+
+
+
+
+
+ 日期选择
+
+
+
+
+ 日
+
+
+ 一
+
+
+ 二
+
+
+ 三
+
+
+ 四
+
+
+ 五
+
+
+ 六
+
+
+
+
+
+
+ 2021年1月
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+
+ 31
+
+
+
+
+
+ 2021年2月
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+ 2021年3月
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+
+ 31
+
+
+
+
+
+ 2021年4月
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+ 2021年5月
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+
+ 31
+
+
+
+
+
+ 2021年6月
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+ 2021年7月
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+
+ 31
+
+
+
+
+
+
+`;
+
+exports[`Calendar range mode 1`] = `
+
+
+
+
+
+ 日期选择
+
+
+
+
+ 日
+
+
+ 一
+
+
+ 二
+
+
+ 三
+
+
+ 四
+
+
+ 五
+
+
+ 六
+
+
+
+
+
+
+ 2023年5月
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+ 今日
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+
+ 31
+
+
+
+
+
+ 2023年6月
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+ 2023年7月
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+
+ 31
+
+
+
+
+
+ 2023年8月
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+
+ 31
+
+
+
+
+
+ 2023年9月
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+ 2023年10月
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+
+ 31
+
+
+
+
+
+ 2023年11月
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+`;
+
+exports[`Calendar single mode 1`] = `
+
+
+
+
+
+ 日期选择
+
+
+
+
+ 日
+
+
+ 一
+
+
+ 二
+
+
+ 三
+
+
+ 四
+
+
+ 五
+
+
+ 六
+
+
+
+
+
+
+ 2023年5月
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+ 开始
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+ 结束
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+ 今日
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+
+ 31
+
+
+
+
+`;
+
+exports[`Calendar week start on Monday 1`] = `
+
+
+
+
+
+ 日期选择
+
+
+
+
+ 日
+
+
+ 一
+
+
+ 二
+
+
+ 三
+
+
+ 四
+
+
+ 五
+
+
+ 六
+
+
+
+
+
+
+ 2023年5月
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+ 今日
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+
+ 31
+
+
+
+
+`;
diff --git a/src/components/calendar-view/tests/calendar-view.test.tsx b/src/components/calendar-view/tests/calendar-view.test.tsx
new file mode 100644
index 0000000000..c91e57f2fc
--- /dev/null
+++ b/src/components/calendar-view/tests/calendar-view.test.tsx
@@ -0,0 +1,163 @@
+import React, { useRef } from 'react'
+import { render, testA11y, fireEvent } from 'testing'
+import CalendarView, { CalendarViewRef } from '..'
+import dayjs from 'dayjs'
+import MockDate from 'mockdate'
+
+const classPrefix = `adm-calendar-view`
+
+// mock today
+MockDate.set(new Date('2023-05-22'))
+
+const mixDate: Date = new Date('2023-05-01')
+const maxDate: Date = new Date('2023-05-31')
+const singleDate: Date = new Date('2023-05-03')
+const rangeDate: [Date, Date] = [new Date('2023-05-04'), new Date('2023-05-07')]
+
+describe('Calendar', () => {
+ test('a11y', async () => {
+ await testA11y(
+
+
+
+
+ 日期选择
+
+
+
+
+ 一
+
+
+ 二
+
+
+ 三
+
+
+ 四
+
+
+ 五
+
+
+ 六
+
+
+ 日
+
+
+
+
+
+
+ 2023年5月
+
+
+
+
+
+
+
+ 1
+
+
+
+
+
+
+ 2
+
+
+
+
+
+
+ 3
+
+
+
+
+
+
+ 4
+
+
+
+
+
+
+ 5
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+ 7
+
+
+
+
+
+
+ 8
+
+
+
+
+
+
+ 9
+
+
+
+
+
+
+ 10
+
+
+
+
+
+
+ 11
+
+
+
+
+
+
+ 12
+
+
+
+
+
+
+ 13
+
+
+
+
+
+
+ 14
+
+
+
+
+
+
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+ 今日
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+
+ 31
+
+
+ {dayjs(date).date()}
+ }}
+ />
+ )
+ expect(document.getElementsByClassName('custom-cell').length).toBe(31)
+ })
+
+ test('custom bottom', () => {
+ render(
+ {dayjs(date).date()}
+ }}
+ />
+ )
+ expect(document.getElementsByClassName('custom-cell').length).toBe(31)
+ })
+})
diff --git a/src/components/calendar/calendar.en.md b/src/components/calendar/calendar.en.md
index b5d4c4974e..41320924b0 100644
--- a/src/components/calendar/calendar.en.md
+++ b/src/components/calendar/calendar.en.md
@@ -16,29 +16,32 @@ When the user needs to enter a date, he can select it in the pop-up date panel.
- {
- handlePageChange('subtract', 1, 'year')
- }}
- >
- {props.prevYearButton}
-
- {
- handlePageChange('subtract', 1, 'month')
- }}
- >
- {props.prevMonthButton}
-
-
- )
-
- const maxDay = useMemo(() => props.max && dayjs(props.max), [props.max])
- const minDay = useMemo(() => props.min && dayjs(props.min), [props.min])
-
- function renderCells() {
- const cells: ReactNode[] = []
- let iterator = current.subtract(current.isoWeekday(), 'day')
- if (props.weekStartsOn === 'Monday') {
- iterator = iterator.add(1, 'day')
- }
- while (cells.length < 6 * 7) {
- const d = iterator
- let isSelect = false
- let isBegin = false
- let isEnd = false
- let isSelectRowBegin = false
- let isSelectRowEnd = false
- if (dateRange) {
- const [begin, end] = dateRange
- isBegin = d.isSame(begin, 'day')
- isEnd = d.isSame(end, 'day')
- isSelect =
- isBegin ||
- isEnd ||
- (d.isAfter(begin, 'day') && d.isBefore(end, 'day'))
- if (isSelect) {
- isSelectRowBegin =
- (cells.length % 7 === 0 || d.isSame(d.startOf('month'), 'day')) &&
- !isBegin
- isSelectRowEnd =
- (cells.length % 7 === 6 || d.isSame(d.endOf('month'), 'day')) &&
- !isEnd
- }
- }
- const inThisMonth = d.month() === current.month()
- const disabled = props.shouldDisableDate
- ? props.shouldDisableDate(d.toDate())
- : (maxDay && d.isAfter(maxDay, 'day')) ||
- (minDay && d.isBefore(minDay, 'day'))
- cells.push(
-
- {replaceMessage(locale.Calendar.yearAndMonth, {
- year: current.year().toString(),
- month: (current.month() + 1).toString(),
- })}
-
- {
- handlePageChange('add', 1, 'month')
- }}
- >
- {props.nextMonthButton}
-
- {
- handlePageChange('add', 1, 'year')
- }}
- >
- {props.nextYearButton}
-
- (null)) as React.RefObject
+
+ const {
+ visible,
+ confirmText,
+ popupClassName,
+ popupStyle,
+ popupBodyStyle,
+ forceRender,
+ closeOnMaskClick,
+ onClose,
+ onConfirm,
+ onMaskClick,
+ ...calendarViewProps
+ } = props
+
+ const footer = (
+
-
- 如果你不设置 selectionMode 属性，那么日历默认是不支持进行选择操作的
-
-
+ const [val, setVal] = useState<[Date, Date] | null>(() => [
+ dayjs().subtract(2, 'day').toDate(),
+ dayjs().add(2, 'day').toDate(),
+ ])
+ const [visible1, setVisible1] = useState(false)
+ const [visible2, setVisible2] = useState(false)
+ const [visible3, setVisible3] = useState(false)
-
- 上一月}
- nextMonthButton={下一月}
- prevYearButton={上一年}
- nextYearButton={下一年}
- />
-
+ const singleDate: Date = new Date('2023-06-03')
-
+ return (
+
-
+
+ {
+ setVisible3(true)
+ }}
+ >
+ 受控日期选择
setVisible3(false)}
+ onMaskClick={() => setVisible3(false)}
onChange={val => {
- console.log(val)
+ setVal(val)
}}
/>
-
-
+
+
)
}
diff --git a/src/components/calendar/demos/demo2.tsx b/src/components/calendar/demos/demo2.tsx
index 9c4027e352..d9f7c7d9c0 100644
--- a/src/components/calendar/demos/demo2.tsx
+++ b/src/components/calendar/demos/demo2.tsx
@@ -1,25 +1,73 @@
-import dayjs from 'dayjs'
import React, { useState } from 'react'
-import { Calendar } from 'antd-mobile'
-import { DemoBlock } from 'demos'
+import { Calendar, List } from 'antd-mobile'
+
+const min = new Date()
+min.setDate(5)
+const max = new Date()
+max.setDate(20)
export default () => {
- const today = dayjs()
- const [val, setVal] = useState<[Date, Date] | null>(() => [
- today.subtract(2, 'day').toDate(),
- today.add(2, 'day').toDate(),
- ])
+ const [visible1, setVisible1] = useState(false)
+ const [visible2, setVisible2] = useState(false)
+ const [visible3, setVisible3] = useState(false)
+ const [visible4, setVisible4] = useState(false)
+
return (
- <>
-
+
-
+
+
)
}
diff --git a/src/components/calendar/demos/demo4.less b/src/components/calendar/demos/demo3.less
similarity index 89%
rename from src/components/calendar/demos/demo4.less
rename to src/components/calendar/demos/demo3.less
index f0bc9bdd99..49cf099068 100644
--- a/src/components/calendar/demos/demo4.less
+++ b/src/components/calendar/demos/demo3.less
@@ -1,6 +1,7 @@
@prefix: ~'adm-calendar';
-.calendar-custom {
+.calendar-custom,
+.calendar-popup-custom {
.@{prefix}-cell {
justify-content: center;
height: 38px;
@@ -84,3 +85,17 @@
}
}
}
+
+.custom-cell {
+ width: 38px;
+ height: 38px;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &-selected {
+ background: var(--adm-color-primary);
+ color: #fff;
+ }
+}
diff --git a/src/components/calendar/demos/demo3.tsx b/src/components/calendar/demos/demo3.tsx
index 0a82f6ffd4..7a1a7697e7 100644
--- a/src/components/calendar/demos/demo3.tsx
+++ b/src/components/calendar/demos/demo3.tsx
@@ -1,52 +1,111 @@
+import classnames from 'classnames'
import dayjs from 'dayjs'
-import React, { useEffect, useRef } from 'react'
-import { Calendar } from 'antd-mobile'
-import { DemoBlock } from 'demos'
-import { CalendarRef } from 'antd-mobile/es/components/calendar'
-
-const min = new Date()
-min.setDate(5)
-const max = new Date()
-max.setDate(20)
+import React, { useState } from 'react'
+import { Calendar, List } from 'antd-mobile'
+import './demo3.less'
export default () => {
const today = dayjs()
- const calendarRef = useRef(null)
- useEffect(() => {
- if (calendarRef.current) {
- calendarRef.current.jumpTo({
- year: 2022,
- month: 4,
- })
- }
- }, [])
+ const [val, setVal] = useState<[Date, Date] | null>(() => [
+ today.subtract(2, 'day').toDate(),
+ today.add(2, 'day').toDate(),
+ ])
+
+ const [visible1, setVisible1] = useState(false)
+ const [visible2, setVisible2] = useState(false)
+ const [visible3, setVisible3] = useState(false)
+ const [visible4, setVisible4] = useState(false)
+
return (
- <>
-
-
-
+
-
-
-
+
+ {
+ setVisible3(true)
+ }}
+ >
+ 自定义日期渲染
setVisible3(false)}
+ onMaskClick={() => setVisible3(false)}
+ renderDate={date => {
+ const dates = [16, 17, 18, 19]
+ const d = dayjs(date).date()
+ return (
+
+ {
+ setVisible4(true)
+ }}
+ >
+ 高级自定义样式
+ {
+ setVal(val)
+ }}
+ visible={visible4}
+ onClose={() => setVisible4(false)}
+ onMaskClick={() => setVisible4(false)}
/>
-
-
-
-
+
+
)
}
diff --git a/src/components/calendar/demos/demo4.tsx b/src/components/calendar/demos/demo4.tsx
index 93adfc363d..82ee73197f 100644
--- a/src/components/calendar/demos/demo4.tsx
+++ b/src/components/calendar/demos/demo4.tsx
@@ -1,27 +1,48 @@
-import dayjs from 'dayjs'
-import React, { useState } from 'react'
-import { Calendar } from 'antd-mobile'
-import { DemoBlock } from 'demos'
-import './demo4.less'
+import React, { useState, useRef } from 'react'
+import { Calendar, List, CalendarRef } from 'antd-mobile'
export default () => {
- const today = dayjs()
- const [val, setVal] = useState<[Date, Date] | null>(() => [
- today.subtract(2, 'day').toDate(),
- today.add(2, 'day').toDate(),
- ])
+ const ref1 = useRef(null)
+ const ref2 = useRef(null)
+ const [visible1, setVisible1] = useState(false)
+ const [visible2, setVisible2] = useState(false)
+
return (
- <>
-
+
-
+
+
)
}
diff --git a/src/components/calendar/demos/demo5.less b/src/components/calendar/demos/demo5.less
deleted file mode 100644
index 3286137d79..0000000000
--- a/src/components/calendar/demos/demo5.less
+++ /dev/null
@@ -1,13 +0,0 @@
-.custom-cell {
- width: 38px;
- height: 38px;
- border-radius: 50%;
- display: flex;
- justify-content: center;
- align-items: center;
-
- &-selected {
- background: var(--adm-color-primary);
- color: #fff;
- }
-}
diff --git a/src/components/calendar/demos/demo5.tsx b/src/components/calendar/demos/demo5.tsx
deleted file mode 100644
index 7f614be14e..0000000000
--- a/src/components/calendar/demos/demo5.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import dayjs from 'dayjs'
-import React from 'react'
-import { Calendar } from 'antd-mobile'
-import { DemoBlock } from 'demos'
-import classNames from 'classnames'
-import './demo5.less'
-
-export default () => {
- return (
- <>
-
- {
- const dates = [16, 17, 18, 19]
- const d = dayjs(date).date()
- return (
-
-
- )
-}
diff --git a/src/components/calendar/index.ts b/src/components/calendar/index.ts
index cff7d5a2ec..7cf42a25f9 100644
--- a/src/components/calendar/index.ts
+++ b/src/components/calendar/index.ts
@@ -1,4 +1,3 @@
-import './calendar.less'
import { Calendar } from './calendar'
export type { CalendarProps, CalendarRef } from './calendar'
diff --git a/src/components/calendar/tests/__snapshots__/calendar.test.tsx.snap b/src/components/calendar/tests/__snapshots__/calendar.test.tsx.snap
index c33e4205dd..a3644cc699 100644
--- a/src/components/calendar/tests/__snapshots__/calendar.test.tsx.snap
+++ b/src/components/calendar/tests/__snapshots__/calendar.test.tsx.snap
@@ -1,5128 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Calendar controlled mode 1`] = `
-
-`;
-
-exports[`Calendar week start on Monday 1`] = `
- {
- setVal(val)
- }}
- />
- )
- }
-
- const { container, getByText } = render((null)
- return (
- <>
-
-
- {
- if (dayjs(date).isSame(today, 'day')) return '今天'
- if (date.getDay() === 0 || date.getDay() === 6) {
- return '周末'
- }
- }}
- />
- )
- expect(container).toMatchSnapshot()
- })
-
- test('custom date render', () => {
- render(
- {
- return
+
)
return withNativeProps(
props,
+
- )
- iterator = iterator.add(1, 'day')
- }
- return cells
- }
- const body = {renderCells()}
-
- const mark = (
-
- {markItems.map((item, index) => (
-
- {item}
-
- ))}
+ {confirmText ?? locale.Calendar.confirm}
+
+
- {header}
- {mark}
- {body}
+ {
+ onMaskClick?.()
+ if (closeOnMaskClick) {
+ onClose?.()
+ }
+ }}
+ >
+
)
})
diff --git a/src/components/calendar/calendar.zh.md b/src/components/calendar/calendar.zh.md
index ed01567c4a..9fe79f0ba2 100644
--- a/src/components/calendar/calendar.zh.md
+++ b/src/components/calendar/calendar.zh.md
@@ -16,29 +16,32 @@
-
+
-
+
-
+
+ {d}
+
+ )
+ }}
+ />
+ -
+
- {d}
-
- )
- }}
- />
-
-
-`;
-
-exports[`Calendar custom label 1`] = `
-
-
-
-
-
-
- 日
-
-
- 一
-
-
- 二
-
-
- 三
-
-
- 四
-
-
- 五
-
-
- 六
-
-
-
-
-
-
- 27
-
-
-
-
-
- 28
-
-
-
-
-
- 29
-
-
-
-
-
- 30
-
-
-
-
-
- 31
-
-
-
-
-
- 1
-
-
-
-
-
- 2
-
-
-
-
-
- 3
-
-
-
-
-
- 4
-
-
-
-
-
- 5
-
-
-
-
-
- 6
-
-
-
-
-
- 7
-
-
-
-
-
- 8
-
-
-
-
-
- 9
-
-
-
-
-
- 10
-
-
-
-
-
- 11
-
-
-
-
-
- 12
-
-
-
-
-
- 13
-
-
-
-
-
- 14
-
-
-
-
-
- 15
-
-
-
-
-
- 16
-
-
-
-
-
- 17
-
-
-
-
-
- 18
-
-
-
-
-
- 19
-
-
-
-
-
- 20
-
-
-
-
-
- 21
-
-
-
-
-
- 22
-
-
-
-
-
- 23
-
-
-
-
-
- 24
-
-
-
-
-
- 25
-
-
-
-
-
- 26
-
-
-
-
-
- 27
-
-
-
-
-
- 28
-
-
-
-
-
- 29
-
-
-
-
-
- 30
-
-
-
-
-
- 1
-
-
-
-
-
- 2
-
-
-
-
-
- 3
-
-
-
-
-
- 4
-
-
-
-
-
- 5
-
-
-
-
-
- 6
-
-
-
-
-
- 7
-
-
-
-
-`;
-
-exports[`Calendar jump to a day 1`] = `
-
-
-
-
-
-
- 日
-
-
- 一
-
-
- 二
-
-
- 三
-
-
- 四
-
-
- 五
-
-
- 六
-
-
-
-
-
-
- 27
-
-
- 周末
-
-
-
-
- 28
-
-
-
-
-
- 1
-
-
-
-
-
- 2
-
-
-
-
-
- 3
-
-
-
-
-
- 4
-
-
-
-
-
- 5
-
-
- 周末
-
-
-
-
- 6
-
-
- 周末
-
-
-
-
- 7
-
-
-
-
-
- 8
-
-
-
-
-
- 9
-
-
-
-
-
- 10
-
-
-
-
-
- 11
-
-
-
-
-
- 12
-
-
- 周末
-
-
-
-
- 13
-
-
- 周末
-
-
-
-
- 14
-
-
-
-
-
- 15
-
-
-
-
-
- 16
-
-
-
-
-
- 17
-
-
-
-
-
- 18
-
-
-
-
-
- 19
-
-
- 周末
-
-
-
-
- 20
-
-
- 周末
-
-
-
-
- 21
-
-
-
-
-
- 22
-
-
- 今天
-
-
-
-
- 23
-
-
-
-
-
- 24
-
-
-
-
-
- 25
-
-
-
-
-
- 26
-
-
- 周末
-
-
-
-
- 27
-
-
- 周末
-
-
-
-
- 28
-
-
-
-
-
- 29
-
-
-
-
-
- 30
-
-
-
-
-
- 31
-
-
-
-
-
- 1
-
-
-
-
-
- 2
-
-
- 周末
-
-
-
-
- 3
-
-
- 周末
-
-
-
-
- 4
-
-
-
-
-
- 5
-
-
-
-
-
- 6
-
-
-
-
-
- 7
-
-
-
-
-
- 8
-
-
-
-
-
- 9
-
-
- 周末
-
-
-
-
-
-`;
-
-exports[`Calendar jump to a day 2`] = `
-
-
-
-
-
-
- 日
-
-
- 一
-
-
- 二
-
-
- 三
-
-
- 四
-
-
- 五
-
-
- 六
-
-
-
-
-
-
- 27
-
-
-
-
-
- 28
-
-
-
-
-
- 29
-
-
-
-
-
- 30
-
-
-
-
-
- 31
-
-
-
-
-
- 1
-
-
-
-
-
- 2
-
-
-
-
-
- 3
-
-
-
-
-
- 4
-
-
-
-
-
- 5
-
-
-
-
-
- 6
-
-
-
-
-
- 7
-
-
-
-
-
- 8
-
-
-
-
-
- 9
-
-
-
-
-
- 10
-
-
-
-
-
- 11
-
-
-
-
-
- 12
-
-
-
-
-
- 13
-
-
-
-
-
- 14
-
-
-
-
-
- 15
-
-
-
-
-
- 16
-
-
-
-
-
- 17
-
-
-
-
-
- 18
-
-
-
-
-
- 19
-
-
-
-
-
- 20
-
-
-
-
-
- 21
-
-
-
-
-
- 22
-
-
-
-
-
- 23
-
-
-
-
-
- 24
-
-
-
-
-
- 25
-
-
-
-
-
- 26
-
-
-
-
-
- 27
-
-
-
-
-
- 28
-
-
-
-
-
- 29
-
-
-
-
-
- 30
-
-
-
-
-
- 31
-
-
-
-
-
- 1
-
-
-
-
-
- 2
-
-
-
-
-
- 3
-
-
-
-
-
- 4
-
-
-
-
-
- 5
-
-
-
-
-
- 6
-
-
-
-
-
-
-`;
-
-exports[`Calendar range mode 1`] = `
-
-
-
-
-
-
- 日
-
-
- 一
-
-
- 二
-
-
- 三
-
-
- 四
-
-
- 五
-
-
- 六
-
-
-
-
-
-
- 27
-
-
-
-
-
- 28
-
-
-
-
-
- 1
-
-
-
-
-
- 2
-
-
-
-
-
- 3
-
-
-
-
-
- 4
-
-
-
-
-
- 5
-
-
-
-
-
- 6
-
-
-
-
-
- 7
-
-
-
-
-
- 8
-
-
-
-
-
- 9
-
-
-
-
-
- 10
-
-
-
-
-
- 11
-
-
-
-
-
- 12
-
-
-
-
-
- 13
-
-
-
-
-
- 14
-
-
-
-
-
- 15
-
-
-
-
-
- 16
-
-
-
-
-
- 17
-
-
-
-
-
- 18
-
-
-
-
-
- 19
-
-
-
-
-
- 20
-
-
-
-
-
- 21
-
-
-
-
-
- 22
-
-
-
-
-
- 23
-
-
-
-
-
- 24
-
-
-
-
-
- 25
-
-
-
-
-
- 26
-
-
-
-
-
- 27
-
-
-
-
-
- 28
-
-
-
-
-
- 29
-
-
-
-
-
- 30
-
-
-
-
-
- 31
-
-
-
-
-
- 1
-
-
-
-
-
- 2
-
-
-
-
-
- 3
-
-
-
-
-
- 4
-
-
-
-
-
- 5
-
-
-
-
-
- 6
-
-
-
-
-
- 7
-
-
-
-
-
- 8
-
-
-
-
-
- 9
-
-
-
-
-`;
-
exports[`Calendar single mode 1`] = `
-
-
-
-
-
- 日
-
-
- 一
-
-
- 二
-
-
- 三
-
-
- 四
-
-
- 五
-
-
- 六
-
-
-
-
-
-
- 27
-
-
-
-
-
- 28
-
-
-
-
-
- 1
-
-
-
-
-
- 2
-
-
-
-
-
- 3
-
-
-
-
-
- 4
-
-
-
-
-
- 5
-
-
-
-
-
- 6
-
-
-
-
-
- 7
-
-
-
-
-
- 8
-
-
-
-
-
- 9
-
-
-
-
-
- 10
-
-
-
-
-
- 11
-
-
-
-
-
- 12
-
-
-
-
-
- 13
-
-
-
-
-
- 14
-
-
-
-
-
- 15
-
-
-
-
-
- 16
-
-
-
-
-
- 17
-
-
-
-
-
- 18
-
-
-
-
-
- 19
-
-
-
-
-
- 20
-
-
-
-
-
- 21
-
-
-
-
-
- 22
-
-
-
-
-
- 23
-
-
-
-
-
- 24
-
-
-
-
-
- 25
-
-
-
-
-
- 26
-
-
-
-
-
- 27
-
-
-
-
-
- 28
-
-
-
-
-
- 29
-
-
-
-
-
- 30
-
-
-
-
-
- 31
-
-
-
-
-
- 1
-
-
-
-
-
- 2
-
-
-
-
-
- 3
-
-
-
-
-
- 4
-
-
-
-
-
- 5
-
-
-
-
-
- 6
-
-
-
-
-
- 7
-
-
-
-
-
- 8
-
-
-
-
-
- 9
-
-
-
-
-
-
-
-
- 日
-
-
- 一
-
-
- 二
-
-
- 三
-
-
- 四
-
-
- 五
-
-
- 六
-
-
-
-
-
-
- 27
-
-
-
-
-
- 28
-
-
-
-
-
- 1
-
-
-
-
-
- 2
-
-
-
-
-
- 3
-
-
-
-
-
- 4
-
-
-
-
-
- 5
-
-
-
-
-
- 6
-
-
-
-
-
- 7
-
-
-
-
-
- 8
-
-
-
-
-
- 9
-
-
-
-
-
- 10
-
-
-
-
-
- 11
-
-
-
-
-
- 12
-
-
-
-
-
- 13
-
-
-
-
-
- 14
-
-
-
-
-
- 15
-
-
-
-
-
- 16
-
-
-
-
-
- 17
-
-
-
-
-
- 18
-
-
-
-
-
- 19
-
-
-
-
-
- 20
-
-
-
-
-
- 21
-
-
-
-
-
- 22
-
-
-
-
-
- 23
-
-
-
-
-
- 24
-
-
-
-
-
- 25
-
-
-
-
-
- 26
-
-
-
-
-
- 27
-
-
-
-
-
- 28
-
-
-
-
-
- 29
-
-
-
-
-
- 30
-
-
-
-
-
- 31
-
-
-
-
-
- 1
-
-
-
-
-
- 2
-
-
-
-
-
- 3
-
-
-
-
-
- 4
-
-
-
-
-
- 5
-
-
-
-
-
- 6
-
-
-
-
-
- 7
-
-
-
-
-
- 8
-
-
-
-
-
- 9
-
-
-
-
`;
diff --git a/src/components/calendar/tests/calendar.test.tsx b/src/components/calendar/tests/calendar.test.tsx
index 231c3640d4..fa43a79f95 100644
--- a/src/components/calendar/tests/calendar.test.tsx
+++ b/src/components/calendar/tests/calendar.test.tsx
@@ -1,16 +1,16 @@
-import React, { useState, useRef } from 'react'
+import React from 'react'
import { render, testA11y, fireEvent } from 'testing'
-import Calendar, { CalendarRef } from '..'
-import dayjs from 'dayjs'
+import Calendar from '..'
import MockDate from 'mockdate'
-const classPrefix = `adm-calendar`
+const classPrefix = `adm-calendar-view`
// mock today
-MockDate.set(new Date('2022-03-22'))
+MockDate.set(new Date('2023-05-22'))
-const singleDate: Date = new Date('2022-03-09')
-const rangeDate: [Date, Date] = [new Date('2022-03-09'), new Date('2022-03-21')]
+const mixDate: Date = new Date('2023-05-01')
+const maxDate: Date = new Date('2023-05-31')
+const singleDate: Date = new Date('2023-05-03')
describe('Calendar', () => {
test('a11y', async () => {
@@ -19,155 +19,21 @@ describe('Calendar', () => {
test('single mode', async () => {
const fn = jest.fn()
- const { container, getByText } = render(
+ const { container, getAllByText } = render(
-
-
+ />
-
-
- 一
-
-
- 二
-
-
- 三
-
-
- 四
-
-
- 五
-
-
- 六
-
-
- 日
-
-
-
-
-
-
- 28
-
-
-
-
-
- 1
-
-
-
-
-
- 2
-
-
-
-
-
- 3
-
-
-
-
-
- 4
-
-
-
-
-
- 5
-
-
-
-
-
- 6
-
-
-
-
-
- 7
-
-
-
-
-
- 8
-
-
-
-
-
- 9
-
-
-
-
-
- 10
-
-
-
-
-
- 11
-
-
-
-
-
- 12
-
-
-
-
-
- 13
-
-
-
-
-
- 14
-
-
-
-
-
- 15
-
-
-
-
-
- 16
-
-
-
-
-
- 17
-
-
-
-
-
- 18
-
-
-
-
-
- 19
-
-
-
-
-
- 20
-
-
-
-
-
- 21
-
-
-
-
-
- 22
-
-
-
-
-
- 23
-
-
-
-
-
- 24
-
-
-
-
-
- 25
-
-
-
-
-
- 26
-
-
-
-
-
- 27
-
-
-
-
-
- 28
-
-
-
-
-
- 29
-
-
-
-
-
- 30
-
-
-
-
-
- 31
-
-
-
-
-
- 1
-
-
-
-
-
- 2
-
-
-
-
-
- 3
-
-
-
-
-
- 4
-
-
-
-
-
- 5
-
-
-
-
-
- 6
-
-
-
-
-
- 7
-
-
-
-
-
- 8
-
-
-
-
-
- 9
-
-
-
-
-
- 10
-
-
- {dayjs(date).date()}
- }}
- />
- )
- expect(document.getElementsByClassName('custom-cell').length).toBe(42)
- })
})
diff --git a/src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap b/src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap
index 2d97539be6..f3d3ae8a48 100644
--- a/src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap
+++ b/src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap
@@ -3,8032 +3,26960 @@
exports[`ConfigProvider should display the text as da-DK 1`] = `
sø
ma
ti
on
to
fr
lø
-
-
-
-
- 27
-
-
-
-
-
- 28
-
-
-
-
-
- 1
-
-
-
-
-
- 2
-
-
-
-
-
- 3
-
-
-
-
-
- 4
-
-
-
-
-
- 5
-
-
-
-
-
- 6
-
-
-
-
-
- 7
-
-
-
-
-
- 8
-
-
-
-
-
- 9
-
-
-
-
-
- 10
-
-
-
-
-
- 11
-
-
-
-
-
- 12
-
-
-
-
-
- 13
-
-
-
-
-
- 14
-
-
-
-
-
- 15
-
-
-
-
-
- 16
-
-
-
+
-
-
- 17
+ 3.2022
-
-
-
- 18
-
-
-
-
-
- 19
-
-
-
-
-
- 20
-
-
-
-
-
- 21
-
-
-
-
-
- 22
-
-
-
-
-
- 23
-
-
-
-
-
- 24
-
-
-
-
-
- 25
-
-
-
-
-
- 26
-
-
-
-
-
- 27
-
-
-
-
-
- 28
-
-
-
-
-
- 29
-
-
-
-
-
- 30
-
-
-
-
-
- 31
-
-
-
-
-
- 1
-
-
-
-
-
- 2
-
-
-
-
-
- 3
-
-
-
-
-
- 4
-
-
-
-
-
- 5
-
-
-
-
-
- 6
-
-
-
-
-
- 7
-
-
-
-
-
- 8
-
-
-
-
-
- 9
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`ConfigProvider should display the text as en 1`] = `
-
-
-
-
-
-
+ 10
+
+
+
+
-
-
+
-
+ 11
-
-
-
-
-
-
-
-
-
-
+
-
-
+
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
+
- 2022/3
+ 15
+
+
+
+
+
+
+ 16
+
+
+
+
+
+
+ 17
+
+
+
+
+
+
+ 18
+
+
+
+
+
+
+ 19
+
+
+
+
+
+
+ 20
+
+
+
+
+
+
+ 21
+
+
+
+
+
+ today
+
+
+ 22
+
+
+
+
+
+
+ 23
+
+
+
+
+
+
+ 24
+
+
+
+
+
+
+ 25
+
+
+
+
+
+
+ 26
+
+
+
+
+
+
+ 27
+
+
+
+
+
+
+ 28
+
+
+
+
+
+
+ 29
+
+
+
+
+
+
+ 30
+
+
+
+
+
+
+ 31
+
+
+