# next-date-picker
日期选择组件

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

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

### 如果有使用问题请加群

注意：如果插件问题，请务必给一个完整的复现demo，谢谢配合；
[点击链接加入群聊前端开发（uniapp插件）】](https://qm.qq.com/q/S1bJzQfJAG)

### 预览

***

|                 						功能预览                  			                |                    						区间选择模式                              		 |
| :---------------------------------------------------------------------:   | :-------------------------------------------------------------------------:|
| ![](https://lixueshiaa.github.io/webtest/www/static/next-date-picker.gif) |![](https://lixueshiaa.github.io/webtest/www/static/next-date-picker-h.gif) |

## 依赖插件
1. [uni-popup](https://ext.dcloud.net.cn/plugin?id=329)
2. [uni-icons](https://ext.dcloud.net.cn/plugin?id=28)

## 参数
可选参数属性列表

|参数名				|说明																																																						|类型		|是否必填	|默认值		|可选值	|
|----					|----																																																						|----		|----			|----			|----		|
|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>

```