uni-ui组件库_日历-【官方】百战程序员_IT在线教育培训机构

温馨提示
date属性传入的应该是一个 String ，如： 2023-06-27 ，而不是 new Date()
通过 insert 属性来确定当前的事件是 @change 还是 @confirm 。理应合并为一个事件，但是为了区分模式，现使用两个事件，这里需要注意
弹窗模式下无法阻止后面的元素滚动

属性说明

属性名	类型	默认值	说明
date	String	-	自定义当前时间，默认为今天
lunar	Boolean	false	显示农历
startDate	String	-	日期选择范围-开始日期
endDate	String	-	日期选择范围-结束日期
range	Boolean	false	范围选择
insert	Boolean	true	插入模式,可选值，ture：插入模式；false：弹窗模式；默认为插入模式
clearDate	Boolean	true	弹窗模式是否清空上次选择内容
selected	Array	-	打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]


xxxxxxxxxx
<button @click="open">打开日历</button>
<uni-calendar 
              ref="calendar" 
              :insert="info.insert" 
              :lunar="info.lunar" 
              :date="info.date"
              :range="info.range"
              :start-date="'2022-1-1'"
              :end-date="'2024-1-1'" 
              :selected="info.selected"
              :clearDate="info.clearDate"
              @confirm="confirm"
              @change="change"
              />


xxxxxxxxxx
export default {
    data() {
        return {
            info: {
                lunar: true,
                range: true,
                insert: true,
                clearDate:true,
                selected: [],
                date:"2022-12-14",
            }
        }
    },
    methods: {
        change(e) {
            console.log('change 返回:', e)
            // 模拟动态打卡
            this.info.selected.push({
                date: e.fulldate,
                info: '打卡'
            })
            console.log(this.info.selected)
        },
        open() {
            this.$refs.calendar.open();
        },
        confirm(e) {
            console.log(e)
        }
    }
}

实时效果反馈

1. uni-ui中，使用日历组件，哪个属性可以显示农历：

A date

B lunar

C range

D insert

答案

1=>B

uni-ui组件库简介与引入 uni-ui组件库_商品导航

北京市昌平区回龙观镇南店村综合商业楼2楼226室