东营做网站seo的,高水平大学建设大学网站,什么叫个人网站软件,网站域名空间管理目录 基本使用
#日历模式
#单个日期模式
#多个日期模式
#日期范围模式
#自定义主题颜色
#自定义文案
#日期最大范围
#是否显示农历
#默认日期 基本使用
通过show绑定一个布尔变量用于打开或收起日历弹窗。通过mode参数指定选择日期模式#xff0c;包含单选/多选/范围…
目录 基本使用
#日历模式
#单个日期模式
#多个日期模式
#日期范围模式
#自定义主题颜色
#自定义文案
#日期最大范围
#是否显示农历
#默认日期 基本使用
通过show绑定一个布尔变量用于打开或收起日历弹窗。通过mode参数指定选择日期模式包含单选/多选/范围选择。
templateviewu-calendar :showshow/u-calendaru-button clickshow true打开/u-button/view
/templatescriptexport default {data() {return {show: false,}}}
/script#日历模式
mode为single只能选择单个日期mode为multiple可以选择多个日期mode为range可以选择日期范围
#单个日期模式
选择日期后需要点击底部的确定按钮才能触发回调事件回调参数为一个数组有如下属性
[2021-07-01]示例代码
templateu-calendar :showshow :modemode confirmconfirm/u-calendar
/templatescriptexport default {data() {return {show: true,mode: single}},methods: {confirm(e) {console.log(e);}}}
/script#多个日期模式
选择日期后需要点击底部的确定按钮才能触发回调事件回调参数为一个数组有如下属性 [2021-07-27, 2021-07-29, 2021-07-30]示例代码
templateu-calendar :showshow :modemode confirmconfirm/u-calendar
/templatescriptexport default {data() {return {show: true,mode: multiple}},methods: {confirm(e) {console.log(e);}}}
/script#日期范围模式
此模式用于选择一个日期范围比如住酒店的入住到离店的日期范围
此模式的返回参数如下
[2021-07-27, 2021-07-28, 2021-07-29, 2021-07-30, 2021-07-31]示例代码
templateu-calendar :showshow :modemode confirmconfirm/u-calendar
/templatescriptexport default {data() {return {show: true,mode: range}},methods: {confirm(e) {console.log(e);}}}
/script#自定义主题颜色
组件可传入color参数更改组件主题色
示例代码
templateu-calendar :showshow color#f56c6c :modemode confirmconfirm/u-calendar
/templatescriptexport default {data() {return {show: true,mode: range}},methods: {confirm(e) {console.log(e);}}}
/script#自定义文案
组件可以通过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;}
/style#日期最大范围
组件可以通过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;}
/style#是否显示农历
组件可以通过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;}
/style#默认日期
组件可以通过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
API
#Props
参数说明类型默认值可选值title标题内容String日期选择-showTitle是否显示标题BooleantruefalseshowSubtitle是否显示副标题Booleantruefalsemode日期类型选择Stringsinglemultiple-可以选择多个日期range-选择日期范围多个月需配合monthNum属性使用startTextmoderange时第一个日期底部的提示文字String开始-endTextmoderange时最后一个日期底部的提示文字String结束-customList自定义列表Array[][]color主题色对底部按钮和选中日期有效String#3c9cff-minDate最小的可选日期Number | String0-maxDate最大可选日期Number | String0-defaultDate默认选中的日期mode为multiple或range是必须为数组格式Array | String | Datenull-maxCountmodemultiple时最多可选多少个日期Number | StringNumber.MAX_SAFE_INTEGER-rowHeight日期行高Number |String56-formatter日期格式化函数(如需兼容微信小程序则只能通过setFormatter方法)Functionnull-showLunar是否显示农历BooleanfalsetrueshowMark是否显示月份背景色BooleantruefalseconfirmText确定按钮的文字String确定-confirmDisabledText确认按钮处于禁用状态时的文字String确定-show是否显示日历弹窗BooleanfalsetruecloseOnClickOverlay是否允许点击遮罩关闭日历 注意关闭事件需要自行处理只会在开启closeOnClickOverlay后点击遮罩层执行close回调Booleanfalsetruereadonly是否为只读状态只读状态下禁止选择日期BooleanfalsetruemaxRange日期区间最多可选天数默认无限制mode range时有效Number | String无限制-rangePrompt范围选择超过最多可选天数时的提示文案mode range时有效String | null选择天数不能超过 xx 天-showRangePrompt范围选择超过最多可选天数时是否展示提示文案mode range时有效BooleantruefalseallowSameDay是否允许日期范围的起止时间为同一天mode range时有效Booleanfalsetrueround圆角值默认无圆角String | Number0-monthNum 2.0.17最大展示的月份数量String | Number3-
#Methods
方法名说明setFormatter为兼容微信小程序而暴露的内部方法见上方说明
#Event
事件名说明回调参数confirm日期选择完成后触发若show-confirm为true则点击确认按钮后触发选择日期相关的返回参数close日历关闭时触发可定义页面关闭时的回调事件
