npm:uni-date-selector

README

简介

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

项目依赖

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

Usage no npm install needed!

README

简介

项目依赖

API说明

属性

事件

工具