This repository has been archived by the owner on Nov 14, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
18 changed files
with
671 additions
and
24 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .sb-show-main { | ||
| padding: 25px; | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| --- | ||
| title: RangePicker 区间时间选择框 | ||
| date: 2019-07-30 | ||
| --- | ||
|
|
||
| 选定开始时间和结束时间输出时间区间。 | ||
|
|
||
| ## 使用场景 | ||
| 1. 开始时间小于结束时间。 | ||
| 2. 支持选择日期同时支持选择时间，精确到秒级别。 | ||
| 3. 选择日期默认当天后的日期禁止选择。 | ||
| 4. 支持中文、英文。默认可以根据浏览器的 language 切换。也可以通过 lang 指定。 | ||
| 5. 支持区间（3 小时内、1 天内、1 周内、1 月内、3 月内）选择，选择区间会立即关闭选择面板。 | ||
|
|
||
| ## 代码演示 | ||
| 1. 默认展示 | ||
| ```jsx | ||
| () => { | ||
| const [ value, setValue ] = React.useState([]); | ||
| const handleOk = date => setValue(date); | ||
| const [ cValue, setCvalue ] = React.useState([]); | ||
| const handleChange = (date, dataStr) => setCvalue(dataStr); | ||
| return ( | ||
| <div> | ||
| <div>点击选中区间为：{cValue.join(' - ')}</div> | ||
| <div>点击“确定”得到时间：{value.length ? value.map(i => i.format('YYYY-MM-DD HH:mm:ss')).join(' - ') : ''}</div> | ||
| <RangePicker onChange={handleChange} onOk={handleOk} /> | ||
| </div> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| 2. 设置 `lang` 为 `en` 展示为英文 | ||
| ```jsx | ||
| () => { | ||
| function onChange(date, dateString) { | ||
| console.log(date, dateString); | ||
| } | ||
| return <RangePicker onChange={onChange} lang="en" />; | ||
| } | ||
| ``` | ||
|
|
||
| 3. 设置默认时间区间 | ||
| ```jsx | ||
| <RangePicker defaultValue={[moment('2019-02-16 18:01:57'), moment('2019-02-20 18:01:57')]} /> | ||
| ``` | ||
|
|
||
| 4. 设置 `showDuration` 为 `false` 隐藏直接选择区间 | ||
| ```jsx | ||
| <RangePicker showDuration={false} /> | ||
| ``` | ||
|
|
||
| ## API | ||
| ```jsx previewOnly | ||
| <PropTable of="rangePicker" /> | ||
| ``` |
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
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
59 changes: 59 additions & 0 deletions
59
src/components/RangePicker/__snapshots__/index.test.tsx.snap
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 |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`RangePicker render show primary without props inject 1`] = ` | ||
| <span | ||
| className="RangePicker form-control" | ||
| onClick={[Function]} | ||
| onKeyDown={[Function]} | ||
| onMouseDown={[Function]} | ||
| onTouchStart={[Function]} | ||
| > | ||
| <span | ||
| className="glyphicon glyphicon-calendar" | ||
| /> | ||
| <input | ||
| placeholder="开始时间" | ||
| readOnly={true} | ||
| tabIndex={-1} | ||
| value="" | ||
| /> | ||
| <span> | ||
| 至 | ||
| </span> | ||
| <input | ||
| placeholder="结束时间" | ||
| readOnly={true} | ||
| tabIndex={-1} | ||
| value="" | ||
| /> | ||
| </span> | ||
| `; | ||
|
|
||
| exports[`RangePicker render show with en lang 1`] = ` | ||
| <span | ||
| className="RangePicker form-control" | ||
| onClick={[Function]} | ||
| onKeyDown={[Function]} | ||
| onMouseDown={[Function]} | ||
| onTouchStart={[Function]} | ||
| > | ||
| <span | ||
| className="glyphicon glyphicon-calendar" | ||
| /> | ||
| <input | ||
| placeholder="Start time" | ||
| readOnly={true} | ||
| tabIndex={-1} | ||
| value="" | ||
| /> | ||
| <span> | ||
| To | ||
| </span> | ||
| <input | ||
| placeholder="End time" | ||
| readOnly={true} | ||
| tabIndex={-1} | ||
| value="" | ||
| /> | ||
| </span> | ||
| `; |
Oops, something went wrong.