yuxingu-Miniprogram-dev/uni_modules/next-date-picker

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

参数

可选参数属性列表

参数名	说明	类型	是否必填	默认值	可选值
checkedToady	是否默认选中今日，仅(mode="multiple" 或 mode="single")模式生效	Boolean	否	false	true
defaultCheckedList	默认选中的日期，仅(mode="multiple" 或 mode="single")模式生效	Array	是	[]	-
isAbleSelectFutureDate	是否可以选择未来日期，仅(mode="multiple" 或 mode="single")模式生效	Boolean	否	true	false
showMonthOnCenter	是否在日历中间显示大大的月份数字，仅(mode="multiple" 或 mode="single")模式生效	Boolean	否	true	false
title	日期弹窗的标题	'选择日期'	String	否	选择日期
startDate	(mode="single")简单模式下的开始日期	'1971-01-01'	String	否	''
endDate	(mode="single")简单模式下的结束日期	'2099-12-31'	String	否	''
defaultDate	(mode="single")简单模式下的默认日期	今日的日期	String	否	''
themeColor	组件的主题色，包含选择时的颜色，以及常见文字按钮颜色	'#f9ae3d'	String	否	'#f9ae3d'
mode	组件的模式	mode="multiple"(多选),mode="single"(单选),mode="simple"(简单),mode="range"(区间)	String	否	'simple'

Event 事件

事件名	说明	类型	回调参数
finishSelectDate	菜单收起时返回的筛选结果(例如：['2023-03-11'])	emit	array

Slot 插槽

名称	说明	参数
title	title标题栏插槽	data: {checkedList}(当前选中的数据checkedList)

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