vue+elementUI日期选择组件
vue+elementUI日期选择组件
·
实现功能如下:
1.日期组件 可选择生效时效输入
2.可控制输入日期为今天到未来
<el-form-item label="生效时间" prop="effectTime">
<el-date-picker
v-model="form.effectTime"
style="width: 240px"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetime"
placeholder="选择日期时间"
**:picker-options="pickerOptions"**
></el-date-picker>
</el-form-item>
<el-form-item label="有效期" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in statusOptions"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}</el-radio
>
</el-radio-group>
<el-date-picker v-model="form.effectEndTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
type="datetime" placeholder="选择日期时间" v-if="this.form.status==1" :picker-options="pickerOptions"></el-date-picker>
</el-form-item>
**js**
data() {
return {
// 设置只能选择当前日期及之后的日期
pickerOptions: {
disabledDate(time) {
//如果没有后面的-8.64e7就是不可以选择今天的
return time.getTime() < Date.now() - 8.64e7;
}
},
}
}
method:
statusOptions: Object.freeze([
{ label: '永久', value: '2' },
{ label: '输入有效期', value: '1' }
]),
实现展示图:
更多推荐
已为社区贡献2条内容
所有评论(0)