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

最新推荐文章于 2024-05-17 08:48:28 发布

Shiki2147

最新推荐文章于 2024-05-17 08:48:28 发布

阅读量1.6k

点赞数 1

文章标签： ui javascript 前端

本文链接：https://blog.youkuaiyun.com/Shiki2147/article/details/128216999

版权

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;
        });
      }
    }
  },