Elemrnt UI DatePicker日期选择器（格式、限定日期），周选择器-Toy模板网

这篇具有很好参考价值的文章主要介绍了Elemrnt UI DatePicker日期选择器（格式、限定日期），周选择器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Elemrnt UI DatePicker日期选择器（格式、限定日期），周选择器

日期选择器（格式）

<el-date-picker
  type="date"
  // 绑定值的格式
   value-format="yyyy-MM-dd"
   // 展示值的格式
   format="yyyy-MM-dd"
   v-model="date"
   placeholder="选择日期"
 ></el-date-picker>

日期选择器（限定/禁用日期）

<el-date-picker
  type="date"
  // 绑定值的格式
   value-format="yyyy-MM-dd"
   // 展示值的格式
   format="yyyy-MM-dd"
   v-model="date"
   placeholder="选择日期"
   // 限定日期
   :picker-options="setDateRange"
 ></el-date-picker>


data(){
	return{
      setDateRange: {
      // 要求只能选择’2022-01‘的日期，也就是要禁用除‘2022-01‘以外日期
        disabledDate: time => {
        // 获取你要限定的日期范围的-年月日
          const yearA = new Date(`2022-01-01`).getFullYear();
          const monthA = new Date(`2022-01-01`).getMonth();
          // 获取日历的日期的年月日
          const yearB = time.getFullYear();
          const monthB = time.getMonth();
          // 将两个日期比对，如果不符合，就经用，返回true
          if (`2022-01` !== `${yearB}${monthB}`) {
            return true;
          } else {
            return false;
          }
        }
      }
    }
}

周选择器

<el-date-picker
   ref="dateWeek"
   id="getWeekData"
   // 根据绑定值（日期格式）所在的周来定位周
   v-model="weekDate"
   type="week"
   format="yyyy 年第 WW 周"
   placeholder="选择周"
   // 日期控件以星期一开头
   :picker-options="{ firstDayOfWeek: 1 }"
   size="small"
 ></el-date-picker>

// 获取xxx年xxx周的数据
watch: {
    weekDate() {
      if (this.weekDate != null) {
        this.$nextTick(() => {
          this.weekTitle = document.querySelector("#getWeekData").value;
        });
      }
    }
  },