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

日期选择组件的四种模式及Vue3示例

原创于 2024-11-04 13:27:11 发布 · 332 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

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>