van的时间选择控件van-datetime-picker的坑

最新推荐文章于 2025-04-19 14:59:30 发布

StoneVivi

最新推荐文章于 2025-04-19 14:59:30 发布

阅读量1w

点赞数 1

本文链接：https://blog.youkuaiyun.com/StoneVivi/article/details/105258473

版权

在使用van-datetime-picker的date类型时，发现一个奇怪的现象：先选择开始时间，然后选择结束时间，结束时间会被设定为开始时间的00:00:00。但若先选结束时间，再选开始时间，则正常。为了解决这个问题，提供了两种方案：一种是直接在结束时间后拼接'23:59:59'；另一种是在查询时转换时间戳，确保时间正确传递给后台。这两种方法适用于后台要求的时间格式为yyyyMMddHHmmss的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

van的时间选择控件van-datetime-picker的坑

以type='date’的van-datetime-picker为例：

    <vant-date-picker
      v-model="value4"
      type="date"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </vant-date-picker>

我在项目中遇到的问题，默认是从开始时间的当天00:00:00至结束时间的当天23:59:59。但是先选开始时间再选结束时间时，开始时间是当天时间的00:00:00至结束时间的当天00:00:00。我发现如果先选结束时间再选开始时间，就符合默认条件，有点奇怪。。。

后来找到两种方案：（补充说明一下：后台要求的格式是yyyyMMddHHmmss,具体操作见我的另一篇博客https://blog.youkuaiyun.com/StoneVivi/article/details/105211883, 这里也是基于这个要求做的）
方法一：比较简单粗暴
直接在结束时间后面拼上23:59:59

new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 23, 59, 59)

备注：
**toLocaleDateString()**是js的方法，将new date()的时间转化成本地时间。

方法二
亲测，如果没有后端要求的格式处理，直接传输经过上述代码强制加23:59:59会有问题的（见附图）。为了使解决方案更加具有复用性，于是有了以下方法。
断点查看选择的开始时间，结束时间也是类似的

new Date(new Date().toLocaleDateString()).getTime() + ((24 * 60 * 60 * 1000) - 1)

查询的时候加上下面的转化就可以把时间戳传给后台了。

if (this.pageParams.updateTimeQuery && this.pageParams.updateTimeQuery.length) {
    this.pageParams.updateTimeQuery = [...this.pageParams.updateTimeQuery].join('-');
  }