【Element plus】DatePicker日期选择器默认当月1日到当前日期

很困的程序媛

已于 2022-12-29 14:45:19 修改

阅读量4.1k

点赞数

分类专栏： Element plus 文章标签： vue.js elementui javascript

于 2022-12-20 14:50:39 首次发布

本文链接：https://blog.csdn.net/m0_67372185/article/details/128384739

版权

Element plus 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

本文介绍了如何在Vue.js中使用日期选择器组件，通过`el-date-picker`实现日期范围的选择，并展示了如何设置默认值和监听日期变化。在`defaultDate`函数中，获取当前日期并转化为适合的格式，用于显示当月的第一天和最后一天。`ChangeTime`函数则用于在用户选择日期后更新查询条件，将选择的日期范围赋值给`selectorData`。

摘要由CSDN通过智能技术生成

先引入日期选择器组件 value-format="YYYY-MM-DD"绑定值的格式

  <el-date-picker
          v-model="DateVal"
          type="daterange"
          range-separator="~"
          start-placeholder="年/月/日"
          end-placeholder="年/月/日"
          value-format="YYYY-MM-DD"
          @change="ChangeTime"
          :clearable = false
        />

// 定义数据
const DateVal = ref('')

// 默认时间，当月号到当前日期
const defaultDate = () => {
  //获取新的时间
  let date = new Date()
  //获取当前时间的年份转为字符串
  let year = date.getFullYear().toString()
  //获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
  let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()
  //获取天，判断是否小于10，如果是在字符串前面拼接'0'
  let da = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString()
  //字符串拼接，开始时间，结束时间
  let end = year + '-' + month + '-' + da  //当天
  let beg = year + '-' + month + '-01'    //当月第一天

  DateVal.value = [beg, end] //将值设置给日期选择器
}


// 日期查询条件
const selectorData = ref({
  sta: "",
  end: "",
})

// 日期确认选定的值时触发
const ChangeTime = (val) => {  
  console.log(val[0],'开始时间',val[1],'结束时间');
  selectorData.value.sta = val[0]
  selectorData.value.end = val[1]
}