Question

我正在使用＆＃39; http://element.eleme.io/#/en-US/component/date-picker＆＃39;。我正在使用相同的2个日期选择器。考虑A和B是我的2个日期选择器。现在我想为A设置max-Date属性如果我先从B中选择日期，那么应该是从日期选择器B中选择的最大日期如何设置maxDate属性？

我没有在下面的标签列表中获取elemt.elemen.io标记

Answer 1

只需听取日期选择器的更改并更改第二个的日期选择器。类似的东西：

$("input.datepicker").on("change", function() {
    if($(this).hasClass('date_start')) {
        start = $(this).datepicker('getDate');
        startm = new Date(start.getTime());
        startm.setDate(startm.getDate() +1);
        $(this).parents('form').find('input').filter('.date_end').datepicker("option", "minDate", startm);
    }
});

Answer 2

html :

   <el-date-picker v-model="form.dateOfBirth" type="date" 
                 :picker-options="datePickerOptions2"> </el-date-picker>

    <el-date-picker v-model="form.dateOfJoin" type="date" 
                 :picker-options="datePickerOptions2"> </el-date-picker>

script :
    var Main = {
        data() {
            return {
                datePickerOptions1: {
                    disabledDate (date) {
                        return date > new Date('2018-2-2');
                     }
                },


datePickerOptions2: {
                  disabledDate (date) {
                        return date > new Date('2017-5-5');
                 }
            },
    }

var Main = {
        data() {
          return {
          task: {
              start_at: '04-02-2019',
              end_at: new Date()
          },
          form: {
              birthdayName: '04-07-2018',
              joinDate:'04-04-2018',
          },
          datePickerOptions1: {
              disabledDate (date) {
                  return date > new Date('2018-2-2');
               }
          },
          datePickerOptions2: {
              disabledDate (date) {
                  return date > new Date('2018-5-5');
              }
          },
        };
        },
        methods: {
            dateChangebirthday(val) {
                this.form.birthdayName = val;
            },
            dateChangJoin(val) {
                this.form.joinDate = val;
            }
        }
      };
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.4.3/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.4.3/lib/index.js"></script>
    <div id="app">
    <template>

    <h1> First DatePicker </h1>
      <el-row :span="4">
                  <el-date-picker v-model="form.birthdayName" type="date"  :picker-options="datePickerOptions1" @change="dateChangebirthday"  format="dd-MM-yyyy" value-format="yyyy-MM-dd"  placeholder="Pick a day">
                  </el-date-picker>
              </el-row>
              <h1> Second DatePicker </h1>
              
               <el-row :span="4">
                  <el-date-picker v-model="form.joinDate" type="date"  :picker-options="datePickerOptions2" @change="dateChangJoin"  format="dd-MM-yyyy" value-format="yyyy-MM-dd"  placeholder="Pick a day">
                  </el-date-picker>
              </el-row>
              
    </template>
    </div>

如何在element.io中设置datepicker的maxDate属性（Vue.js）

2 个答案: