Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

未验证 提交 2f84540b 编写于 作者: L love_forever 提交者： GitHub
浏览文件
操作

feat: calendar 组件功能补齐、单元测试 (#228)

上级 5acfb768
展开全部 隐藏空白更改
内联 并排
Showing with 1990 addition and 635 deletion
package.json
浏览文件 @ 2f84540b
......@@ -52,8 +52,8 @@
"build:locales": "vite build --config vite.config.build.locales.ts",
"build": "npm run checked && npm run test && vite build --config vite.config.build.ts && npm run build:es && npm run build:css && npm run build:loader-style && npm run build:types && npm run build:locales",
"build:site": "npm run checked && vite build --config vite.config.build.site.ts",
"lint": "eslint .",
"lint:fix": "eslint --fix .",
"lint": "eslint ./src/packages/calendar",
"lint:fix": "eslint --fix ./src/packages/calendar",
"publish:beta": "npm publish --tag beta",
"prepare": "husky install",
"test": "jest",
......
src/packages/calendar/__tests__/calendar.spec.tsx 0 → 100644
浏览文件 @ 2f84540b
import * as React from 'react'
import { render, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import { Calendar } from '../calendar'
interface Day {
day: string | number
type: string
}
test('show-title prop', async () => {
const { container, rerender } = render(
<Calendar
visible
defaultValue="2022-03-18"
startDate="2022-01-01"
endDate="2022-12-31"
/>
)
const canlendarTitle1 = container.querySelectorAll(
'.nut-calendar-header .calendar-title'
)
expect(canlendarTitle1.length).toBe(1)
rerender(
<Calendar
visible
showTitle={false}
defaultValue="2022-03-18"
startDate="2022-01-01"
endDate="2022-12-31"
/>
)
const canlendarTitle2 = container.querySelectorAll(
'.nut-calendar-header .calendar-title'
)
expect(canlendarTitle2.length).toBe(0)
})
test('show-sub-title prop', async () => {
const { container, rerender } = render(
<Calendar
visible
showSubTitle
defaultValue="2022-03-18"
startDate="2022-01-01"
endDate="2022-12-31"
/>
)
const curMonth1 = container.querySelectorAll('.calendar-curr-month')
expect(curMonth1.length).toBe(1)
rerender(
<Calendar
visible
showSubTitle={false}
defaultValue="2022-03-18"
startDate="2022-01-01"
endDate="2022-12-31"
/>
)
const curMonth2 = container.querySelectorAll('.calendar-curr-month')
expect(curMonth2.length).toBe(0)
})
test('show-today prop', async () => {
const { container } = render(
<Calendar
visible
showToday={false}
defaultValue="2022-03-18"
startDate="2022-01-01"
endDate="2022-12-31"
/>
)
const tipCurr = container.querySelectorAll('.calendar-curr-tip-curr')
expect(tipCurr.length).toBe(0)
})
test('should render slot correctly', async () => {
const onBtn = () => {
return <div className="d_div"> 最近七天</div>
}
const onDay = (date: Day) => {
return <span>custom{date.day}</span>
}
const onBottomInfo = (date: Day) => {
return <span>{date.day <= 10 ? '上旬' : '下旬'}</span>
}
const { container } = render(
<Calendar
visible
defaultValue="2022-03-18"
startDate="2022-01-01"
endDate="2022-12-31"
onBtn={onBtn}
onDay={onDay}
onBottomInfo={onBottomInfo}
/>
)
const topSlot = container.querySelector('.calendar-top-slot') as HTMLElement
const viewArea = container.querySelector('.viewArea') as HTMLElement
expect(topSlot.innerHTML).toContain('<div class="d_div"> 最近七天</div>')
expect(viewArea.innerHTML).toMatchSnapshot()
})
test('select event when click item', () => {
const onSelected = jest.fn()
const { container } = render(
<Calendar
visible
defaultValue="2022-03-18"
startDate="2022-01-01"
endDate="2022-12-31"
onSelected={onSelected}
/>
)
const calendarMonthDay = container.querySelectorAll('.calendar-month-day')[15]
fireEvent.click(calendarMonthDay)
expect(onSelected).toBeCalled()
})
test('choose event when click item', async () => {
const onChoose = jest.fn()
const { container } = render(
<Calendar
visible
defaultValue="2022-03-18"
startDate="2022-01-01"
endDate="2022-12-31"
onChoose={onChoose}
/>
)
const calendarConfirmBtn = container.querySelectorAll(
'.calendar-confirm-btn'
)[0]
fireEvent.click(calendarConfirmBtn)
expect(onChoose).toBeCalled()
})
src/packages/calendar/calendar.scss
浏览文件 @ 2f84540b
@import '../popup/popup.scss';
@import '../calendaritem/calendaritem.scss';
.nut-calendar {
position: relative;
display: flex;
flex: 1;
height: 728px;
padding-top: 132px;
padding-bottom: 78px;
color: $calendar-base-color;
font-size: $calendar-base-font;
background-color: $white;
overflow: hidden;
height: 100%;
flex-direction: column;
&.nut-calendar-tile {
padding-top: 46px;
padding-bottom: 0;
.nut-calendar-header {
.calendar-title {
font-size: $calendar-base-font;
......@@ -26,6 +21,9 @@
.nut-calendar-taro {
height: 60vh;
}
.popup-box {
height: 100%;
}
.nut-calendar-content {
overflow-y: auto;
}
......@@ -35,41 +33,39 @@
// 头部导航
.nut-calendar-header {
position: absolute;
top: -1px;
left: 0;
right: 0;
display: flex;
flex-direction: column;
text-align: center;
padding-top: 1px;
background-color: $white;
z-index: 1;
.calendar-title {
padding-top: 22px;
font-size: $calendar-title-font;
line-height: 25px;
border-radius: 12px 12px 0 0;
font-weight: $calendar-title-font-weight;
line-height: 44px;
}
.calendar-curr-month {
padding: 10px 0 7px;
padding: 7px 0;
line-height: 22px;
font-size: $calendar-sub-title-font;
}
.calendar-top-slot {
height: $calendar-top-slot-height;
}
.calendar-weeks {
display: flex;
align-items: center;
justify-content: space-around;
height: 46px;
height: 36px;
border-radius: 0px 0px 12px 12px;
box-shadow: 0px 4px 10px 0px rgba($color: #000000, $alpha: 0.06);
.calendar-week-item {
&:first-of-type,
&:last-of-type {
color: $calendar-primary-color;
color: $calendar-day67-font-color;
}
}
}
......@@ -78,13 +74,17 @@
// 月份
.nut-calendar-content {
flex: 1;
width: 100%;
display: block;
.calendar-months-panel {
position: relative;
width: 100%;
height: auto;
display: block;
box-sizing: border-box;
.viewArea {
display: block;
}
.calendar-month {
display: flex;
flex-direction: column;
......@@ -117,42 +117,62 @@
.calendar-month-con {
overflow: hidden;
.calendar-month-item {
.calendar-month-day:nth-child(7n + 0),
.calendar-month-day:nth-child(7n + 1) {
color: $calendar-primary-color;
color: $calendar-day67-font-color;
}
}
.calendar-month-day {
float: left;
width: 14.28%;
height: 64px;
width: $calendar-day-width;
height: $calendar-day-height;
font-weight: $calendar-day-font-weight;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
.curr-tips,
.calendar-curr-tips {
position: absolute;
width: 100%;
}
.calendar-curr-tip-curr {
position: absolute;
bottom: 6px;
width: 100%;
font-size: 12px;
line-height: 14px;
}
.calendar-day-tip {
position: absolute;
top: 10px;
bottom: 6px;
width: 100%;
font-size: 11px;
line-height: 12px;
font-size: 12px;
line-height: 14px;
color: $calendar-primary-color;
}
.calendar-curr-tips-top {
top: 6px;
}
.calendar-curr-tips-bottom {
bottom: 6px;
}
&-active {
background-color: $calendar-primary-color;
color: $white !important;
border-radius: $calendar-day-active-border-radius;
.curr-tips {
.calendar-curr-tips {
visibility: hidden;
}
.calendar-curr-tip-curr {
visibility: hidden;
}
.calendar-day-tip {
color: $white;
}
......@@ -164,10 +184,11 @@
&-choose {
background-color: $calendar-choose-color;
color: $calendar-choose-font-color;
}
.calendar-day {
padding: 4px 0;
padding: 2px 0;
font-size: $calendar-day-font;
}
}
......@@ -177,19 +198,15 @@
// 底部导航
.nut-calendar-footer {
position: absolute;
left: 0;
right: 0;
bottom: -1px;
display: flex;
height: 78px;
height: 62px;
width: 100%;
background-color: $white;
.calendar-confirm-btn {
height: 44px;
width: 100%;
margin: 14px 18px;
margin: 10px 18px;
border-radius: 22px;
background: $button-primary-background-color;
color: $white;
......@@ -198,3 +215,6 @@
}
}
}
.nutui-popup__close-icon {
top: 7px !important;
}
src/packages/calendar/calendar.taro.tsx
浏览文件 @ 2f84540b
import React, { FunctionComponent } from 'react'
import Popup from '@/packages/popup'
import CalendarItem from '@/packages/calendaritem'
import CalendarItem from '@/packages/calendaritem/index.taro'
import Utils from '@/utils/date'
import { useConfig } from '@/packages/configprovider'
......
src/packages/calendar/calendar.tsx
浏览文件 @ 2f84540b
import React, { FunctionComponent } from 'react'
import React, { useRef } from 'react'
import Popup from '@/packages/popup'
import CalendarItem from '@/packages/calendaritem'
import Utils from '@/utils/date'
import { useConfig } from '@/packages/configprovider'
type CalendarRef = {
scrollToDate: (date: string) => void
}
interface Day {
day: string | number
type: string
}
export interface CalendarProps {
type?: string
isAutoBackFill?: boolean
......@@ -13,8 +22,20 @@ export interface CalendarProps {
defaultValue?: string | string[]
startDate?: string
endDate?: string
showToday?: boolean
startText?: string
endText?: string
confirmText?: string
showTitle?: boolean
showSubTitle?: boolean
toDateAnimation?: boolean
onBtn?: (() => string | JSX.Element) | undefined
onDay?: ((date: Day) => string | JSX.Element) | undefined
onTopInfo?: ((date: Day) => string | JSX.Element) | undefined
onBottomInfo?: ((date: Day) => string | JSX.Element) | undefined
onClose?: () => void
onChoose?: (param: string) => void
onSelected?: (data: string) => void
}
const defaultProps = {
......@@ -26,16 +47,28 @@ const defaultProps = {
defaultValue: '',
startDate: Utils.getDay(0),
endDate: Utils.getDay(365),
showToday: true,
startText: '开始',
endText: '结束',
confirmText: '确认',
showTitle: true,
showSubTitle: true,
toDateAnimation: true,
onBtn: undefined,
onDay: undefined,
onTopInfo: undefined,
onBottomInfo: undefined,
onClose: () => {},
onChoose: (param: string) => {},
onSelected: (data: string) => {},
} as CalendarProps
export const Calendar: FunctionComponent<
Partial<CalendarProps> & React.HTMLAttributes<HTMLDivElement>
> = (props) => {
export const Calendar = React.forwardRef<
CalendarRef,
Partial<CalendarProps> & Omit<React.HTMLAttributes<HTMLDivElement>, ''>
>((props, ref) => {
const { locale } = useConfig()
const {
children,
poppable,
visible,
type,
......@@ -44,15 +77,28 @@ export const Calendar: FunctionComponent<
defaultValue,
startDate,
endDate,
showToday,
startText,
endText,
confirmText,
showTitle,
showSubTitle,
toDateAnimation,
onBtn,
onDay,
onTopInfo,
onBottomInfo,
onClose,
onChoose,
onSelected,
} = { ...defaultProps, ...props }
const calendarRef = useRef<any>(null)
const close = () => {
onClose && onClose()
}
const update = () => {}
const choose = (param: string) => {
close()
onChoose && onChoose(param)
......@@ -61,6 +107,46 @@ export const Calendar: FunctionComponent<
close()
}
const select = (param: string) => {
onSelected && onSelected(param)
}
const scrollToDate = (date: string) => {
calendarRef.current?.scrollToDate(date)
}
React.useImperativeHandle(ref, () => ({
scrollToDate,
}))
const renderItem = () => {
return (
<CalendarItem
ref={calendarRef}
type={type}
isAutoBackFill={isAutoBackFill}
poppable={poppable}
title={locale.calendaritem.title || title}
defaultValue={defaultValue}
startDate={startDate}
endDate={endDate}
showToday={showToday}
startText={startText}
endText={endText}
confirmText={confirmText}
showTitle={showTitle}
showSubTitle={showSubTitle}
toDateAnimation={toDateAnimation}
onBtn={onBtn}
onDay={onDay}
onTopInfo={onTopInfo}
onBottomInfo={onBottomInfo}
onChoose={choose}
onSelected={select}
/>
)
}
return (
<>
{poppable ? (
......@@ -68,39 +154,21 @@ export const Calendar: FunctionComponent<
visible={visible}
position="bottom"
round
duration={0.5}
closeable
destroyOnClose
onClickOverlay={closePopup}
onClickCloseIcon={closePopup}
style={{ height: '85vh' }}
>
<CalendarItem
type={type}
isAutoBackFill={isAutoBackFill}
poppable={poppable}
title={locale.calendaritem.title || title}
defaultValue={defaultValue}
startDate={startDate}
endDate={endDate}
onUpdate={update}
onClose={close}
onChoose={choose}
/>
{renderItem()}
</Popup>
) : (
<CalendarItem
type={type}
isAutoBackFill={isAutoBackFill}
poppable={poppable}
title={locale.calendaritem.title}
defaultValue={defaultValue}
startDate={startDate}
endDate={endDate}
onClose={close}
onChoose={choose}
/>
renderItem()
)}
</>
)
}
})
Calendar.defaultProps = defaultProps
Calendar.displayName = 'NutCalendar'
src/packages/calendar/demo.scss 0 → 100644
浏览文件 @ 2f84540b
.wrapper {
display: flex;
padding: 0 40px;
}
.d_div {
margin: 0px 5px;
.d_btn {
background: #fa3f19;
color: #fff;
font-size: 12px;
padding: 2px 8px;
border-radius: 4px;
display: inline-block;
height: 20px;
}
}
.info {
font-size: 12px;
line-height: 14px;
}
\ No newline at end of file
src/packages/calendar/demo.tsx
浏览文件 @ 2f84540b
import React, { useState } from 'react'
import React, { useState, useRef } from 'react'
import { Calendar } from './calendar'
import { Cell } from '@/packages/cell/cell'
import Utils from '@/utils/date'
import { useTranslate } from '../../sites/assets/locale'
import './demo.scss'
interface Day {
day: string | number
type: string
}
interface T {
ce5c5446: string
c38a08ef: string
......@@ -17,10 +25,6 @@ interface T {
d04fcbda: string
'0aaad620': string
'60a53514': string
b8a453e3: string
'248be9e1': string
ea3d02f2: string
c9e6df49: string
'781b07fd': string
'1076d771': string
'6ab47cd2': string
......@@ -34,21 +38,17 @@ const CalendarDemo = () => {
b840c88f: '请选择',
a74a1fd4: '选择日期区间',
'8dab2f66': '至',
cfbdc781: '自定义日历-自动回填',
cfbdc781: '快捷选择',
c3a3a1d2: '选择日期',
e51e4582: '平铺展示',
'7db1a8b2': '禁用状态',
a52bef0c: '加载状态',
d04fcbda: '加载中',
'0aaad620': '按钮尺寸',
'60a53514': '收藏',
b8a453e3: '大号按钮',
'248be9e1': '普通按钮',
ea3d02f2: '小型按钮',
c9e6df49: '块级元素',
'781b07fd': '自定义颜色',
'1076d771': '单色按钮',
'6ab47cd2': '渐变按钮',
'7db1a8b2': '选择多个日期',
a52bef0c: '已选择',
d04fcbda: '自定义日历',
'0aaad620': '自定义按钮',
'60a53514': '自定义时间文案',
'781b07fd': '去某个月',
'1076d771': '最近七天',
'6ab47cd2': '当月',
},
'zh-TW': {
ce5c5446: '基礎翻譯',
......@@ -56,21 +56,17 @@ const CalendarDemo = () => {
b840c88f: '請選擇',
a74a1fd4: '選擇日期區間',
'8dab2f66': '至',
cfbdc781: '自定義日曆-自動回填',
cfbdc781: '快捷選擇',
c3a3a1d2: '選擇日期',
e51e4582: '平鋪展示',
'7db1a8b2': '禁用狀態',
a52bef0c: '載入狀態',
d04fcbda: '載入中',
'0aaad620': '按鈕尺寸',
'60a53514': '收藏',
b8a453e3: '大號按鈕',
'248be9e1': '普通按鈕',
ea3d02f2: '小型按鈕',
c9e6df49: '塊級元素',
'781b07fd': '自定義顏色',
'1076d771': '單色按鈕',
'6ab47cd2': '漸變按鈕',
'7db1a8b2': '選擇多個日期',
a52bef0c: '已選擇',
d04fcbda: '自定義日曆',
'0aaad620': '自定義按鈕',
'60a53514': '自定義時間文案',
'781b07fd': '去某個月',
'1076d771': '最近七天',
'6ab47cd2': '當月',
},
'en-US': {
ce5c5446: 'Basic usage',
......@@ -78,31 +74,37 @@ const CalendarDemo = () => {
b840c88f: 'please choose',
a74a1fd4: 'Select date range',
'8dab2f66': 'to',
cfbdc781: 'Custom Calendar - Auto Backfill',
cfbdc781: 'quick selection',
c3a3a1d2: 'select date',
e51e4582: 'Tiled display',
'7db1a8b2': 'Disabled State',
a52bef0c: 'Load State',
d04fcbda: 'Loading',
'0aaad620': 'Button size',
'60a53514': 'Favorite',
b8a453e3: 'Large button',
'248be9e1': 'Normal Button',
ea3d02f2: 'Mini Button',
c9e6df49: 'Block-level elements',
'781b07fd': 'Custom Colors',
'1076d771': 'Monochrome button',
'6ab47cd2': 'Gradient button',
'7db1a8b2': 'select multiple dates',
a52bef0c: 'chosen',
d04fcbda: 'custom calendar',
'0aaad620': 'custom button',
'60a53514': 'Custom time copy',
'781b07fd': 'Go Date',
'1076d771': 'Last Seven Days',
'6ab47cd2': 'This Month',
},
})
const [date, setDate] = useState('')
const [date1, setDate1] = useState(['2019-12-23', '2019-12-26'])
const [date, setDate] = useState('2022-08-10')
const [date1, setDate1] = useState(['2020-01-23', '2020-01-26'])
const [date2, setDate2] = useState('2020-07-08')
const [date3, setDate3] = useState('')
const [date4, setDate4] = useState<string[]>([])
const [date5, setDate5] = useState<string[]>(['2020-01-23', '2020-01-26'])
const [date6, setDate6] = useState<string[]>(['2020-01-23', '2020-01-26'])
const [date7, setDate7] = useState<string[]>(['2021-12-23', '2021-12-26'])
const [dateWeek, setDateWeek] = useState('')
const [isVisible, setIsVisible] = useState(false)
const [isVisible1, setIsVisible1] = useState(false)
const [isVisible3, setIsVisible3] = useState(false)
const [isVisible4, setIsVisible4] = useState(false)
const [isVisible5, setIsVisible5] = useState(false)
const [isVisible6, setIsVisible6] = useState(false)
const [isVisible7, setIsVisible7] = useState(false)
const calendarRef = useRef<any>(null)
const openSwitch = () => {
setIsVisible(true)
......@@ -116,6 +118,22 @@ const CalendarDemo = () => {
setIsVisible3(true)
}
const openSwitch4 = () => {
setIsVisible4(true)
}
const openSwitch5 = () => {
setIsVisible5(true)
}
const openSwitch6 = () => {
setIsVisible6(true)
}
const openSwitch7 = () => {
setIsVisible7(true)
}
const closeSwitch = () => {
setIsVisible(false)
}
......@@ -128,6 +146,22 @@ const CalendarDemo = () => {
setIsVisible3(false)
}
const closeSwitch4 = () => {
setIsVisible4(false)
}
const closeSwitch5 = () => {
setIsVisible5(false)
}
const closeSwitch6 = () => {
setIsVisible6(false)
}
const closeSwitch7 = () => {
setIsVisible7(false)
}
const setChooseValue = (param: string) => {
setDate(param[3])
setDateWeek(param[4])
......@@ -146,6 +180,86 @@ const CalendarDemo = () => {
setDate3(param[3])
}
const setChooseValue4 = (chooseData: any) => {
const dateArr = chooseData.map((item: any) => {
return item[3]
})
setDate4([...dateArr])
}
const setChooseValue5 = (param: string) => {
setDate5([...[param[0][3], param[1][3]]])
}
const setChooseValue6 = (param: string) => {
setDate6([...[param[0][3], param[1][3]]])
}
const setChooseValue7 = (param: string) => {
setDate7([...[param[0][3], param[1][3]]])
}
const select = (param: string) => {
console.log(param)
}
const goDate = () => {
if (calendarRef.current) {
calendarRef.current.scrollToDate('2022-04-01')
}
}
const clickBtn = () => {
const date = [Utils.date2Str(new Date()), Utils.getDay(6)]
setDate7(date)
}
const clickBtn1 = () => {
const date = new Date()
const year = date.getFullYear()
let month: any = date.getMonth() + 1
month = month < 10 ? `0${month}` : `${month}`
const yearMonth = `${year}-${month}`
const currMonthDays = Utils.getMonthDays(`${year}`, `${month}`)
setDate7([`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`])
}
const onDay = (date: Day) => {
return <span>{date.day <= 9 ? `0${date.day}` : date.day}</span>
}
const onBottomInfo = (date: Day) => {
let currDate = ''
if (date && date.day <= 10 && date.day > 20) {
currDate = ''
} else {
currDate = 'mid'
}
return <span className="info">{currDate}</span>
}
const onBtn = () => {
return (
<div className="wrapper">
<div className="d_div">
<span className="d_btn" onClick={goDate}>
{translated['781b07fd']}
</span>
</div>
<div className="d_div">
<span className="d_btn" onClick={clickBtn}>
{translated['1076d771']}
</span>
</div>
<div className="d_div">
<span className="d_btn" onClick={clickBtn1}>
{translated['6ab47cd2']}
</span>
</div>
</div>
)
}
return (
<>
<div className="demo">
......@@ -157,12 +271,15 @@ const CalendarDemo = () => {
/>
<Calendar
visible={isVisible}
showTitle={false}
defaultValue={date}
startDate="2019-10-11"
endDate="2029-11-11"
startDate="2022-01-11"
endDate="2029-11-30"
onClose={closeSwitch}
onChoose={setChooseValue}
onSelected={select}
/>
<Cell
title={translated.a74a1fd4}
desc={
......@@ -180,7 +297,28 @@ const CalendarDemo = () => {
endDate="2021-01-08"
onClose={closeSwitch1}
onChoose={setChooseValue1}
onSelected={select}
/>
<Cell
title={translated['7db1a8b2']}
desc={
date4 && date4.length
? `${translated.a52bef0c}${date4.length}`
: translated.b840c88f
}
onClick={openSwitch4}
/>
<Calendar
visible={isVisible4}
defaultValue={date4}
type="multiple"
startDate="2022-01-01"
endDate="2022-09-10"
onClose={closeSwitch4}
onChoose={setChooseValue4}
/>
<h2>{translated.cfbdc781}</h2>
<Cell
title={translated.c3a3a1d2}
......@@ -196,6 +334,72 @@ const CalendarDemo = () => {
onClose={closeSwitch3}
onChoose={setChooseValue3}
/>
<Cell
title={translated.a74a1fd4}
desc={
date1
? `${date5[0]}${translated['8dab2f66']}${date5[1]}`
: translated.b840c88f
}
onClick={openSwitch5}
/>
<Calendar
visible={isVisible5}
defaultValue={date5}
type="range"
isAutoBackFill
startDate="2019-12-22"
endDate="2021-01-08"
onClose={closeSwitch5}
onChoose={setChooseValue5}
onSelected={select}
/>
<h2>{translated.d04fcbda}</h2>
<Cell
title={translated['60a53514']}
desc={
date6
? `${date6[0]}${translated['8dab2f66']}${date6[1]}`
: translated.b840c88f
}
onClick={openSwitch6}
/>
<Calendar
visible={isVisible6}
defaultValue={date6}
type="range"
startDate="2019-12-22"
endDate="2021-01-08"
confirmText="submit"
startText="enter"
endText="leave"
onDay={onDay}
onBottomInfo={onBottomInfo}
onClose={closeSwitch6}
onChoose={setChooseValue6}
/>
<Cell
title={translated['0aaad620']}
desc={
date7
? `${date7[0]}${translated['8dab2f66']}${date7[1]}`
: translated.b840c88f
}
onClick={openSwitch7}
/>
<Calendar
ref={calendarRef}
visible={isVisible7}
defaultValue={date7}
type="range"
startDate="2021-12-22"
endDate="2022-12-31"
onBtn={onBtn}
onClose={closeSwitch7}
onChoose={setChooseValue7}
/>
<h2>{translated.e51e4582}</h2>
<div
className="test-calendar-wrapper"
......
src/packages/calendar/doc.en-US.md
浏览文件 @ 2f84540b
......@@ -42,8 +42,8 @@ const App = () => {
<Calendar
visible={ isVisible }
defaultValue={ date }
startDate="2019-10-11"
endDate="2029-11-11"
startDate="2022-01-11"
endDate="2029-11-30"
onClose={ closeSwitch }
onChoose={ setChooseValue }
/>
......@@ -98,7 +98,50 @@ export default App;
```
:::
### Custom Calendar - Auto Backfill
### select multiple dates
:::demo
```tsx
import React, { useState } from "react";
import { Cell, Calendar } from '@nutui/nutui-react';
const App = () => {
const [date3, setDate3] = useState('')
const [isVisible3, setIsVisible3] = useState(false)
const openSwitch3 = () => {
setIsVisible3(true)
}
const closeSwitch3 = () => {
setIsVisible3(false)
}
const setChooseValue3 = (param: string) => {
setDate3(param[3])
}
return (
<>
<Cell title="select multiple dates" desc={ date3 && date3.length ? `chosen${date3.length}` : 'please choose' } onClick={ openSwitch3 } />
<Calendar
visible={isVisible3}
defaultValue={date3}
type="multiple"
startDate="2022-01-01"
endDate="2022-09-10"
onClose={closeSwitch3}
onChoose={setChooseValue3}
/>
</>
);
};
export default App;
```
:::
### quick selection
:::demo
```tsx
......@@ -125,14 +168,219 @@ const App = () => {
<>
<Cell title="select date" desc={ date3 ? `${date3}` : 'please choose' } onClick={ openSwitch3 } />
<Calendar
visible={ isVisible3 }
defaultValue={ date3 }
visible={isVisible3}
defaultValue={date3}
isAutoBackFill
startDate=""
endDate=""
isAutoBackFill
onClose={ closeSwitch3 }
onChoose={ setChooseValue3 }
/>
onClose={closeSwitch3}
onChoose={setChooseValue3}
/>
</>
);
};
export default App;
```
:::
### Custom Calendar - Custom Time Copy
:::demo
```tsx
import React, { useState } from "react";
import { Cell, Calendar } from '@nutui/nutui-react';
interface Day {
day: string | number;
type: string;
}
const App = () => {
const [date3, setDate3] = useState('')
const [isVisible3, setIsVisible3] = useState(false)
const openSwitch3 = () => {
setIsVisible3(true)
}
const closeSwitch3 = () => {
setIsVisible3(false)
}
const setChooseValue3 = (param: string) => {
setDate3([...[param[0][3], param[1][3]]])
}
const onDay = (date: Day) => {
return (
<span>{ date.day <= 9 ? `0${ date.day}` : date.day }</span>
)
}
const onBottomInfo = (date: Day) => {
return (
<span className="info" style={{ fontSize: '12px', lineHeight: '14px' }}>{
date ? (date.day <= 10 ? '' : date.day <= 20 ? 'mid' : '') : ''
}</span>
)
}
return (
<>
<Cell title="select date" desc={ date3 ? `${date3[0]}to${date3[1]}` : 'please choose' } onClick={ openSwitch3 } />
<Calendar
visible={isVisible3}
defaultValue={date3}
type="range"
startDate="2019-12-22"
endDate="2021-01-08"
confirmText="submit"
startText="enter"
endText="leave"
onDay={ onDay }
onBottomInfo={ onBottomInfo }
onClose={closeSwitch3}
onChoose={setChooseValue3}
/>
</>
);
};
export default App;
```
:::
### Custom Calendar - Custom Button
:::demo
```tsx
import React, { useState, useRef } from "react";
import { Cell, Calendar } from '@nutui/nutui-react';
const Utils = {
date2Str(date: Date, split?: string): string {
split = split || '-'
const y = date.getFullYear()
const m = this.getNumTwoBit(date.getMonth() + 1)
const d = this.getNumTwoBit(date.getDate())
return [y, m, d].join(split)
},
getDay(i: number): string {
i = i || 0
let date = new Date()
const diff = i * (1000 * 60 * 60 * 24)
date = new Date(date.getTime() + diff)
return this.date2Str(date)
},
getNumTwoBit(n: number): string {
n = Number(n)
return (n > 9 ? '' : '0') + n
},
date2Str(date: Date, split?: string): string {
split = split || '-'
const y = date.getFullYear()
const m = this.getNumTwoBit(date.getMonth() + 1)
const d = this.getNumTwoBit(date.getDate())
return [y, m, d].join(split)
},
getMonthDays(year: string, month: string): number {
if (/^0/.test(month)) {
month = month.split('')[1]
}
return (
[
0,
31,
this.isLeapYear(Number(year)) ? 29 : 28,
31,
30,
31,
30,
31,
31,
30,
31,
30,
31,
] as number[]
)[month as any]
},
isLeapYear(y: number): boolean {
return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0
},
};
const App = () => {
const [date3, setDate3] = useState('')
const [isVisible3, setIsVisible3] = useState(false)
const calendarRef = useRef<any>(null);
const openSwitch3 = () => {
setIsVisible3(true)
}
const closeSwitch3 = () => {
setIsVisible3(false)
}
const setChooseValue3 = (param: string) => {
setDate3([...[param[0][3], param[1][3]]])
}
const goDate = () => {
if (calendarRef.current) {
calendarRef.current.scrollToDate('2022-04-01');
}
};
const clickBtn = () => {
const date = [Utils.date2Str(new Date()), Utils.getDay(6)];
setDate3(date);
}
const clickBtn1 = () => {
const date = new Date();
const year = date.getFullYear();
let month: any = date.getMonth() + 1;
month = month < 10 ? `0${ month}` : `${month }`;
const yearMonth = `${year}-${month}`;
const currMonthDays = Utils.getMonthDays(`${year }`, `${month }`);
setDate3([`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`]);
}
const onBtn = () => {
return (
<div className="wrapper" style={ { display: 'flex', padding: '0 40px' } }>
<div className="d_div" style={ { margin: '0px 5px' } }>
<span className="d_btn" onClick={ goDate } style={ { background: '#fa3f19', color: '#fff', fontSize: '12px', padding: '2px 8px', borderRadius: '4px', display: 'inline-block', height: '20px' } }>to a certain month</span>
</div>
<div className="d_div" style={ { margin: '0px 5px' } }>
<span className="d_btn" style={ { background: '#fa3f19', color: '#fff', fontSize: '12px', padding: '2px 8px', borderRadius: '4px', display: 'inline-block', height: '20px' } } onClick={ clickBtn }>last seven days</span>
</div>
<div className="d_div" style={ { margin: '0px 5px' } }>
<span className="d_btn" style={ { background: '#fa3f19', color: '#fff', fontSize: '12px', padding: '2px 8px', borderRadius: '4px', display: 'inline-block', height: '20px' } } onClick={ clickBtn1 }>current month</span>
</div>
</div>
)
}
return (
<>
<Cell title="select date" desc={ date3 ? `${date3[0]}to${date3[1]}` : 'please choose' } onClick={ openSwitch3 } />
<Calendar
ref={ calendarRef }
visible={isVisible3}
defaultValue={date3}
type="range"
startDate="2021-12-22"
endDate="2022-12-31"
onBtn={ onBtn }
onClose={closeSwitch3}
onChoose={setChooseValue3}
/>
</>
);
};
......@@ -187,6 +435,17 @@ export default App;
| defaultValue | Default value, select String format for date, select Array format for interval | String 、 Array | null |
| startDate | The start date, or null if the start date is not limited | String | Today |
| endDate | The end date, or null if the end date is not limited | String | 365 days from today |
| showToday | Whether to show today's mark | Boolean | true |
| startText | Scope selection, start message copying | String | ’开始‘ |
| endText | Scope selection, closing message copy | String | ‘结束’ |
| confirmText | Bottom confirm button copy | String | ’确认‘ |
| showTitle | Whether to show the calendar title | Boolean | true |
| showSubTitle | Whether to display the date title | Boolean | true |
| toDateAnimation | Whether to start scroll animation | Boolean | true |
| onBtn | Below the custom calendar header, you can add custom actions | (() => string \| JSX.Element) 、 undefined | - |
| onDay | date information | ((date: Day) => string \| JSX.Element) 、 undefined | - |
| onTopInfo | Date Top Information | ((date: Day) => string \| JSX.Element) 、 undefined | - |
| onBottomInfo | date bottom information | ((date: Day) => string \| JSX.Element) 、 undefined | - |
### Events
......@@ -194,3 +453,10 @@ export default App;
|--------|------------------------------|------------------------------|
| onChoose | Triggered after selection or by clicking the confirm button | Array of dates (including year, month, day and week) |
| onClose | Triggered when closed | - |
| onSelected | Triggered after click/select | Day: Day |
### Day
| Params | Description |
|-------------------|-----------------|
| day | string、number |
| type | string |
src/packages/calendar/doc.md
浏览文件 @ 2f84540b
......@@ -42,8 +42,8 @@ const App = () => {
<Calendar
visible={ isVisible }
defaultValue={ date }
startDate="2019-10-11"
endDate="2029-11-11"
startDate="2022-01-11"
endDate="2029-11-30"
onClose={ closeSwitch }
onChoose={ setChooseValue }
/>
......@@ -98,7 +98,50 @@ export default App;
```
:::
### 自定义日历-自动回填
### 选择多个日期
:::demo
```tsx
import React, { useState } from "react";
import { Cell, Calendar } from '@nutui/nutui-react';
const App = () => {
const [date3, setDate3] = useState('')
const [isVisible3, setIsVisible3] = useState(false)
const openSwitch3 = () => {
setIsVisible3(true)
}
const closeSwitch3 = () => {
setIsVisible3(false)
}
const setChooseValue3 = (param: string) => {
setDate3(param[3])
}
return (
<>
<Cell title="选择多个日期" desc={ date3 && date3.length ? `已选择${date3.length}` : '请选择' } onClick={ openSwitch3 } />
<Calendar
visible={isVisible3}
defaultValue={date3}
type="multiple"
startDate="2022-01-01"
endDate="2022-09-10"
onClose={closeSwitch3}
onChoose={setChooseValue3}
/>
</>
);
};
export default App;
```
:::
### 快捷选择
:::demo
```tsx
......@@ -125,14 +168,219 @@ const App = () => {
<>
<Cell title="选择日期" desc={ date3 ? `${date3}` : '请选择' } onClick={ openSwitch3 } />
<Calendar
visible={ isVisible3 }
defaultValue={ date3 }
visible={isVisible3}
defaultValue={date3}
isAutoBackFill
startDate=""
endDate=""
isAutoBackFill
onClose={ closeSwitch3 }
onChoose={ setChooseValue3 }
/>
onClose={closeSwitch3}
onChoose={setChooseValue3}
/>
</>
);
};
export default App;
```
:::
### 自定义日历-自定义时间文案
:::demo
```tsx
import React, { useState } from "react";
import { Cell, Calendar } from '@nutui/nutui-react';
interface Day {
day: string | number;
type: string;
}
const App = () => {
const [date3, setDate3] = useState('')
const [isVisible3, setIsVisible3] = useState(false)
const openSwitch3 = () => {
setIsVisible3(true)
}
const closeSwitch3 = () => {
setIsVisible3(false)
}
const setChooseValue3 = (param: string) => {
setDate3([...[param[0][3], param[1][3]]])
}
const onDay = (date: Day) => {
return (
<span>{ date.day <= 9 ? `0${ date.day}` : date.day }</span>
)
}
const onBottomInfo = (date: Day) => {
return (
<span className="info" style={{ fontSize: '12px', lineHeight: '14px' }}>{
date ? (date.day <= 10 ? '' : date.day <= 20 ? 'mid' : '') : ''
}</span>
)
}
return (
<>
<Cell title="选择日期" desc={ date3 ? `${date3[0]}至${date3[1]}` : '请选择' } onClick={ openSwitch3 } />
<Calendar
visible={isVisible3}
defaultValue={date3}
type="range"
startDate="2019-12-22"
endDate="2021-01-08"
confirmText="submit"
startText="enter"
endText="leave"
onDay={ onDay }
onBottomInfo={ onBottomInfo }
onClose={closeSwitch3}
onChoose={setChooseValue3}
/>
</>
);
};
export default App;
```
:::
### 自定义日历-自定义按钮
:::demo
```tsx
import React, { useState, useRef } from "react";
import { Cell, Calendar } from '@nutui/nutui-react';
const Utils = {
date2Str(date: Date, split?: string): string {
split = split || '-'
const y = date.getFullYear()
const m = this.getNumTwoBit(date.getMonth() + 1)
const d = this.getNumTwoBit(date.getDate())
return [y, m, d].join(split)
},
getDay(i: number): string {
i = i || 0
let date = new Date()
const diff = i * (1000 * 60 * 60 * 24)
date = new Date(date.getTime() + diff)
return this.date2Str(date)
},
getNumTwoBit(n: number): string {
n = Number(n)
return (n > 9 ? '' : '0') + n
},
date2Str(date: Date, split?: string): string {
split = split || '-'
const y = date.getFullYear()
const m = this.getNumTwoBit(date.getMonth() + 1)
const d = this.getNumTwoBit(date.getDate())
return [y, m, d].join(split)
},
getMonthDays(year: string, month: string): number {
if (/^0/.test(month)) {
month = month.split('')[1]
}
return (
[
0,
31,
this.isLeapYear(Number(year)) ? 29 : 28,
31,
30,
31,
30,
31,
31,
30,
31,
30,
31,
] as number[]
)[month as any]
},
isLeapYear(y: number): boolean {
return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0
},
};
const App = () => {
const [date3, setDate3] = useState('')
const [isVisible3, setIsVisible3] = useState(false)
const calendarRef = useRef<any>(null);
const openSwitch3 = () => {
setIsVisible3(true)
}
const closeSwitch3 = () => {
setIsVisible3(false)
}
const setChooseValue3 = (param: string) => {
setDate3([...[param[0][3], param[1][3]]])
}
const goDate = () => {
if (calendarRef.current) {
calendarRef.current.scrollToDate('2022-04-01');
}
};
const clickBtn = () => {
const date = [Utils.date2Str(new Date()), Utils.getDay(6)];
setDate3(date);
}
const clickBtn1 = () => {
const date = new Date();
const year = date.getFullYear();
let month: any = date.getMonth() + 1;
month = month < 10 ? `0${ month}` : `${month }`;
const yearMonth = `${year}-${month}`;
const currMonthDays = Utils.getMonthDays(`${year }`, `${month }`);
setDate3([`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`]);
}
const onBtn = () => {
return (
<div className="wrapper" style={ { display: 'flex', padding: '0 40px' } }>
<div className="d_div" style={ { margin: '0px 5px' } }>
<span className="d_btn" onClick={ goDate } style={ { background: '#fa3f19', color: '#fff', fontSize: '12px', padding: '2px 8px', borderRadius: '4px', display: 'inline-block', height: '20px' } }>去某个月</span>
</div>
<div className="d_div" style={ { margin: '0px 5px' } }>
<span className="d_btn" style={ { background: '#fa3f19', color: '#fff', fontSize: '12px', padding: '2px 8px', borderRadius: '4px', display: 'inline-block', height: '20px' } } onClick={ clickBtn }>最近七天</span>
</div>
<div className="d_div" style={ { margin: '0px 5px' } }>
<span className="d_btn" style={ { background: '#fa3f19', color: '#fff', fontSize: '12px', padding: '2px 8px', borderRadius: '4px', display: 'inline-block', height: '20px' } } onClick={ clickBtn1 }>当月</span>
</div>
</div>
)
}
return (
<>
<Cell title="选择日期" desc={ date3 ? `${date3[0]}至${date3[1]}` : '请选择' } onClick={ openSwitch3 } />
<Calendar
ref={ calendarRef }
visible={isVisible3}
defaultValue={date3}
type="range"
startDate="2021-12-22"
endDate="2022-12-31"
onBtn={ onBtn }
onClose={closeSwitch3}
onChoose={setChooseValue3}
/>
</>
);
};
......@@ -187,6 +435,17 @@ export default App;
| defaultValue | 默认值，日期选择 String 格式，区间选择 Array 格式 | String 、 Array | null |
| startDate | 开始日期， 如果不限制开始日期传 null | String | 今天 |
| endDate | 结束日期，如果不限制结束日期传 null | String | 距离今天 365 天 |
| showToday | 是否展示今天标记 | Boolean | true |
| startText | 范围选择，开始信息文案 | String | ’开始‘ |
| endText | 范围选择，结束信息文案 | String | ‘结束’ |
| confirmText | 底部确认按钮文案 | String | ’确认‘ |
| showTitle | 是否在展示日历标题 | Boolean | true |
| showSubTitle | 是否展示日期标题 | Boolean | true |
| toDateAnimation | 是否启动滚动动画 | Boolean | true |
| onBtn | 自定义日历标题下部，可用以添加自定义操作 | (() => string \| JSX.Element) 、 undefined | - |
| onDay | 日期信息 | ((date: Day) => string \| JSX.Element) 、 undefined | - |
| onTopInfo | 日期顶部信息 | ((date: Day) => string \| JSX.Element) 、 undefined | - |
| onBottomInfo | 日期底部信息 | ((date: Day) => string \| JSX.Element) 、 undefined | - |
### Events
......@@ -194,3 +453,10 @@ export default App;
|--------|------------------------------|------------------------------|
| onChoose | 选择之后或是点击确认按钮触发 | 日期数组（包含年月日和星期） |
| onClose | 关闭时触发 | - |
| onSelected | 点击/选择后触发 | Day: Day |
### Day
| 字段 | 类型 |
|-------------------|-----------------|
| day | string、number |
| type | string |
src/packages/calendar/doc.zh-TW.md
浏览文件 @ 2f84540b
......@@ -42,8 +42,8 @@ const App = () => {
<Calendar
visible={ isVisible }
defaultValue={ date }
startDate="2019-10-11"
endDate="2029-11-11"
startDate="2022-01-11"
endDate="2029-11-30"
onClose={ closeSwitch }
onChoose={ setChooseValue }
/>
......@@ -98,7 +98,50 @@ export default App;
```
:::
### 自定義日曆-自動回填
### 選擇多個日期
:::demo
```tsx
import React, { useState } from "react";
import { Cell, Calendar } from '@nutui/nutui-react';
const App = () => {
const [date3, setDate3] = useState('')
const [isVisible3, setIsVisible3] = useState(false)
const openSwitch3 = () => {
setIsVisible3(true)
}
const closeSwitch3 = () => {
setIsVisible3(false)
}
const setChooseValue3 = (param: string) => {
setDate3(param[3])
}
return (
<>
<Cell title="選擇多個日期" desc={ date3 && date3.length ? `已選擇${date3.length}` : '請選擇' } onClick={ openSwitch3 } />
<Calendar
visible={isVisible3}
defaultValue={date3}
type="multiple"
startDate="2022-01-01"
endDate="2022-09-10"
onClose={closeSwitch3}
onChoose={setChooseValue3}
/>
</>
);
};
export default App;
```
:::
### 快捷選擇
:::demo
```tsx
......@@ -125,14 +168,219 @@ const App = () => {
<>
<Cell title="選擇日期" desc={ date3 ? `${date3}` : '請選擇' } onClick={ openSwitch3 } />
<Calendar
visible={ isVisible3 }
defaultValue={ date3 }
visible={isVisible3}
defaultValue={date3}
isAutoBackFill
startDate=""
endDate=""
isAutoBackFill
onClose={ closeSwitch3 }
onChoose={ setChooseValue3 }
/>
onClose={closeSwitch3}
onChoose={setChooseValue3}
/>
</>
);
};
export default App;
```
:::
### 自定義日曆-自定義時間文案
:::demo
```tsx
import React, { useState } from "react";
import { Cell, Calendar } from '@nutui/nutui-react';
interface Day {
day: string | number;
type: string;
}
const App = () => {
const [date3, setDate3] = useState('')
const [isVisible3, setIsVisible3] = useState(false)
const openSwitch3 = () => {
setIsVisible3(true)
}
const closeSwitch3 = () => {
setIsVisible3(false)
}
const setChooseValue3 = (param: string) => {
setDate3([...[param[0][3], param[1][3]]])
}
const onDay = (date: Day) => {
return (
<span>{ date.day <= 9 ? `0${ date.day}` : date.day }</span>
)
}
const onBottomInfo = (date: Day) => {
return (
<span className="info" style={{ fontSize: '12px', lineHeight: '14px' }}>{
date ? (date.day <= 10 ? '' : date.day <= 20 ? 'mid' : '') : ''
}</span>
)
}
return (
<>
<Cell title="選擇日期" desc={ date3 ? `${date3[0]}至${date3[1]}` : '請選擇' } onClick={ openSwitch3 } />
<Calendar
visible={isVisible3}
defaultValue={date3}
type="range"
startDate="2019-12-22"
endDate="2021-01-08"
confirmText="submit"
startText="enter"
endText="leave"
onDay={ onDay }
onBottomInfo={ onBottomInfo }
onClose={closeSwitch3}
onChoose={setChooseValue3}
/>
</>
);
};
export default App;
```
:::
### 自定義日曆-自定義按鈕
:::demo
```tsx
import React, { useState, useRef } from "react";
import { Cell, Calendar } from '@nutui/nutui-react';
const Utils = {
date2Str(date: Date, split?: string): string {
split = split || '-'
const y = date.getFullYear()
const m = this.getNumTwoBit(date.getMonth() + 1)
const d = this.getNumTwoBit(date.getDate())
return [y, m, d].join(split)
},
getDay(i: number): string {
i = i || 0
let date = new Date()
const diff = i * (1000 * 60 * 60 * 24)
date = new Date(date.getTime() + diff)
return this.date2Str(date)
},
getNumTwoBit(n: number): string {
n = Number(n)
return (n > 9 ? '' : '0') + n
},
date2Str(date: Date, split?: string): string {
split = split || '-'
const y = date.getFullYear()
const m = this.getNumTwoBit(date.getMonth() + 1)
const d = this.getNumTwoBit(date.getDate())
return [y, m, d].join(split)
},
getMonthDays(year: string, month: string): number {
if (/^0/.test(month)) {
month = month.split('')[1]
}
return (
[
0,
31,
this.isLeapYear(Number(year)) ? 29 : 28,
31,
30,
31,
30,
31,
31,
30,
31,
30,
31,
] as number[]
)[month as any]
},
isLeapYear(y: number): boolean {
return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0
},
};
const App = () => {
const [date3, setDate3] = useState('')
const [isVisible3, setIsVisible3] = useState(false)
const calendarRef = useRef<any>(null);
const openSwitch3 = () => {
setIsVisible3(true)
}
const closeSwitch3 = () => {
setIsVisible3(false)
}
const setChooseValue3 = (param: string) => {
setDate3([...[param[0][3], param[1][3]]])
}
const goDate = () => {
if (calendarRef.current) {
calendarRef.current.scrollToDate('2022-04-01');
}
};
const clickBtn = () => {
const date = [Utils.date2Str(new Date()), Utils.getDay(6)];
setDate3(date);
}
const clickBtn1 = () => {
const date = new Date();
const year = date.getFullYear();
let month: any = date.getMonth() + 1;
month = month < 10 ? `0${ month}` : `${month }`;
const yearMonth = `${year}-${month}`;
const currMonthDays = Utils.getMonthDays(`${year }`, `${month }`);
setDate3([`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`]);
}
const onBtn = () => {
return (
<div className="wrapper" style={ { display: 'flex', padding: '0 40px' } }>
<div className="d_div" style={ { margin: '0px 5px' } }>
<span className="d_btn" onClick={ goDate } style={ { background: '#fa3f19', color: '#fff', fontSize: '12px', padding: '2px 8px', borderRadius: '4px', display: 'inline-block', height: '20px' } }>去某個月</span>
</div>
<div className="d_div" style={ { margin: '0px 5px' } }>
<span className="d_btn" style={ { background: '#fa3f19', color: '#fff', fontSize: '12px', padding: '2px 8px', borderRadius: '4px', display: 'inline-block', height: '20px' } } onClick={ clickBtn }>最近七天</span>
</div>
<div className="d_div" style={ { margin: '0px 5px' } }>
<span className="d_btn" style={ { background: '#fa3f19', color: '#fff', fontSize: '12px', padding: '2px 8px', borderRadius: '4px', display: 'inline-block', height: '20px' } } onClick={ clickBtn1 }>當月</span>
</div>
</div>
)
}
return (
<>
<Cell title="選擇日期" desc={ date3 ? `${date3[0]}至${date3[1]}` : '請選擇' } onClick={ openSwitch3 } />
<Calendar
ref={ calendarRef }
visible={isVisible3}
defaultValue={date3}
type="range"
startDate="2021-12-22"
endDate="2022-12-31"
onBtn={ onBtn }
onClose={closeSwitch3}
onChoose={setChooseValue3}
/>
</>
);
};
......@@ -187,6 +435,17 @@ export default App;
| defaultValue | 默認值，日期選擇 String 格式，區間選擇 Array 格式 | String 、 Array | null |
| startDate | 開始日期， 如果不限制開始日期傳 null | String | 今天 |
| endDate | 結束日期，如果不限制結束日期傳 null | String | 距離今天 365 天 |
| showToday | 是否展示今天標記 | Boolean | true |
| startText | 範圍選擇，開始信息文案 | String | ’开始‘ |
| endText | 範圍選擇，結束信息文案 | String | ‘结束’ |
| confirmText | 底部確認按鈕文案 | String | ’确认‘ |
| showTitle | 是否在展示日曆標題 | Boolean | true |
| showSubTitle | 是否展示日期標題 | Boolean | true |
| toDateAnimation | 是否啟動滾動動畫 | Boolean | true |
| onBtn | 自定義日曆標題下部，可用以添加自定義操作 | (() => string \| JSX.Element) 、 undefined | - |
| onDay | 日期信息 | ((date: Day) => string \| JSX.Element) 、 undefined | - |
| onTopInfo | 日期頂部信息 | ((date: Day) => string \| JSX.Element) 、 undefined | - |
| onBottomInfo | 日期底部信息 | ((date: Day) => string \| JSX.Element) 、 undefined | - |
### Events
......@@ -194,3 +453,10 @@ export default App;
|--------|------------------------------|------------------------------|
| onChoose | 選擇之後或是點擊確認按鈕觸發 | 日期數組（包含年月日和星期） |
| onClose | 關閉時觸發 | - |
| onSelected | 點擊/選擇後觸發 | Day: Day |
### Day
| 字段 | 類型 |
|-------------------|-----------------|
| day | string、number |
| type | string |
src/packages/calendaritem/calendaritem.scss
浏览文件 @ 2f84540b
.nut-calendar {
position: relative;
display: flex;
flex: 1;
height: 518px;
padding-top: 132px;
padding-bottom: 78px;
color: $calendar-base-color;
font-size: $calendar-base-font;
background-color: $white;
overflow: hidden;
&.nut-calendar-tile {
height: 100%;
padding-top: 46px;
padding-bottom: 0;
.nut-calendar-header {
.calendar-title {
font-size: $calendar-base-font;
}
}
}
&.nut-calendar-nofooter {
padding-bottom: 0;
}
// 头部导航
.nut-calendar-header {
position: absolute;
top: -1px;
left: 0;
right: 0;
display: flex;
flex-direction: column;
text-align: center;
padding-top: 1px;
background-color: $white;
z-index: 1;
.calendar-title {
padding-top: 22px;
font-size: $calendar-title-font;
line-height: 25px;
border-radius: 12px 12px 0 0;
}
.calendar-curr-month {
padding: 10px 0 7px;
line-height: 22px;
}
.calendar-weeks {
display: flex;
align-items: center;
justify-content: space-around;
height: 46px;
box-shadow: 0px 4px 10px 0px rgba($color: #000000, $alpha: 0.06);
.calendar-week-item {
&:first-of-type,
&:last-of-type {
color: $calendar-primary-color;
}
}
}
}
// 月份
.nut-calendar-content {
flex: 1;
.calendar-months-panel {
position: relative;
width: 100%;
height: auto;
display: block;
.calendar-month {
display: flex;
flex-direction: column;
text-align: center;
}
div:nth-of-type(2) {
.calendar-month-title {
padding-top: 0;
}
}
.calendar-loading-tip {
height: 50px;
line-height: 50px;
text-align: center;
position: absolute;
top: -50px;
left: 0;
right: 0;
font-size: $calendar-text-font;
color: $text-color;
}
.calendar-month-title {
height: 23px;
line-height: 23px;
margin: 8px 0;
}
.calendar-month-con {
overflow: hidden;
.calendar-month-item {
.calendar-month-day:nth-child(7n + 0),
.calendar-month-day:nth-child(7n + 1) {
color: $calendar-primary-color;
}
}
.calendar-month-day {
float: left;
width: 14.28%;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
.calendar-day-tip {
position: absolute;
top: 10px;
width: 100%;
font-size: 16px;
line-height: 12px;
color: $calendar-primary-color;
}
&-active {
background-color: $calendar-primary-color;
color: $white !important;
.calendar-curr-tips {
// visibility: hidden;
}
.calendar-day-tip {
color: $white;
}
}
&-disabled {
color: $calendar-disable-color !important;
}
&-choose {
background-color: $calendar-choose-color;
}
.calendar-day {
padding: 4px 0;
font-size: $calendar-day-font;
}
}
}
}
}
// 底部导航
.nut-calendar-footer {
position: absolute;
left: 0;
right: 0;
bottom: -1px;
display: flex;
height: 78px;
width: 100%;
background-color: $white;
.calendar-confirm-btn {
height: 44px;
width: 100%;
margin: 14px 18px;
border-radius: 22px;
background: $button-primary-background-color;
color: $white;
text-align: center;
line-height: 44px;
}
}
}
src/packages/popup/popup.scss
浏览文件 @ 2f84540b
......@@ -94,7 +94,7 @@
max-height: 100%;
overflow-y: auto;
background-color: $white;
transition: transform 0.2s;
transition: transform 0.5s;
-webkit-overflow-scrolling: touch;
}
......
src/styles/variables.scss
浏览文件 @ 2f84540b
......@@ -207,14 +207,23 @@ $toast-cover-bg-color: rgba(0, 0, 0, 0) !default;
$backtop-border-color: #e0e0e0;
// calendar
$calendar-primary-color: $primary-color;
$calendar-choose-color: #fef6f6;
$calendar-base-color: #333333;
$calendar-disable-color: #d1d0d0;
$calendar-title-font: $font-size-4;
$calendar-base-font: $font-size-3;
$calendar-text-font: $font-size-1;
$calendar-day-font: 18px;
$calendar-primary-color: $primary-color !default;
$calendar-choose-color: rgba($primary-color, 0.09) !default;
$calendar-choose-font-color: $primary-color !default;
$calendar-base-color: #333333 !default;
$calendar-disable-color: #d1d0d0 !default;
$calendar-base-font: $font-size-3 !default;
$calendar-title-font: $font-size-4 !default;
$calendar-title-font-weight: 500 !default;
$calendar-sub-title-font: $font-size-2 !default;
$calendar-text-font: $font-size-1 !default;
$calendar-day-font: 16px !default;
$calendar-day-active-border-radius: 0px !default;
$calendar-day-width: 14.28% !default;
$calendar-day-height: 64px !default;
$calendar-day-font-weight: 500 !default;
$calendar-day67-font-color: $primary-color !default;
$calendar-top-slot-height: 24px !default;
//overlay
$overlay-bg-color: rgba(0, 0, 0, 0.7);
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或