Vue2中Element DatePicker组件设置默认日期及控制日期范围

下面是“Vue2中Element DatePicker组件设置默认日期及控制日期范围”的完整攻略。

设置默认日期

要设置Element DatePicker组件的默认日期，我们只需要在初始化时为组件的value属性指定一个默认日期即可。例如，下面的代码演示了如何设置DatePicker组件的默认日期为当前日期：

<el-date-picker v-model="date" type="date" :value="new Date()"></el-date-picker>

这里，我们将DateTimePicker组件的value属性绑定到了Vue实例中的一个date变量上，同时使用JavaScript的Date对象来设置了默认日期。

控制日期范围

要控制DatePicker组件的日期范围，有两种方式可以实现。

第一种方式是使用DatePicker组件的start-date和end-date属性来指定日期范围。例如，下面的代码演示了如何设置日期范围为当前月份：

<el-date-picker v-model="date" type="date" :start-date="new Date(new Date().getFullYear(), new Date().getMonth(), 1)" :end-date="new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)"></el-date-picker>

这里，我们使用JavaScript的Date对象来动态计算了当前月份的起始日期和结束日期，然后分别作为start-date和end-date属性的值来设定日期范围。

第二种方式是使用DatePicker组件的disabled-date属性来禁用某些日期。例如，下面的代码演示了如何禁用所有周末的日期：

<el-date-picker v-model="date" type="date" :disabled-date="isWeekend"></el-date-picker>

这里，我们为DatePicker组件的disabled-date属性指定了一个名为isWeekend的方法，该方法接受一个参数date表示要判断的日期对象，如果该日期是周末，则返回true表示该日期不可用，否则返回false表示该日期可用。下面是isWeekend方法的实现代码：

function isWeekend(date) {
    const day = date.getDay();
    return day === 0 || day === 6;
}

上述代码中，我们使用JavaScript的Date对象的getDay()方法来获取日期的星期几（星期日为0，星期一到六为1到6），然后判断该日期是否为周末，并返回相应的结果。

这样，我们就可以使用上述方法来设置DatePicker组件的默认日期及控制日期范围，实现更加灵活和高效的日期选择功能。