vue日期控件

<el-form-item label="有效期限" > <el-col :span="6"> <el-form-item> <el-date-picker
type="date" placeholder="选择日期" value-format="yyyy-MM-dd 00:00:00"
v-model="effectiveStartTime" :picker-options="pickerOptionsStart"
></el-date-picker> </el-form-item> </el-col> <el-col class="line"
:span="2">-</el-col> <el-col :span="6"> <el-form-item> <el-date-picker
placeholder="选择日期" value-format="yyyy-MM-dd 00:00:00"
v-model="effectiveEntTime" :picker-options="pickerOptionsEnd"
></el-date-picker> </el-form-item> </el-col> </el-form-item>
以上template视图层
return { effectiveEntTime: "", effectiveEntTime: "", pickerOptionsStart: {
//开始有效期 disabledDate: (time) => { if (this.effectiveEntTime) { return
time.getTime() > new Date(this.effectiveEntTime).getTime(); } }, },
pickerOptionsEnd: { //结束有效期 disabledDate: (time) => { if
(this.effectiveStartTime) { return ( time.getTime() - 3600 * 1000 * 24 < new
Date(this.effectiveStartTime).getTime() - 86400000 || Date.now() - 3600 * 1000
* 24 > time.getTime() ); } }, }, };
script 逻辑层

效果

 

 

• « 上一篇：IC设计行业都有哪些不错的公司（外企篇）
• » 下一篇：java_猜拳小游戏——流之奥义