Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
57568c04
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3598
Star
108
Fork
921
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
120
列表
看板
标记
里程碑
合并请求
109
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
120
Issue
120
列表
看板
标记
里程碑
合并请求
109
合并请求
109
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
57568c04
编写于
1月 24, 2024
作者:
H
HRK
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix 更正uni-calendar文档
上级
50f137d3
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
110 addition
and
110 deletion
+110
-110
docs/component/uniui/uni-calendar.md
docs/component/uniui/uni-calendar.md
+110
-110
未找到文件。
docs/component/uniui/uni-calendar.md
浏览文件 @
57568c04
:::tip 组件名:uni-calendar
> 代码块: `uCalendar`
[
点击下载&安装
](
https://ext.dcloud.net.cn/plugin?name=uni-calendar
)
:::
日历组件可以查看日期,选择任意范围内的日期,打点操作。常用场景如:酒店日期预订、火车机票选择购买日期、上下班打卡等。
## 介绍
::: warning 注意事项
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
-
本组件农历转换使用的js是
[
@1900-2100区间内的公历、农历互转
](
https://github.com/jjonline/calendar.js
)
-
`date`
属性传入的应该是一个 String ,如: 2019-06-27 ,而不是 new Date()
-
通过
`insert`
属性来确定当前的事件是 @change 还是 @confirm 。理应合并为一个事件,但是为了区分模式,现使用两个事件,这里需要注意
-
弹窗模式下无法阻止后面的元素滚动,如有需要阻止,请在弹窗弹出后,手动设置滚动元素为不可滚动
:::
### 基本用法
在
``template``
中使用组件
```
html
<view>
<uni-calendar
:insert=
"true"
:lunar=
"true"
:start-date=
"'2019-3-2'"
:end-date=
"'2019-5-20'"
@
change=
"change"
/>
</view>
```
### 通过方法打开日历
需要设置
`insert`
为
`false`
```
html
<view>
<uni-calendar
ref=
"calendar"
:insert=
"false"
@
confirm=
"confirm"
/>
<button
@
click=
"open"
>
打开日历
</button>
</view>
```
```
javascript
export
default
{
data
()
{
return
{};
},
methods
:
{
open
(){
this
.
$refs
.
calendar
.
open
();
},
confirm
(
e
)
{
console
.
log
(
e
);
}
}
};
```
## API
### Calendar Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|date|String|-|自定义当前时间,默认为今天|
| lunar|Boolean| false | 显示农历|
| startDate |String|-| 日期选择范围-开始日期|
| endDate|String|-| 日期选择范围-结束日期|
| range|Boolean|false| 范围选择|
| insert|Boolean|false| 插入模式,可选值,ture:插入模式;false:弹窗模式;默认为插入模式|
|clearDate|Boolean|true|弹窗模式是否清空上次选择内容|
| selected|Array|-| 打点,期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]|
|showMonth |Boolean|true| 是否显示月份为背景|
### Calendar
Events
|
事件名|说明|返回值|
|:-:|:-:|:-:|
|open|弹出日历组件,
`insert :false`
时生效|-|
## 示例
::: warning 注意
示例依赖了
`uni-card`
`uni-section`
`uni-scss`
等多个组件,直接拷贝示例代码将无法正常运行 。
请到
[
组件下载页面
](
https://ext.dcloud.net.cn/plugin?name=uni-calendar
)
,在页面右侧选择
`使用 HBuilderX导入示例项目`
,体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar
> Template
```
vue
:::tip 组件名:uni-calendar
> 代码块: `uCalendar`
[
点击下载&安装
](
https://ext.dcloud.net.cn/plugin?name=uni-calendar
)
:::
日历组件可以查看日期,选择任意范围内的日期,打点操作。常用场景如:酒店日期预订、火车机票选择购买日期、上下班打卡等。
## 介绍
::: warning 注意事项
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
-
本组件农历转换使用的js是
[
@1900-2100区间内的公历、农历互转
](
https://github.com/jjonline/calendar.js
)
-
`date`
属性传入的应该是一个 String ,如: 2019-06-27 ,而不是 new Date()
-
通过
`insert`
属性来确定当前的事件是 @change 还是 @confirm 。理应合并为一个事件,但是为了区分模式,现使用两个事件,这里需要注意
-
弹窗模式下无法阻止后面的元素滚动,如有需要阻止,请在弹窗弹出后,手动设置滚动元素为不可滚动
:::
### 基本用法
在
``template``
中使用组件
```
html
<view>
<uni-calendar
:insert=
"true"
:lunar=
"true"
:start-date=
"'2019-3-2'"
:end-date=
"'2019-5-20'"
@
change=
"change"
/>
</view>
```
### 通过方法打开日历
需要设置
`insert`
为
`false`
```
html
<view>
<uni-calendar
ref=
"calendar"
:insert=
"false"
@
confirm=
"confirm"
/>
<button
@
click=
"open"
>
打开日历
</button>
</view>
```
```
javascript
export
default
{
data
()
{
return
{};
},
methods
:
{
open
(){
this
.
$refs
.
calendar
.
open
();
},
confirm
(
e
)
{
console
.
log
(
e
);
}
}
};
```
## API
### Calendar Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|date|String|-|自定义当前时间,默认为今天|
| lunar|Boolean| false | 显示农历|
| startDate |String|-| 日期选择范围-开始日期|
| endDate|String|-| 日期选择范围-结束日期|
| range|Boolean|false| 范围选择|
| insert|Boolean|false| 插入模式,可选值,ture:插入模式;false:弹窗模式;默认为插入模式|
|clearDate|Boolean|true|弹窗模式是否清空上次选择内容|
| selected|Array|-| 打点,期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]|
|showMonth |Boolean|true| 是否显示月份为背景|
### Calendar
Methods
|
方法名|说明|返回值|
|:-:|:-:|:-:|
|open|弹出日历组件,
`insert :false`
时生效|-|
## 示例
::: warning 注意
示例依赖了
`uni-card`
`uni-section`
`uni-scss`
等多个组件,直接拷贝示例代码将无法正常运行 。
请到
[
组件下载页面
](
https://ext.dcloud.net.cn/plugin?name=uni-calendar
)
,在页面右侧选择
`使用 HBuilderX导入示例项目`
,体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar
> Template
```
vue
<
template
>
<view
class=
"calendar-content"
v-if=
"showCalendar"
>
<text
class=
"example-info"
>
日历组件可以查看日期,选择任意范围内的日期,打点操作。常用场景如:酒店日期预订、火车机票选择购买日期、上下班打卡等。
</text>
...
...
@@ -116,8 +116,8 @@ export default {
:endDate=
"info.endDate"
:range=
"info.range"
@
confirm=
"confirm"
@
close=
"close"
/>
</view>
</
template
>
```
> Script
```
> Script
```
vue
<
script
>
/**
...
...
@@ -211,8 +211,8 @@ export default {
}
}
</
script
>
```
> Style
```
> Style
```
vue
<
style
lang=
"scss"
>
.example-body
{
...
...
@@ -227,8 +227,8 @@ export default {
font-size
:
32rpx
;
}
</
style
>
```
:::
```
:::
[
完整示例演示
](
https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar
)
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录