uView Calendar 日历

此组件用于单个选择日期,范围选择日期等,日历被包裹在底部弹起的容器中。

注意: 此组件与Picker 选择器的日期选择模式有一定的重合之处,区别在于本组件为更专业的日期选择场景,能选择日期范围等。 另外Picker组件的日期模式可以配置更多的参数,如时、分、秒等,可以根据不同的使用场景进行选择。

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

  • 通过show绑定一个布尔变量用于打开或收起日历弹窗。
  • 通过mode参数指定选择日期模式,包含单选/多选/范围选择。



copy

#日历模式

  • modesingle只能选择单个日期
  • modemultiple可以选择多个日期
  • moderange可以选择日期范围

#单个日期模式

选择日期后,需要点击底部的确定按钮才能触发回调事件,回调参数为一个数组,有如下属性:

["2021-07-01"]

copy

示例代码:




copy

#多个日期模式

选择日期后,需要点击底部的确定按钮才能触发回调事件,回调参数为一个数组,有如下属性:

 ["2021-07-27", "2021-07-29", "2021-07-30"]

copy

示例代码:




copy

#日期范围模式

此模式用于选择一个日期范围,比如住酒店的入住到离店的日期范围,

此模式的返回参数如下:

["2021-07-27", "2021-07-28", "2021-07-29", "2021-07-30", "2021-07-31"]

copy

示例代码:




copy

#自定义主题颜色

组件可传入color参数,更改组件主题色

示例代码:




copy

#自定义文案

组件可以通过formatter以函数的方式定义日期文案

注意:

微信小程序不支持通过props传递函数参数,所以组件内部暴露了一个setFormatter方法用于设置格式化方法,注意在页面的onReady生命周期获取ref再操作。






copy

#日期最大范围

组件可以通过maxDate定义日期文案






copy

#是否显示农历

组件可以通过showLunar定义是否显示农历






copy

#默认日期

组件可以通过defaultDate定义默认日期





你可能感兴趣的:(vue.js,前端,javascript)