在使用Mint-UI的时候,使用mt-datetime-picker时间选择组件,需要将选择的时间和当前定义的时间进行比较。
**效果图
**
需求:所选日期不能小于当前日期,且不能大于当期日期15天
代码
<mt-field label="选择日期:" placeholder="请选择截止日期" v-model="data01.Content.AllowedDate" >
<mt-button size="small" type="primary" @click="openPicker" style="font-size:12px">选择日期</mt-button>
<div class="datePicker">
<mt-datetime-picker
type="date"
ref="picker001"
year-format="{value} 年"
month-format="{value} 月"
date-format="{value} 日"
@confirm="handleConfirm001"
:startDate="startDate">
</mt-datetime-picker>
</div>
</mt-field>
/* 日期选择时需要将所选日期进行转换*/
data(){
return{
data:{
},
/*定义组件起始日期*/
startDate: new Date('2020-01-01')
}
},
methods:{
getDate(data002){
//根据时间字符串,得到特定的时间
var dt=new Date(data002);
var year=dt.getFullYear().toString().padStart(2,'0');
var month=(dt.getMonth()+1).toString().padStart(2,'0');
var day=dt.getDate().toString().padStart(2,'0');
return`${year}.${month}.${day}`
/* 功能:给0-9的数字前加0补位*a:需要补位的数字是否有返回值:有*/
},
//在点击组件选择时间以后,点击确定事件里,进行时间的比较
handleConfirm001 (data002) {
var date001 = new Date();
var date2 = new Date(date001); //声明一个当前日期用于比较所选日期
var date3 = date2.setDate(date001.getDate() + 15); //将当前日期加15天并赋值新变量
if (data002 <= date001 ) {
Toast('所选日期不能小于当前日期')
}else if(data002 > date3){
Toast('所选日期不能大于当前日期15天')
}else{
this.data01.Content.AllowedDate = this.getDate(data002);
//获取的时间为时间戳,getdata是自己写的一个转换时间的方法
}
},
}
//
时间比较以后,Toast弹出框所提示的效果