-
Notifications
You must be signed in to change notification settings - Fork 319
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: datepicker 支持 onChange 返回 trigger 参数定位事件触发源 (#777)
- Loading branch information
1 parent
8ae42f8
commit b75ca5c
Showing
9 changed files
with
145 additions
and
105 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,58 @@ | ||
| import React, { useState } from 'react'; | ||
| import React, { useState, useMemo } from 'react'; | ||
| import dayjs from 'dayjs'; | ||
| import { DatePicker, DateRangePicker } from 'tdesign-react'; | ||
|
|
||
| export default function YearDatePicker() { | ||
| // 禁用昨天、前天 | ||
| const [disableDate] = useState([dayjs().subtract(1, 'day').format(), dayjs().subtract(2, 'day').format()]); | ||
| // 禁用最近 3 天外的日期 | ||
| const [disableDate2] = useState({ | ||
| before: dayjs().subtract(3, 'day').format(), | ||
| after: dayjs().add(3, 'day').format(), | ||
| }); | ||
| // 明后三天禁用 | ||
| const [disableDate3] = useState({ | ||
| from: dayjs().add(1, 'day').format(), | ||
| to: dayjs().add(3, 'day').format(), | ||
| }); | ||
| // 只可选择最近 5 天内的日期 | ||
| const [disableDate4] = useState({ | ||
| before: dayjs().subtract(5, 'day').format(), | ||
| after: dayjs().add(5, 'day').format(), | ||
| }); | ||
| const [pickDate, setPickDate] = useState(); | ||
|
|
||
| // 禁用所有周六 | ||
| function getDisableDate(date) { | ||
| return dayjs(date).day() === 6; | ||
| } | ||
|
|
||
| function handleChange(value) { | ||
| console.log(value); | ||
| } | ||
| const timePickerProps = useMemo(() => { | ||
| return { | ||
| disableTime: () => { | ||
| if (pickDate === dayjs().format('YYYY-MM-DD')) { | ||
| return { | ||
| hour: [0, 1, 2, 3, 4, 5, 6], | ||
| }; | ||
| } | ||
| return {}; | ||
| }, | ||
| }; | ||
| }, [pickDate]); | ||
|
|
||
| return ( | ||
| <div className="tdesign-demo-block-column"> | ||
| <DatePicker placeholder="禁用昨天、前天" disableDate={disableDate} onChange={handleChange} /> | ||
| <DatePicker placeholder="明后三天禁用" disableDate={disableDate3} onChange={handleChange} /> | ||
| <DatePicker placeholder="禁用所有周六" disableDate={getDisableDate} onChange={handleChange} /> | ||
| <DatePicker placeholder="禁用最近 3 天外的日期" disableDate={disableDate2} onChange={handleChange} /> | ||
| <DateRangePicker placeholder="禁用最近 5 天外的日期" disableDate={disableDate4} onChange={handleChange} /> | ||
| <DatePicker | ||
| placeholder="禁用昨天、前天" | ||
| disableDate={[dayjs().subtract(1, 'day').format(), dayjs().subtract(2, 'day').format()]} | ||
| /> | ||
| <DatePicker | ||
| placeholder="明后三天禁用" | ||
| disableDate={{ | ||
| from: dayjs().add(1, 'day').format(), | ||
| to: dayjs().add(3, 'day').format(), | ||
| }} | ||
| /> | ||
| <DatePicker placeholder="禁用所有周六" disableDate={(date) => dayjs(date).day() === 6} /> | ||
| <DatePicker | ||
| placeholder="禁用最近 3 天外的日期" | ||
| disableDate={{ | ||
| before: dayjs().subtract(3, 'day').format(), | ||
| after: dayjs().add(3, 'day').format(), | ||
| }} | ||
| /> | ||
| <DatePicker | ||
| placeholder="禁用日期精确到时间" | ||
| enableTimePicker | ||
| disableDate={{ before: dayjs().subtract(1, 'day').format() }} | ||
| timePickerProps={timePickerProps} | ||
| onPick={(date) => setPickDate(dayjs(date).format('YYYY-MM-DD'))} | ||
| /> | ||
| <DateRangePicker | ||
| placeholder="禁用最近 5 天外的日期" | ||
| disableDate={{ | ||
| before: dayjs().subtract(5, 'day').format(), | ||
| after: dayjs().add(5, 'day').format(), | ||
| }} | ||
| /> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.