免费看电视剧的网站有哪些,福田网站建设费用明细,有什么网站可以做微信支付宝支付,电子商务网站建设下载此组件用于单个选择日期#xff0c;范围选择日期等#xff0c;日历被包裹在底部弹起的容器中。
注意#xff1a; 此组件与Picker 选择器的日期选择模式有一定的重合之处#xff0c;区别在于本组件为更专业的日期选择场景#xff0c;能选择日期范围等。 另外Picker组件的日…此组件用于单个选择日期范围选择日期等日历被包裹在底部弹起的容器中。
注意 此组件与Picker 选择器的日期选择模式有一定的重合之处区别在于本组件为更专业的日期选择场景能选择日期范围等。 另外Picker组件的日期模式可以配置更多的参数如时、分、秒等可以根据不同的使用场景进行选择。
#平台差异说明
AppvueAppnvueH5小程序√√√√
#基本使用
通过show绑定一个布尔变量用于打开或收起日历弹窗。通过mode参数指定选择日期模式包含单选/多选/范围选择。
templateviewu-calendar :showshow/u-calendaru-button clickshow true打开/u-button/view
/templatescriptexport default {data() {return {show: false,}}}
/scriptcopy
#日历模式
mode为single只能选择单个日期mode为multiple可以选择多个日期mode为range可以选择日期范围
#单个日期模式
选择日期后需要点击底部的确定按钮才能触发回调事件回调参数为一个数组有如下属性
[2021-07-01]copy
示例代码
templateu-calendar :showshow :modemode confirmconfirm/u-calendar
/templatescriptexport default {data() {return {show: true,mode: single}},methods: {confirm(e) {console.log(e);}}}
/scriptcopy
#多个日期模式
选择日期后需要点击底部的确定按钮才能触发回调事件回调参数为一个数组有如下属性 [2021-07-27, 2021-07-29, 2021-07-30]copy
示例代码
templateu-calendar :showshow :modemode confirmconfirm/u-calendar
/templatescriptexport default {data() {return {show: true,mode: multiple}},methods: {confirm(e) {console.log(e);}}}
/scriptcopy
#日期范围模式
此模式用于选择一个日期范围比如住酒店的入住到离店的日期范围
此模式的返回参数如下
[2021-07-27, 2021-07-28, 2021-07-29, 2021-07-30, 2021-07-31]copy
示例代码
templateu-calendar :showshow :modemode confirmconfirm/u-calendar
/templatescriptexport default {data() {return {show: true,mode: range}},methods: {confirm(e) {console.log(e);}}}
/scriptcopy
#自定义主题颜色
组件可传入color参数更改组件主题色
示例代码
templateu-calendar :showshow color#f56c6c :modemode confirmconfirm/u-calendar
/templatescriptexport default {data() {return {show: true,mode: range}},methods: {confirm(e) {console.log(e);}}}
/scriptcopy
#自定义文案
组件可以通过formatter以函数的方式定义日期文案
注意
微信小程序不支持通过props传递函数参数所以组件内部暴露了一个setFormatter方法用于设置格式化方法注意在页面的onReady生命周期获取ref再操作。
templateu-calendar startText住店endText离店confirmDisabledText请选择离店日期:formatterformatter:showshow :modemode confirmconfirmrefcalendar/u-calendar
/templatescriptexport default {data() {return {show: true,mode: range}},onReady() {// 如果需要兼容微信小程序的话需要用此写法this.$refs.calendar.setFormatter(this.formatter)},methods: {confirm(e) {console.log(e);},formatter(day) {const d new Date()let month d.getMonth() 1const date d.getDate()if(day.month month day.day date 3){day.bottomInfo 有优惠day.dot true}return day}}}
/scriptstyle langscss scoped.title{color: $u-primary;text-align: center;padding: 20rpx 0 0 0;}
/stylecopy
#日期最大范围
组件可以通过maxDate定义日期文案
templateu-calendar :maxDatemaxDate:showshow confirmconfirm/u-calendar
/templatescriptconst d new Date()const year d.getFullYear()let month d.getMonth() 1month month 10 ? 0${month} : monthconst date d.getDate()export default {data() {return {show: true,maxDate: ${year}-${month}-${date 10},}},methods: {confirm(e) {console.log(e);},}}
/scriptstyle langscss scoped.title{color: $u-primary;text-align: center;padding: 20rpx 0 0 0;}
/stylecopy
#是否显示农历
组件可以通过showLunar定义是否显示农历
templateu-calendar showLunar:showshow confirmconfirm/u-calendar
/templatescriptexport default {data() {return {show: true,}},methods: {confirm(e) {console.log(e);},}}
/scriptstyle langscss scoped.title{color: $u-primary;text-align: center;padding: 20rpx 0 0 0;}
/stylecopy
#默认日期
组件可以通过defaultDate定义默认日期
templateu-calendar :defaultDatedefaultDateMultiple:showshow modemultipleconfirmconfirm/u-calendar
/templatescriptconst d new Date()const year d.getFullYear()let month d.getMonth() 1month month 10 ? 0${month} : monthconst date d.getDate()export default {data() {return {show: true,defaultDateMultiple: [${year}-${month}-${date}, ${year}-${month}-${date 1}, ${year}-${month}-${date 2}],}},methods: {confirm(e) {console.log(e);},}}
/scriptstyle langscss scoped.title{color: $u-primary;text-align: center;padding: 20rpx 0 0 0;}
/style
