Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui-react
提交
e7424570
N
nutui-react
项目概览
京东前端
/
nutui-react
通知
0
Star
2
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui-react
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
e7424570
编写于
7月 22, 2022
作者:
L
love_forever
提交者:
GitHub
7月 22, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: calendar在线文档接入和国际化支持 (#168)
* feat: popup在线文档接入和国际化支持 * feat: 还原到主项目版本 * feat: calendar在线文档接入和国际化支持
上级
eb96f0c8
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
578 addition
and
337 deletion
+578
-337
src/packages/calendar/demo.tsx
src/packages/calendar/demo.tsx
+105
-17
src/packages/calendar/doc.en-US.md
src/packages/calendar/doc.en-US.md
+166
-115
src/packages/calendar/doc.md
src/packages/calendar/doc.md
+142
-91
src/packages/calendar/doc.zh-TW.md
src/packages/calendar/doc.zh-TW.md
+165
-114
未找到文件。
src/packages/calendar/demo.tsx
浏览文件 @
e7424570
/*
* @Author: your name
* @Date: 2021-12-23 11:15:50
* @LastEditTime: 2021-12-27 10:16:31
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /nutui-react/src/packages/calendar/demo.tsx
*/
import
React
,
{
useState
}
from
'
react
'
import
{
Calendar
}
from
'
./calendar
'
import
{
Cell
}
from
'
@/packages/cell/cell
'
import
{
useTranslate
}
from
'
../../sites/assets/locale
'
interface
T
{
ce5c5446
:
string
c38a08ef
:
string
b840c88f
:
string
a74a1fd4
:
string
'
8dab2f66
'
:
string
cfbdc781
:
string
c3a3a1d2
:
string
e51e4582
:
string
'
7db1a8b2
'
:
string
a52bef0c
:
string
d04fcbda
:
string
'
0aaad620
'
:
string
'
60a53514
'
:
string
b8a453e3
:
string
'
248be9e1
'
:
string
ea3d02f2
:
string
c9e6df49
:
string
'
781b07fd
'
:
string
'
1076d771
'
:
string
'
6ab47cd2
'
:
string
}
const
CalendarDemo
=
()
=>
{
const
[
translated
]
=
useTranslate
<
T
>
({
'
zh-CN
'
:
{
ce5c5446
:
'
基础用法
'
,
c38a08ef
:
'
选择单个日期
'
,
b840c88f
:
'
请选择
'
,
a74a1fd4
:
'
选择日期区间
'
,
'
8dab2f66
'
:
'
至
'
,
cfbdc781
:
'
自定义日历-自动回填
'
,
c3a3a1d2
:
'
选择日期
'
,
e51e4582
:
'
平铺展示
'
,
'
7db1a8b2
'
:
'
禁用状态
'
,
a52bef0c
:
'
加载状态
'
,
d04fcbda
:
'
加载中
'
,
'
0aaad620
'
:
'
按钮尺寸
'
,
'
60a53514
'
:
'
收藏
'
,
b8a453e3
:
'
大号按钮
'
,
'
248be9e1
'
:
'
普通按钮
'
,
ea3d02f2
:
'
小型按钮
'
,
c9e6df49
:
'
块级元素
'
,
'
781b07fd
'
:
'
自定义颜色
'
,
'
1076d771
'
:
'
单色按钮
'
,
'
6ab47cd2
'
:
'
渐变按钮
'
,
},
'
zh-TW
'
:
{
ce5c5446
:
'
基礎翻譯
'
,
c38a08ef
:
'
選擇日期
'
,
b840c88f
:
'
請選擇
'
,
a74a1fd4
:
'
選擇日期區間
'
,
'
8dab2f66
'
:
'
至
'
,
cfbdc781
:
'
自定義日曆-自動回填
'
,
c3a3a1d2
:
'
選擇日期
'
,
e51e4582
:
'
平鋪展示
'
,
'
7db1a8b2
'
:
'
禁用狀態
'
,
a52bef0c
:
'
載入狀態
'
,
d04fcbda
:
'
載入中
'
,
'
0aaad620
'
:
'
按鈕尺寸
'
,
'
60a53514
'
:
'
收藏
'
,
b8a453e3
:
'
大號按鈕
'
,
'
248be9e1
'
:
'
普通按鈕
'
,
ea3d02f2
:
'
小型按鈕
'
,
c9e6df49
:
'
塊級元素
'
,
'
781b07fd
'
:
'
自定義顏色
'
,
'
1076d771
'
:
'
單色按鈕
'
,
'
6ab47cd2
'
:
'
漸變按鈕
'
,
},
'
en-US
'
:
{
ce5c5446
:
'
Basic usage
'
,
c38a08ef
:
'
select a single date
'
,
b840c88f
:
'
please choose
'
,
a74a1fd4
:
'
Select date range
'
,
'
8dab2f66
'
:
'
to
'
,
cfbdc781
:
'
Custom Calendar - Auto Backfill
'
,
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
'
,
},
})
const
[
date
,
setDate
]
=
useState
(
''
)
const
[
date1
,
setDate1
]
=
useState
([
'
2019-12-23
'
,
'
2019-12-26
'
])
const
[
date2
,
setDate2
]
=
useState
(
'
2020-07-08
'
)
...
...
@@ -65,10 +149,10 @@ const CalendarDemo = () => {
return
(
<>
<
div
className
=
"demo"
>
<
h2
>
基础用法
</
h2
>
<
h2
>
{
translated
.
ce5c5446
}
</
h2
>
<
Cell
title
=
"选择单个日期"
desc
=
{
date
?
`
${
date
}
${
dateWeek
}
`
:
'
请选择
'
}
title
=
{
translated
.
c38a08ef
}
desc
=
{
date
?
`
${
date
}
${
dateWeek
}
`
:
translated
.
b840c88f
}
onClick
=
{
openSwitch
}
/>
<
Calendar
...
...
@@ -80,8 +164,12 @@ const CalendarDemo = () => {
onChoose
=
{
setChooseValue
}
/>
<
Cell
title
=
"选择日期区间"
desc
=
{
date1
?
`
${
date1
[
0
]}
至
${
date1
[
1
]}
`
:
'
请选择
'
}
title
=
{
translated
.
a74a1fd4
}
desc
=
{
date1
?
`
${
date1
[
0
]}${
translated
[
'
8dab2f66
'
]}${
date1
[
1
]}
`
:
translated
.
b840c88f
}
onClick
=
{
openSwitch1
}
/>
<
Calendar
...
...
@@ -93,10 +181,10 @@ const CalendarDemo = () => {
onClose
=
{
closeSwitch1
}
onChoose
=
{
setChooseValue1
}
/>
<
h2
>
自定义日历-自动回填
</
h2
>
<
h2
>
{
translated
.
cfbdc781
}
</
h2
>
<
Cell
title
=
"选择日期"
desc
=
{
date3
?
`
${
date3
}
`
:
'
请选择
'
}
title
=
{
translated
.
c3a3a1d2
}
desc
=
{
date3
?
`
${
date3
}
`
:
translated
.
b840c88f
}
onClick
=
{
openSwitch3
}
/>
<
Calendar
...
...
@@ -108,7 +196,7 @@ const CalendarDemo = () => {
onClose
=
{
closeSwitch3
}
onChoose
=
{
setChooseValue3
}
/>
<
h2
>
平铺展示
</
h2
>
<
h2
>
{
translated
.
e51e4582
}
</
h2
>
<
div
className
=
"test-calendar-wrapper"
style
=
{
{
...
...
src/packages/calendar/doc.en-US.md
浏览文件 @
e7424570
# Calendar
日历
# Calendar
###
介绍
###
introduce
日历,可平铺/弹窗展示
Calendar, tileable/pop-up display
###
安装
###
Install
```
javascript
import
{
Calendar
}
from
'
@nutui/nutui-react
'
;
```
## 代码演示
### 基础用法
```
jsx
<
Cell
title
=
"选择单个日期"
desc
=
{
date
?
`
${
date
}
${
dateWeek
}
`
:
'
请选择
'
}
onClick
=
{
openSwitch
}
></
Cell
>
<
Calendar
visible
=
{
isVisible
}
defaultValue
=
{
date
}
startDate
=
"2019-10-11"
endDate
=
"2029-11-11"
onClose
=
{
closeSwitch
}
onChoose
=
{
setChooseValue
}
></
Calendar
>
```
## code demo
### Basic usage
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Cell
,
Calendar
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
date
,
setDate
]
=
useState
(
''
);
const
[
isVisible
,
setIsVisible
]
=
useState
(
false
);
const
[
dateWeek
,
setDateWeek
]
=
useState
(
''
);
const
openSwitch
=
()
=>
{
setIsVisible
(
true
);
}
const
closeSwitch
=
()
=>
{
setIsVisible
(
false
);
}
const
setChooseValue
=
(
param
:
string
)
=>
{
setDate
(
param
[
3
]);
setDateWeek
(
param
[
4
]);
}
return
(
<>
<
Cell
title
=
"select a single date"
desc
=
{
date
?
`
${
date
}
${
dateWeek
}
`
:
'
please choose
'
}
onClick
=
{
openSwitch
}
></
Cell
>
<
Calendar
visible
=
{
isVisible
}
defaultValue
=
{
date
}
startDate
=
"2019-10-11"
endDate
=
"2029-11-11"
onClose
=
{
closeSwitch
}
onChoose
=
{
setChooseValue
}
></
Calendar
>
</>
);
};
export
default
App
;
### 区间选择
```
jsx
<
Cell
title
=
"选择日期区间"
desc
=
{
date1
?
`
${
date1
[
0
]}
至
${
date1
[
1
]}
`
:
'
请选择
'
}
onClick
=
{
openSwitch1
}
></
Cell
>
<
Calendar
visible
=
{
isVisible1
}
defaultValue
=
{
date1
}
type
=
"range"
startDate
=
"2019-12-22"
endDate
=
"2021-01-08"
onClose
=
{
closeSwitch1
}
onChoose
=
{
setChooseValue1
}
></
Calendar
>
```
:::
### interval selection
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Cell
,
Calendar
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
date1
,
setDate1
]
=
useState
([
'
2019-12-23
'
,
'
2019-12-26
'
])
const
[
isVisible1
,
setIsVisible1
]
=
useState
(
false
)
const
openSwitch1
=
()
=>
{
setIsVisible1
(
true
)
}
const
closeSwitch1
=
()
=>
{
setIsVisible1
(
false
)
}
const
setChooseValue1
=
(
param
:
string
)
=>
{
setDate1
([...[
param
[
0
][
3
],
param
[
1
][
3
]]])
}
return
(
<>
<
Cell
title
=
"Select date range"
desc
=
{
date1
?
`
${
date1
[
0
]}
to
${
date1
[
1
]}
`
:
'
please choose
'
}
onClick
=
{
openSwitch1
}
></
Cell
>
<
Calendar
visible
=
{
isVisible1
}
defaultValue
=
{
date1
}
type
=
"range"
startDate
=
"2019-12-22"
endDate
=
"2021-01-08"
onClose
=
{
closeSwitch1
}
onChoose
=
{
setChooseValue1
}
></
Calendar
>
</>
);
};
export
default
App
;
### 自定义日历-自动回填
```
jsx
<
Cell
title
=
"选择日期"
desc
=
{
date3
?
`
${
date3
}
`
:
'
请选择
'
}
onClick
=
{
openSwitch3
}
></
Cell
>
<
Calendar
visible
=
{
isVisible3
}
defaultValue
=
{
date3
}
startDate
=
""
endDate
=
""
isAutoBackFill
=
{
true
}
onClose
=
{
closeSwitch3
}
onChoose
=
{
setChooseValue3
}
></
Calendar
>
```
:::
### Custom Calendar - Auto Backfill
:::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 date"
desc
=
{
date3
?
`
${
date3
}
`
:
'
please choose
'
}
onClick
=
{
openSwitch3
}
></
Cell
>
<
Calendar
visible
=
{
isVisible3
}
defaultValue
=
{
date3
}
startDate
=
""
endDate
=
""
isAutoBackFill
=
{
true
}
onClose
=
{
closeSwitch3
}
onChoose
=
{
setChooseValue3
}
></
Calendar
>
</>
);
};
export
default
App
;
### 平铺展示
```
jsx
<
div
className
=
"test-calendar-wrapper"
style
=
{
{
display
:
'
flex
'
,
width
:
'
100%
'
,
height
:
'
613px
'
,
overflow
:
'
hidden
'
}
}
>
<
Calendar
poppable
=
{
false
}
defaultValue
=
{
date2
}
isAutoBackFill
onChoose
=
{
setChooseValue2
}
/>
</
div
>
```
:::
```
js
const
[
date
,
setDate
]
=
useState
(
''
);
const
[
date1
,
setDate1
]
=
useState
([
'
2019-12-23
'
,
'
2019-12-26
'
]);
const
[
date2
,
setDate2
]
=
useState
(
'
2020-07-08
'
);
const
[
date3
,
setDate3
]
=
useState
(
''
);
const
[
dateWeek
,
setDateWeek
]
=
useState
(
''
);
const
[
isVisible
,
setIsVisible
]
=
useState
(
false
);
const
[
isVisible1
,
setIsVisible1
]
=
useState
(
false
);
const
[
isVisible3
,
setIsVisible3
]
=
useState
(
false
);
const
openSwitch
=
()
=>
{
setIsVisible
(
true
);
}
const
openSwitch1
=
()
=>
{
setIsVisible1
(
true
);
}
const
openSwitch3
=
()
=>
{
setIsVisible3
(
true
);
}
const
closeSwitch
=
()
=>
{
setIsVisible
(
false
);
}
const
closeSwitch1
=
()
=>
{
setIsVisible1
(
false
);
}
const
closeSwitch3
=
()
=>
{
setIsVisible3
(
false
);
}
const
setChooseValue
=
(
param
:
string
)
=>
{
setDate
(
param
[
3
]);
setDateWeek
(
param
[
4
]);
};
### Tiled display
const
setChooseValue1
=
(
param
:
string
)
=>
{
setDate1
([...[
param
[
0
][
3
],
param
[
1
][
3
]]]);
};
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Calendar
}
from
'
@nutui/nutui-react
'
;
const
setChooseValue2
=
(
param
:
string
)
=>
{
setDate2
(
param
[
3
]);
console
.
log
(
param
[
3
]);
const
App
=
()
=>
{
const
[
date2
,
setDate2
]
=
useState
(
'
2020-07-08
'
)
const
setChooseValue2
=
(
param
:
string
)
=>
{
setDate2
(
param
[
3
])
}
return
(
<>
<
div
className
=
"test-calendar-wrapper"
style
=
{
{
display
:
'
flex
'
,
width
:
'
100%
'
,
height
:
'
613px
'
,
overflow
:
'
hidden
'
}
}
>
<
Calendar
poppable
=
{
false
}
defaultValue
=
{
date2
}
isAutoBackFill
onChoose
=
{
setChooseValue2
}
/>
</
div
>
</>
);
};
export
default
App
;
const
setChooseValue3
=
(
param
:
string
)
=>
{
setDate3
(
param
[
3
]);
};
```
:::
## API
### Props
|
字段 | 说明 | 类型 | 默认值
|
|
Params | Description | Type | Default
|
|-------------------|---------------------------------------------------|-----------------|-----------------|
| visible |
是否可见
| Boolean | false |
| type |
类型,日期选择'one',区间选择'range'
| String | 'one' |
| poppable |
是否弹窗状态展示
| Boolean | true |
| isAutoBackFill |
自动回填
| Boolean | false |
| title |
显示标题 | String | ‘日期选择
’ |
| defaultValue |
默认值,日期选择 String 格式,区间选择 Array 格式
| String 、 Array | null |
| startDate |
开始日期, 如果不限制开始日期传 null | String | 今天
|
| endDate |
结束日期,如果不限制结束日期传 null | String | 距离今天 365 天
|
| visible |
Is it visible
| Boolean | false |
| type |
Type, select 'one' for date and 'range' for interval
| String | 'one' |
| poppable |
Whether to display the pop-up window status
| Boolean | true |
| isAutoBackFill |
Automatic backfill
| Boolean | false |
| title |
show title | String | ‘Date Pick
’ |
| 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
|
### Events
|
事件名 | 说明 | 回调参数
|
|
Events | Description | callback parameter
|
|--------|------------------------------|------------------------------|
| onChoose |
选择之后或是点击确认按钮触发 | 日期数组(包含年月日和星期)
|
| onClose |
关闭时触发
| - |
| onChoose |
Triggered after selection or by clicking the confirm button | Array of dates (including year, month, day and week)
|
| onClose |
Triggered when closed
| - |
src/packages/calendar/doc.md
浏览文件 @
e7424570
...
...
@@ -14,113 +14,164 @@ import { Calendar } from '@nutui/nutui-react';
### 基础用法
```
jsx
<
Cell
title
=
"选择单个日期"
desc
=
{
date
?
`
${
date
}
${
dateWeek
}
`
:
'
请选择
'
}
onClick
=
{
openSwitch
}
></
Cell
>
<
Calendar
visible
=
{
isVisible
}
defaultValue
=
{
date
}
startDate
=
"2019-10-11"
endDate
=
"2029-11-11"
onClose
=
{
closeSwitch
}
onChoose
=
{
setChooseValue
}
></
Calendar
>
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Cell
,
Calendar
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
date
,
setDate
]
=
useState
(
''
);
const
[
isVisible
,
setIsVisible
]
=
useState
(
false
);
const
[
dateWeek
,
setDateWeek
]
=
useState
(
''
);
const
openSwitch
=
()
=>
{
setIsVisible
(
true
);
}
const
closeSwitch
=
()
=>
{
setIsVisible
(
false
);
}
const
setChooseValue
=
(
param
:
string
)
=>
{
setDate
(
param
[
3
]);
setDateWeek
(
param
[
4
]);
}
return
(
<>
<
Cell
title
=
"选择单个日期"
desc
=
{
date
?
`
${
date
}
${
dateWeek
}
`
:
'
请选择
'
}
onClick
=
{
openSwitch
}
></
Cell
>
<
Calendar
visible
=
{
isVisible
}
defaultValue
=
{
date
}
startDate
=
"2019-10-11"
endDate
=
"2029-11-11"
onClose
=
{
closeSwitch
}
onChoose
=
{
setChooseValue
}
></
Calendar
>
</>
);
};
export
default
App
;
```
:::
### 区间选择
```
jsx
<
Cell
title
=
"选择日期区间"
desc
=
{
date1
?
`
${
date1
[
0
]}
至
${
date1
[
1
]}
`
:
'
请选择
'
}
onClick
=
{
openSwitch1
}
></
Cell
>
<
Calendar
visible
=
{
isVisible1
}
defaultValue
=
{
date1
}
type
=
"range"
startDate
=
"2019-12-22"
endDate
=
"2021-01-08"
onClose
=
{
closeSwitch1
}
onChoose
=
{
setChooseValue1
}
></
Calendar
>
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Cell
,
Calendar
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
date1
,
setDate1
]
=
useState
([
'
2019-12-23
'
,
'
2019-12-26
'
])
const
[
isVisible1
,
setIsVisible1
]
=
useState
(
false
)
const
openSwitch1
=
()
=>
{
setIsVisible1
(
true
)
}
const
closeSwitch1
=
()
=>
{
setIsVisible1
(
false
)
}
const
setChooseValue1
=
(
param
:
string
)
=>
{
setDate1
([...[
param
[
0
][
3
],
param
[
1
][
3
]]])
}
return
(
<>
<
Cell
title
=
"选择日期区间"
desc
=
{
date1
?
`
${
date1
[
0
]}
至
${
date1
[
1
]}
`
:
'
请选择
'
}
onClick
=
{
openSwitch1
}
></
Cell
>
<
Calendar
visible
=
{
isVisible1
}
defaultValue
=
{
date1
}
type
=
"range"
startDate
=
"2019-12-22"
endDate
=
"2021-01-08"
onClose
=
{
closeSwitch1
}
onChoose
=
{
setChooseValue1
}
></
Calendar
>
</>
);
};
export
default
App
;
```
:::
### 自定义日历-自动回填
```
jsx
<
Cell
title
=
"选择日期"
desc
=
{
date3
?
`
${
date3
}
`
:
'
请选择
'
}
onClick
=
{
openSwitch3
}
></
Cell
>
<
Calendar
visible
=
{
isVisible3
}
defaultValue
=
{
date3
}
startDate
=
""
endDate
=
""
isAutoBackFill
=
{
true
}
onClose
=
{
closeSwitch3
}
onChoose
=
{
setChooseValue3
}
></
Calendar
>
```
### 平铺展示
:::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
}
`
:
'
请选择
'
}
onClick
=
{
openSwitch3
}
></
Cell
>
<
Calendar
visible
=
{
isVisible3
}
defaultValue
=
{
date3
}
startDate
=
""
endDate
=
""
isAutoBackFill
=
{
true
}
onClose
=
{
closeSwitch3
}
onChoose
=
{
setChooseValue3
}
></
Calendar
>
</>
);
};
export
default
App
;
```
jsx
<
div
className
=
"test-calendar-wrapper"
style
=
{
{
display
:
'
flex
'
,
width
:
'
100%
'
,
height
:
'
613px
'
,
overflow
:
'
hidden
'
}
}
>
<
Calendar
poppable
=
{
false
}
defaultValue
=
{
date2
}
isAutoBackFill
onChoose
=
{
setChooseValue2
}
/>
</
div
>
```
:::
```
js
const
[
date
,
setDate
]
=
useState
(
''
);
const
[
date1
,
setDate1
]
=
useState
([
'
2019-12-23
'
,
'
2019-12-26
'
]);
const
[
date2
,
setDate2
]
=
useState
(
'
2020-07-08
'
);
const
[
date3
,
setDate3
]
=
useState
(
''
);
const
[
dateWeek
,
setDateWeek
]
=
useState
(
''
);
const
[
isVisible
,
setIsVisible
]
=
useState
(
false
);
const
[
isVisible1
,
setIsVisible1
]
=
useState
(
false
);
const
[
isVisible3
,
setIsVisible3
]
=
useState
(
false
);
const
openSwitch
=
()
=>
{
setIsVisible
(
true
);
}
const
openSwitch1
=
()
=>
{
setIsVisible1
(
true
);
}
const
openSwitch3
=
()
=>
{
setIsVisible3
(
true
);
}
const
closeSwitch
=
()
=>
{
setIsVisible
(
false
);
}
const
closeSwitch1
=
()
=>
{
setIsVisible1
(
false
);
}
const
closeSwitch3
=
()
=>
{
setIsVisible3
(
false
);
}
const
setChooseValue
=
(
param
:
string
)
=>
{
setDate
(
param
[
3
]);
setDateWeek
(
param
[
4
]);
};
### 平铺展示
const
setChooseValue1
=
(
param
:
string
)
=>
{
setDate1
([...[
param
[
0
][
3
],
param
[
1
][
3
]]]);
};
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Calendar
}
from
'
@nutui/nutui-react
'
;
const
setChooseValue2
=
(
param
:
string
)
=>
{
setDate2
(
param
[
3
]);
console
.
log
(
param
[
3
]);
const
App
=
()
=>
{
const
[
date2
,
setDate2
]
=
useState
(
'
2020-07-08
'
)
const
setChooseValue2
=
(
param
:
string
)
=>
{
setDate2
(
param
[
3
])
}
return
(
<>
<
div
className
=
"test-calendar-wrapper"
style
=
{
{
display
:
'
flex
'
,
width
:
'
100%
'
,
height
:
'
613px
'
,
overflow
:
'
hidden
'
}
}
>
<
Calendar
poppable
=
{
false
}
defaultValue
=
{
date2
}
isAutoBackFill
onChoose
=
{
setChooseValue2
}
/>
</
div
>
</>
);
};
export
default
App
;
const
setChooseValue3
=
(
param
:
string
)
=>
{
setDate3
(
param
[
3
]);
};
```
:::
## API
...
...
src/packages/calendar/doc.zh-TW.md
浏览文件 @
e7424570
# Calendar 日
历
# Calendar 日
曆
### 介
绍
### 介
紹
日
历,可平铺/弹
窗展示
日
曆,可平鋪/彈
窗展示
### 安
装
### 安
裝
```
javascript
import
{
Calendar
}
from
'
@nutui/nutui-react
'
;
```
## 代码演示
### 基础用法
```
jsx
<
Cell
title
=
"选择单个日期"
desc
=
{
date
?
`
${
date
}
${
dateWeek
}
`
:
'
请选择
'
}
onClick
=
{
openSwitch
}
></
Cell
>
<
Calendar
visible
=
{
isVisible
}
defaultValue
=
{
date
}
startDate
=
"2019-10-11"
endDate
=
"2029-11-11"
onClose
=
{
closeSwitch
}
onChoose
=
{
setChooseValue
}
></
Calendar
>
```
## 代碼演示
### 基礎用法
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Cell
,
Calendar
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
date
,
setDate
]
=
useState
(
''
);
const
[
isVisible
,
setIsVisible
]
=
useState
(
false
);
const
[
dateWeek
,
setDateWeek
]
=
useState
(
''
);
const
openSwitch
=
()
=>
{
setIsVisible
(
true
);
}
const
closeSwitch
=
()
=>
{
setIsVisible
(
false
);
}
const
setChooseValue
=
(
param
:
string
)
=>
{
setDate
(
param
[
3
]);
setDateWeek
(
param
[
4
]);
}
return
(
<>
<
Cell
title
=
"選擇單個日期"
desc
=
{
date
?
`
${
date
}
${
dateWeek
}
`
:
'
請選擇
'
}
onClick
=
{
openSwitch
}
></
Cell
>
<
Calendar
visible
=
{
isVisible
}
defaultValue
=
{
date
}
startDate
=
"2019-10-11"
endDate
=
"2029-11-11"
onClose
=
{
closeSwitch
}
onChoose
=
{
setChooseValue
}
></
Calendar
>
</>
);
};
export
default
App
;
### 区间选择
```
jsx
<
Cell
title
=
"选择日期区间"
desc
=
{
date1
?
`
${
date1
[
0
]}
至
${
date1
[
1
]}
`
:
'
请选择
'
}
onClick
=
{
openSwitch1
}
></
Cell
>
<
Calendar
visible
=
{
isVisible1
}
defaultValue
=
{
date1
}
type
=
"range"
startDate
=
"2019-12-22"
endDate
=
"2021-01-08"
onClose
=
{
closeSwitch1
}
onChoose
=
{
setChooseValue1
}
></
Calendar
>
```
:::
### 區間選擇
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Cell
,
Calendar
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
date1
,
setDate1
]
=
useState
([
'
2019-12-23
'
,
'
2019-12-26
'
])
const
[
isVisible1
,
setIsVisible1
]
=
useState
(
false
)
const
openSwitch1
=
()
=>
{
setIsVisible1
(
true
)
}
const
closeSwitch1
=
()
=>
{
setIsVisible1
(
false
)
}
const
setChooseValue1
=
(
param
:
string
)
=>
{
setDate1
([...[
param
[
0
][
3
],
param
[
1
][
3
]]])
}
return
(
<>
<
Cell
title
=
"選擇日期區間"
desc
=
{
date1
?
`
${
date1
[
0
]}
至
${
date1
[
1
]}
`
:
'
請選擇
'
}
onClick
=
{
openSwitch1
}
></
Cell
>
<
Calendar
visible
=
{
isVisible1
}
defaultValue
=
{
date1
}
type
=
"range"
startDate
=
"2019-12-22"
endDate
=
"2021-01-08"
onClose
=
{
closeSwitch1
}
onChoose
=
{
setChooseValue1
}
></
Calendar
>
</>
);
};
export
default
App
;
### 自定义日历-自动回填
```
jsx
<
Cell
title
=
"选择日期"
desc
=
{
date3
?
`
${
date3
}
`
:
'
请选择
'
}
onClick
=
{
openSwitch3
}
></
Cell
>
<
Calendar
visible
=
{
isVisible3
}
defaultValue
=
{
date3
}
startDate
=
""
endDate
=
""
isAutoBackFill
=
{
true
}
onClose
=
{
closeSwitch3
}
onChoose
=
{
setChooseValue3
}
></
Calendar
>
```
:::
### 自定義日曆-自動回填
:::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
}
`
:
'
請選擇
'
}
onClick
=
{
openSwitch3
}
></
Cell
>
<
Calendar
visible
=
{
isVisible3
}
defaultValue
=
{
date3
}
startDate
=
""
endDate
=
""
isAutoBackFill
=
{
true
}
onClose
=
{
closeSwitch3
}
onChoose
=
{
setChooseValue3
}
></
Calendar
>
</>
);
};
export
default
App
;
### 平铺展示
```
jsx
<
div
className
=
"test-calendar-wrapper"
style
=
{
{
display
:
'
flex
'
,
width
:
'
100%
'
,
height
:
'
613px
'
,
overflow
:
'
hidden
'
}
}
>
<
Calendar
poppable
=
{
false
}
defaultValue
=
{
date2
}
isAutoBackFill
onChoose
=
{
setChooseValue2
}
/>
</
div
>
```
:::
```
js
const
[
date
,
setDate
]
=
useState
(
''
);
const
[
date1
,
setDate1
]
=
useState
([
'
2019-12-23
'
,
'
2019-12-26
'
]);
const
[
date2
,
setDate2
]
=
useState
(
'
2020-07-08
'
);
const
[
date3
,
setDate3
]
=
useState
(
''
);
const
[
dateWeek
,
setDateWeek
]
=
useState
(
''
);
const
[
isVisible
,
setIsVisible
]
=
useState
(
false
);
const
[
isVisible1
,
setIsVisible1
]
=
useState
(
false
);
const
[
isVisible3
,
setIsVisible3
]
=
useState
(
false
);
const
openSwitch
=
()
=>
{
setIsVisible
(
true
);
}
const
openSwitch1
=
()
=>
{
setIsVisible1
(
true
);
}
const
openSwitch3
=
()
=>
{
setIsVisible3
(
true
);
}
const
closeSwitch
=
()
=>
{
setIsVisible
(
false
);
}
const
closeSwitch1
=
()
=>
{
setIsVisible1
(
false
);
}
const
closeSwitch3
=
()
=>
{
setIsVisible3
(
false
);
}
const
setChooseValue
=
(
param
:
string
)
=>
{
setDate
(
param
[
3
]);
setDateWeek
(
param
[
4
]);
};
### 平鋪展示
const
setChooseValue1
=
(
param
:
string
)
=>
{
setDate1
([...[
param
[
0
][
3
],
param
[
1
][
3
]]]);
};
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Calendar
}
from
'
@nutui/nutui-react
'
;
const
setChooseValue2
=
(
param
:
string
)
=>
{
setDate2
(
param
[
3
]);
console
.
log
(
param
[
3
]);
const
App
=
()
=>
{
const
[
date2
,
setDate2
]
=
useState
(
'
2020-07-08
'
)
const
setChooseValue2
=
(
param
:
string
)
=>
{
setDate2
(
param
[
3
])
}
return
(
<>
<
div
className
=
"test-calendar-wrapper"
style
=
{
{
display
:
'
flex
'
,
width
:
'
100%
'
,
height
:
'
613px
'
,
overflow
:
'
hidden
'
}
}
>
<
Calendar
poppable
=
{
false
}
defaultValue
=
{
date2
}
isAutoBackFill
onChoose
=
{
setChooseValue2
}
/>
</
div
>
</>
);
};
export
default
App
;
const
setChooseValue3
=
(
param
:
string
)
=>
{
setDate3
(
param
[
3
]);
};
```
:::
## API
### Props
| 字段 |
说明 | 类型 | 默认
值 |
| 字段 |
說明 | 類型 | 默認
值 |
|-------------------|---------------------------------------------------|-----------------|-----------------|
| visible | 是否可
见
| Boolean | false |
| type |
类型,日期选择'one',区间选择
'range' | String | 'one' |
| poppable | 是否
弹窗状态
展示 | Boolean | true |
| isAutoBackFill | 自
动
回填 | Boolean | false |
| title |
显示标题 | String | ‘日期选择
’ |
| defaultValue | 默
认值,日期选择 String 格式,区间选择
Array 格式 | String 、 Array | null |
| startDate |
开始日期, 如果不限制开始日期传
null | String | 今天 |
| endDate |
结束日期,如果不限制结束日期传 null | String | 距离
今天 365 天 |
| visible | 是否可
見
| Boolean | false |
| type |
類型,日期選擇'one',區間選擇
'range' | String | 'one' |
| poppable | 是否
彈窗狀態
展示 | Boolean | true |
| isAutoBackFill | 自
動
回填 | Boolean | false |
| title |
顯示標題 | String | ‘日期選擇
’ |
| defaultValue | 默
認值,日期選擇 String 格式,區間選擇
Array 格式 | String 、 Array | null |
| startDate |
開始日期, 如果不限制開始日期傳
null | String | 今天 |
| endDate |
結束日期,如果不限制結束日期傳 null | String | 距離
今天 365 天 |
### Events
| 事件名 | 说明 | 回调参数 |
|--------|------------------------------|------------------------------|
| onChoose |
选择之后或是点击确认按钮触发 | 日期数组
(包含年月日和星期) |
| onClose |
关闭时触发
| - |
| onChoose |
選擇之後或是點擊確認按鈕觸發 | 日期數組
(包含年月日和星期) |
| onClose |
關閉時觸發
| - |
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录