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

 先引入日期选择器组件  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]
}


版权声明:本文为m0_67372185原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。