elementUI 日期选择器datepicker 设置禁用日期

本例记录ElementUI中DatePicker（日期选择器）设置日期项禁用状态的实现。

下图中将DatePicker的type设置为year，展示为年份选择器：

可以看到上图中2022、2023、2025几个年份处于禁用状态，具体实现代码看下图：

上图对应的代码：

    data() {let _this = this  // 此处需要保存下thisreturn {tabsName: 'demand',isShowDrawerOfAnnualDemandPlanSummary: false,isShowDrawerOfFillingRecord: false,mode: '',year: '',demandPlanYearId: '',contractYearsArr: [],annualDemandPlanTableData: [],annualResourcePlanTableData: [],annualResourcePlanTableHeaderArr: [],status: '',fillingRecordsArr: [],annualDemandPlanSummaryArr: {},previousRowIndex: '',previousFieldName: '',yearsArr: [],pickerOptions: {disabledDate(time) {const year = new Date(time).getFullYear()return _this.yearsArr.includes(year)  // 此处使用 _this}}               }},

pickerOptions是一个对象（pickerOptions可任意命名，但需要与模板中picker-options绑定的变量名一致），在pickerOptions对象内部是disabledDate函数（函数名必须是disabledDate），在此函数中实现禁用日期的逻辑。

disabledDate(time)的参数item表示日期选择器中的生个日期（其值是日期型数据），

const year = new Date(time).getFullYear()的功能是获取每个日期中的年份，

disabledDate函数需要返回逻辑值（true或false）， _this.yearsArr.includes(year)语句中的yeasArr是后端接口返回的需要禁用的日期（数组格式，本例中yearsArr的值是[2021, 2022, 2023]，

经过上述分析可知_this.yearsArr.includes(year)的功能就是用日期选择器中的每个日期和[2021, 2022, 2023]匹配，如果日期选择器的某个日期存在于[2021, 2022, 2023]中，则返回true（此时这个日期显示为禁用状态），如果日期选择器的某个日期在[2021, 2022, 2023]中不存在，则返回false（此时日期选择器中的这个日期显示可用状态）。

我在想是不是可以把disabledDate函数理解成map、filter、find这类方法的回调函数，每个元素都会应用一次这个回调函数，对每个元素都做相应的逻辑处理。

elementUI 日期选择器datepicker 设置禁用日期相关推荐

elementui 时间选择器如何设置禁用时间
页面引用在:picker-options="timeChange" 属性中设置禁用时间 <el-date-picker v-model="value2&quo ...
element 日期选择图标_element-ui日期组件DatePicker设置日期选择范围Picker Options
element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期 ...
android 之日期选择器,Android GUI 之日期选择器(DatePicker)
简单介绍下 DatePicker 和 Calender ,用他们两个实现日期选择器,并添加日期改变监听器将当前时间显示在下面的 TextView 上,日期改变时 TextView 上的日期相应改变 ...
el-date-picker中自定义快捷选项picker-options，动态设置禁用日期
1.需求在table表格中,有后端传回的List,每一条list数据中都有一个发生日期occur_time,点击报告延期出现历史记录对话框,点击申请延期后除开一个填写信息的对话框.用户可以选择的计划 ...
android简单易上手的日期选择器DatePicker
今天尝试自己动手做一个日期选择器 1.在布局文件中添加DatePicker ... <DatePickerandroid:layout_width="match_pa ...
原生js实现日期选择器插件简单风格日期选择插件
原生js实现日期选择插件 xs-DatePicker ** 效果图 ** ** 简介通过原生HTML/CSS/JavaScript完成一个日期选择器. 代码如下: ** <!-- 时间:202 ...
Element | DatePicker 日期选择器区间设置默认值（当前月第一天到当天）
记一个,日期选择器的一个小方法 <el-date-pickerv-model="dataRange"type="daterange"align=" ...
【安卓开发】Android中日期选择器DatePicker和TimePicker的使用
DatePickerDatePickerDatePicker和TimePickerTimePickerTimePicker是安卓自带的日期选择器,可以变换多种样式,下面是他们的简单使用. 显示年月日和 ...
element-ui时间选择器如何把今日日期改为“至今”
通过类名控制, 今日日期的盒子上面有'today'类名 /deep/.available.today span {color: #fff;&::after {content: "至今 ...

elementUI 日期选择器datepicker 设置禁用日期

elementUI 日期选择器datepicker 设置禁用日期相关推荐

最新文章

热门文章