这是用于关于条件查询的日期区间问题,element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定.
1.定义两个表单项(element-ui),picker-options参数可以设置日期选择范围
<el-form-item label="出版日期" prop="startdate">
<el-date-picker v-model="formInline.startdate" :picker-options="pickerOptionsStart" type="date" placeholder="开始" format="yyyy-MM-dd" style="width:150px" />
</el-form-item>
<el-form-item prop="enddate">
<el-date-picker v-model="formInline.enddate" :picker-options="pickerOptionsEnd" type="date" placeholder="结束" format="yyyy-MM-dd" style="width:150px" />
</el-form-item>
2.picker-options的值是一个对象,他的disabledDate属性可以设置禁用日期.
data(){
return{
formInline:{
startdate:'',
enddate:''
}
//开始日期
pickerOptionsStart: {
//需要禁用的日期
disabledDate: time => {
//当结束日期已经选了之后,我们只能选择结束日期之前的,之后的都被禁用
if (this.formInline.enddate != '') {
return (
time.getTime() > Date.now() ||
time.getTime() > this.formInline.enddate /*开始日期要在选择的结束日期之前*/
);
}
//当结束日期没有被选择时,我们可以选择今天之前所有的日期,今天之后的被禁用
return time.getTime() > Date.now() -8.64e6; /*今天及之前*/
}
},
//结束日期
pickerOptionsEnd: {
disabledDate: time => {
if (this.formInline.startdate != '') {
return (
time.getTime() < this.formInline.startdate /*结束日期要在选择的开始日期之后*/
);
}
return time.getTime() > Date.now() - 8.64e6; /*今天及之前*/
}
}
}
}
3.通过前两个步骤我们就已经把日期区间选择好了,但是因为我们所处的时区为东八区,我们向后端发送的日期其实并不是我们选择的时间,为了解决时区的问题,我引入了moment.js,这样就可以将日期变成我们想要的格式。
(1) 首先我们要导入moment依赖
npm i moment -S
(2) 然后引入moment 依赖
import moment from ‘moment’
(3) 最后直接使用就可以了,对了,还有我们的utcOffset(时间差)属性,他是以分钟为单位的时间偏移量。因为我们是东八区,所以我们通过utcOffset属性(标准时间偏移量)加上八个小时,即480分钟,utcOffset(480),后面是我们转成的日期的正确格式。
moment(this.formInline.enddate).utcOffset(480).format('YYYY-MM-DD HH:mm:ss')
关于日期格式的更多知识大家可以通过官方文档进行学习欧!!
https://momentjs.com/docs/#/parsing/string-format/
https://momentjs.com/docs/#/displaying/format/