VUE Elemet UI 时间范围操作

ゝ一世哀愁。 2023-06-19 14:24 41阅读 0赞

背景：

根据 选择的 **活动开始时间 与 结束时间**，**限制**日程的时间操作 **只能在 这个范围中操作**

步骤：

HTML代码：

<el-date-picker
        v-model="activityForm.hdsjq"
        type="datetime"
        placeholder="开始时间"
        :clearable='false'
        format='yyyy-MM-dd HH:mm'
        class="ActivityForm_input_date"
        :picker-options="pickerOptions"
    ></el-date-picker>    
      
    <span>～</span>
    
    <el-form-item prop="hdsjz" class="ActivityForm_item">
    <el-date-picker
        v-model="activityForm.hdsjz"
        type="datetime"
        placeholder="截至时间"
        :clearable='false'
        format='yyyy-MM-dd HH:mm'
        class="ActivityForm_input_date"
        :picker-options="pickerOptions"
    ></el-date-picker>
    
    
    
    <el-date-picker
        v-model="domain.kssj"
        type="datetime"
        placeholder="开始时间"
        :clearable='false'
        :picker-options="pickerOptions0"
        :disabled="!activityForm.hdsjz"
        format='yyyy-MM-dd HH:mm'
        value-format='yyyy-MM-dd HH:mm'
        class="ScheduleForm_input_date"
    ></el-date-picker>
    
    <span>～</span>
    
    <el-date-picker
        v-model="domain.jssj"
        type="datetime"
        placeholder="结束时间"
        :clearable='false'
        :picker-options="pickerOptions0"
        :disabled="!activityForm.hdsjz"
        format='yyyy-MM-dd HH:mm'
        value-format='yyyy-MM-dd HH:mm'
        class="ScheduleForm_input_date"
    ></el-date-picker>

注：   在 **el-date-picker 只设置**显示格式，不设置绑定数据格式（**默认**是 时间戳格式），下面**方便 时间对比操作**

JS代码：

注：**computed 是vue的计算属性，**在这里面定义的属性值**不需要再data() 中创建了,****可以直接使用**

## **页面效果：** ##

活动时间：

![20191206220334899.png][]

日程时间：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70][]

[20191206220334899.png]: https://img-blog.csdnimg.cn/20191206220334899.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191206220206913.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0,size_16,color_FFFFFF,t_70