代码拉取完成,页面将自动刷新
一个日期选择组件,可以按照日、周、月、年、总的方式来选择时间,选择一种日期类型之后,支持前后查询,比如选择的是日类型,前后查询的切换单位是天,选择的是月,则前后查询额切换的单位是月
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种格式的值:
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。