当前位置：首页 > article >正文

element ui 精确控制日期控件 date-picker

article 2024/12/29 5:29:28

https://github.com/element-plus/element-plus/discussions/17378

-- 某组件 xxx.vue
...
<el-date-picker
          v-model="timeRange"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          placeholder="请选择时间"
          :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]"
          value-format="YYYY-MM-DD">
        </el-date-picker>
...
<script>
const timeRange= [
    dayjs(new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0)).subtract(1, 'month').format('YYYY-MM-DD'),
    dayjs(new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 0)).format('YYYY-MM-DD')
  ]
</script>

关键点：

1. default-time 控制该组件的时间部分的格式，即开始日期的时间：00：00：00，结束日期的时间：23：59：59

2. 仅仅如此还不够，根据github上的issue，当手动收入日期后，时间部分并没有被控制，而是当前时间。所以，加个 value-format="YYYY-MM-DD" 可与解决该问题

查看全文

http://www.kler.cn/a/321388.html