更新记录

1.0.8（2024-10-28） 下载此版本

增加title插槽

1.0.7（2024-09-14） 下载此版本

更新说明

1.0.6（2023-11-29） 下载此版本

增加区间选择模式

平台兼容性

next-date-picker

日期选择组件

有四种模式：

1. 简单的年月日弹窗选择(mode="simple")
2. 日历弹窗选择多个日期（多选）(mode="multiple")
3. 日历弹窗选择单个日期（单选）(mode="single")
4. 日历弹窗选择区间日期（区间）(mode="range")

遇到问题或有建议可以加入QQ群(455948571)反馈
如果觉得组件不错，给五星鼓励鼓励咯！

如果有使用问题请加群

注意：如果插件问题，请务必给一个完整的复现demo，谢谢配合； 点击链接加入群聊前端开发（uniapp插件）】

预览

功能预览	区间选择模式

依赖插件

1. uni-popup
2. uni-icons

参数

可选参数属性列表

Event 事件

Slot 插槽

示例代码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>