1.1.0 • Published 3 years ago

uni-date-selector v1.1.0

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

简介

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

项目依赖

API说明

属性

<!-- 下面代码初始化了一个支持日和周两种日期类型的组件 -->
<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,比如如果当前查询的是
1.1.0

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago