简介

一个日期选择组件，可以按照日、周、月、年、总的方式来选择时间，选择一种日期类型之后，支持前后查询，比如选择的是日类型，前后查询的切换单位是天，选择的是月，则前后查询额切换的单位是月

项目依赖

• uview-ui，注意按照uview-ui的npm安装配置方式做好配置，否则无法使用
• moment

API说明

属性

• dateTypes，日期类型，支持 day, week, month, year, total 五种类型，默认是 ['month', 'year', 'total']

<!-- 下面代码初始化了一个支持日和周两种日期类型的组件 -->
<date-selector :dateTypes="['day', 'week']"></date-selector>

• defaultDateType，默认选中的日期类型，支持 day, week, month, year, total 五种类型，如果不传入，则默认选中dateTypes的第一个类型

• defaultDateValue，默认的日期值，比如 defaultDateType设置的是 'month',然后 defaultDateValue可以传入 2021-6-1，则初始显示未 2021年6月

<date-selector :dateTypes="['day', 'week', 'month']" defaultType='month' defaultDateValue="2021-6-1" ></date-selector>

事件

• change，日期值改变时触发，比如在dateType的tab切换时会触发，比如前后查询时会触发，比如直接更改日期时也会触发，

<date-selector @change="onDateChange"></date-selector>

import {dateSelector} from 'uni-date-selector'

{
	methods:{
		onDateChange(val){
			console.log('onDateChange', val)
		}	
	}
}

工具

组件提供了datePickerHelper组件，包含一些工具方法，其中最常用的是getTheDateValue方法，这个一般用于初始化返回值

	import {datePickerHelper} from 'uni-date-selector'
	{
		date(){			
			selectedDate: datePickerHelper.getTheDateValue('month')
		}
	}

change参数格式如下

{
	"dateType": "day",
	"value": "2021-09-23T16:00:00.000Z",
	"startTime": "2021-09-24 00:00:00",
	"endTime": "2021-09-25 00:00:00",
	"chartFormat": "HH:mm",
	"tableFormat": "YYYY-MM-DD HH:mm",
	"year": 2021,
	"month": 9,
	"day": 24
}

这个返回参数提供了当前选择日期的3种格式的值：

• 格式1：
  • value，这个是moment格式数值
• 格式2：startTime, endTime，这是一个范围，可以用于某些需要提供范围的查询api中
• 格式3：year, month, day，如果dateType='year'，则只有year有值，month, day字段都是空的，这可以用于某些只接受year, month, day作为查询条件的api
• 其他参数说明
  • dateType，当前选择的日期类型
  • chartFormat，比如如果当前查询的是