vue3+ts 年月日时分秒时间组件改进

最新推荐文章于 2025-06-06 16:46:28 发布

原创

最新推荐文章于 2025-06-06 16:46:28 发布 · 323 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

之前写了一个时间组件，然后稍有不足，现在改进一下，具体的改进点就是，原先的时候，我选择某年某月的话，发现天，每次都是31一天。然后用选了个11月31号，接口后端拿到这个日期，不出所料的报错了，因为去年11月是没有31号的，所以今天改进一下，改进的点就是，当van-picker时间改变的时候，就检测处于哪年，哪月，然后对于相应的年月，展示正确的天数，将这个天数的数组，展示在相对应的一列即可

下面我就是完整的组件代码：

<!--
 * @Description: 年月日时分秒 时间选择组件 
 * @FilePath: \shared\common\src\components\DateTimePicker
-->
<template>
  <!-- 参数说明
  /**
  *  |-Params[cellTitle] {String} 单元格名称 默认时间 （必传）
  *  |-Params[values] {String} 传入的时间值 格式为YYYY-MM-DD HH:mm:ss (必传)
  *  |-Params[disabled] {Boolean} 是否可被选中
  *  示例：<DateTimePicker :cellTitle="'创建时间'" :values="''" @dateConfirm="" :disabled="false"/>
  */
  -->
  <div :class="['date-box', { edit: !disabled }]">
    <van-cell
      :title="cellTitle"
      :is-link="!disabled"
      :value="values"
      @click="showPopup"
    />
  </div>

  <van-popup
    v-model:show="data.isPicker"
    position="bottom"
    round
    @close="closePop"
  >