next-date-picker日历选择 日期多选 日期单选 自定义日历组件

https://ext.dcloud.net.cn/plugin?id=12562
日期选择组件

有四种模式:

简单的年月日弹窗选择(mode=“simple”)
日历弹窗选择多个日期(多选)(mode=“multiple”)
日历弹窗选择单个日期(单选)(mode=“single”)
日历弹窗选择区间日期(区间)(mode=“range”)

在这里插入图片描述
示例代码vue3

<template>
    <view>
        <next-date-picker 
            ref="nextDatePickerRef" 
            :mode="mode"
            :isAbleSelectFutureDate="false"
            :defaultDate="dateModel"
            @finishSelectDate="finishSelectDate" 
            :defaultCheckedList="[]">
        </next-date-picker>

        <view style="margin-top: 48rpx;">
            <view @click="show('simple')" class="btn">简单选择模式</view>
            <view @click="show('range')" class="btn">日历区间模式</view>
            <view @click="show('multiple')" class="btn">日历多选模式</view>
            <view @click="show('single')" class="btn">日历单选模式</view>
        </view> 
    </view>
</template>

<script>
    import {ref, unref} from 'vue'
    export default {
        setup() {
            const mode = ref('simple');
            const nextDatePickerRef = ref();
            function show(showType) {
                mode.value = showType;
                nextDatePickerRef.value.open();
            }
            function finishSelectDate(e) {
                console.log("选择了日期:",e);
            }
            const dateModel = ref('2023-5-11')
            return {
                mode,
                show,
                finishSelectDate,
                nextDatePickerRef,
                dateModel
            }
        }
    }
</script>

<style lang="scss">
.btn{
    width: 600rpx;
    margin-left: 74rpx;
    margin-right: 74rpx;
    text-align: center;
    padding: 12rpx;
    background-color: #e49a30;
    color: aliceblue;
    border-radius: 12rpx;
    margin-top: 24rpx;
}
</style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值