diff --git a/docs/component/uniui/uni-calendar.md b/docs/component/uniui/uni-calendar.md index 86d65d71cf9b6d892fddbefaa3c9421d808c1670..809cbbdba24722b57a9f4946ece0f322fd614b01 100644 --- a/docs/component/uniui/uni-calendar.md +++ b/docs/component/uniui/uni-calendar.md @@ -1,105 +1,106 @@ - - -:::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 - - - -``` - -### 通过方法打开日历 - -需要设置 `insert` 为 `false` - -```html - - - - -``` - -```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 + + + +``` + +### 通过方法打开日历 + +需要设置 `insert` 为 `false` + +```html + + + + +``` + +```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` 时生效|-| +|change|选择日期|-| + +## 示例 + +::: 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 -``` -> Script +``` +> Script ```vue -``` -> Style +``` +> Style ```vue - -``` -::: - + +``` +::: + [完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/calendar/calendar) \ No newline at end of file