【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]
}

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值