uni-date-selector - npm explorer

$3

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

$3

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

$3

#### 属性
- dateTypes，日期类型，支持 day, week, month, year, total 五种类型，默认是 ['month', 'year', 'total']
``

html

defaultDateType

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



-

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

html



#### 事件

-

change

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

html

js

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



{

	methods:{

		onDateChange(val){

			console.log('onDateChange', val)

		}	

	}

}



#### 工具

组件提供了datePickerHelper组件，包含一些工具方法，其中最常用的是

getTheDateValue

方法，这个一般用于初始化返回值

js

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

	{

		date(){			

			selectedDate: datePickerHelper.getTheDateValue('month')

		}

	}





change参数格式如下

js

{

	"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，比如如果当前查询的是

$3