在项目开发中,我遇到了日期范围选择器,两种获取当前日期并做处理的写法,这里记录一下。
1、第一个处理就是显示近七天的时间
<DatePicker
v-model="timeList"
type="daterange"
:editable="false"
:clearable="false"
:options="$datePickerOptions"
placeholder="请输入"
style="max-width: 200px"
/>
import { formatTime } from 'comutils' //npm 安装 comutils
import dayjs from 'dayjs' //去官网看怎么安装引入 https://dayjs.fenxianglu.cn/
...
//这里获取的是前6天-当前的日期一共7天的时间范围
//第一种写法
timeList:[
formatTime(new Date().getTime() - 6 * 24 * 60 * 60 * 1000, 'yyyy-MM-dd'),
formatTime(new Date(), 'yyyy-MM-dd'),
]
//第二种写法
daterange: [dayjs().subtract(6, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
2、第二个处理是能选择的日期范围不能大于今天(即今天以后的日期都不可选)
$datePickerOptions 对应上面的 :options,如果不需要,就用默认的就行。
//在main.js里写
(Vue.prototype.$datePickerOptions = {
disabledDate(date) {
return date && date.valueOf() > Date.now()
},
}),