ElementUi 中日期时间插件DatePicker 限制结束时间大于开始时间且开始时间小于此刻

忘是亡心i 2023-02-22 08:17 1阅读 0赞

前景：时间插件DatePicker

格式化选择日期：

format="yyyy-MM-dd HH:mm:ss"

value-format="yyyy-MM-dd HH:mm:ss"

设置日期选择范围： :picker-options="start"

效果图：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoXzk2MDEyNQ_size_16_color_FFFFFF_t_70][]

代码实现：

html：
            <el-col :span="5" class="col_item">
                <span>注册时间:</span>
                  <el-date-picker
                  v-model="start_time"
                   type="datetime"
                  clearable
                  format="yyyy-MM-dd HH:mm:ss"
                   value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="start"
                   placeholder="开始时间">
                </el-date-picker>
              </el-col>
              <el-col :span="5" class="col_item" style="margin-left:10px">
                <el-date-picker
                    v-model="end_time"
                    type="datetime"
                   format="yyyy-MM-dd HH:mm:ss"
                   value-format="yyyy-MM-dd HH:mm:ss"
                   :picker-options="end"
                   placeholder="结束时间">
                </el-date-picker>
    
    js：
    <script>
    
     export default {   
      data () {
        return {
             start_time:"",
             end_time:"",
             start: {
               disabledDate: time => {
                 if (this.end_time) {
                   return (
                     time.getTime() > new Date(this.end_time).getTime()
                   );
                 } else {
                   return time.getTime() > Date.now();
                 }
               }
             },
             end: {
               disabledDate: time => {
                 if (this.start_time) {
                   return (
                    time.getTime() > Date.now() ||
                    time.getTime() < new Date(this.start_time).getTime()
                  );
                } else {
                  return time.getTime() > Date.now();
                }
              }
            },
    }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoXzk2MDEyNQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020070216113457.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoXzk2MDEyNQ==,size_16,color_FFFFFF,t_70