用shopify 做网站竞价推广是什么意思
官方的disabledDate属性:设置禁用状态,参数为当前日期,要求返回 Boolean,它只能禁用日期,对于时间并不能直接禁用,总结以下两个方法解决禁用时间:
1.通过watch去监听源数据:
1.1 组件
<el-form-item label="任务时间" prop="time"><el-date-picker:disabledDate="disabledDate"style="width: 100%"v-model="form.time"type="datetimerange"value-format="yyyy-MM-dd HH:mm:ss"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-form-item>
2.2 watch函数来监听数据变化
methods:{//只能禁用日期disabledDate (time) {// 禁止选择当前时间之前的日期return time.getTime() < Date.now() - 24 * 3600 * 1000;},
},
watch:{//禁用时间'form.time'(newVal) {// 如果开始时间是在当前时间之前,就重置时间if (newVal && newVal[0] && new Date(newVal[0]).getTime() < Date.now()) {this.$nextTick(() => {this.$message({type: 'error',message: '开始时间不能早于当前时间!'});this.form.time = ['', ''];});}// 如果结束时间是在当前时间之前,也重置时间if (newVal && newVal[1] && new Date(newVal[1]).getTime() < Date.now()) {this.$nextTick(() => {this.$message({type: 'error',message: '结束时间不能早于当前时间!'});this.form.time = ['', ''];});}},
}
2.通过el-form表单校验去给校验错误提示(体验会好些)
computed:{rules () {return {time: [{ required: true, message: '请输入任务时间', trigger: 'blur' },{validator: this.checkTimeRange,trigger: 'change'}],}}
},
methods:{checkTimeRange (rule, value, callback) {if (!value || !value[0] || !value[1]) {callback(new Error('请选择时间范围'));} else if (new Date(value[0]).getTime() < Date.now()) {callback(new Error('开始时间不能早于当前时间'));} else if (new Date(value[1]).getTime() < Date.now()) {callback(new Error('结束时间不能早于当前时间'));} else {callback();}},
}