[DateTimePicker] 使用了动态的start值无法在第一次渲染时正确的限制时间

[linzowo]

tdesign-mobile-vue 版本

1.0.8

重现链接

No response

重现步骤

1. 选择开始时间，滑动月份到本月之后的月份，点击确定
2. 选择结束时间，直接点击确定

期望结果

结束时间值为开始时间往后推1小时

实际结果

只有小时数发生了变化，月份数仍然是初始值

框架版本

Vue(3.2.45)

浏览器版本

No response

系统版本

win11

Node版本

16.17.0

补充说明

完整代码如下

<template>
  <view>
    <t-form
      ref="form"
      :data="formData"
      reset-type="empty"
      show-error-message
      label-align="top"
    >
      <t-form-item label="开始时间" name="start">
        <t-input
          v-model="formData.start"
          borderless
          placeholder="请输入内容"
          @click="startVisible = true"
        ></t-input>
        <t-popup v-model="startVisible" placement="bottom">
          <t-date-time-picker
            v-model:value="formData.start"
            title="选择时间"
            :start="new Date().getTime()"
            :end="timeEnd"
            :mode="'hour'"
            :format="'YYYY-MM-DD HH:mm:ss'"
            :default-value="defaultTime"
            @confirm="onStartConfirm"
            @cancel="onCancel"
          />
        </t-popup>
      </t-form-item>
      <t-form-item label="结束时间" name="end">
        <t-input
          v-model="formData.end"
          borderless
          placeholder="请输入内容"
          @click="endVisible = true"
        ></t-input>
        <t-popup v-model="endVisible" placement="bottom">
          <t-date-time-picker
            v-model:value="formData.end"
            title="选择时间"
            :start="timeStart"
            :mode="'hour'"
            :format="'YYYY-MM-DD HH:mm:ss'"
            :default-value="defaultTime"
            @confirm="onEndConfirm"
            @cancel="onCancel"
          />
        </t-popup>
      </t-form-item>
    </t-form>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import dayjs from "dayjs";

const formData = reactive({
  start: "",
  end: "",
});

const defaultTime = new Date().getTime();

const timeStart = computed(() => {
  return dayjs(formData.start ? formData.start : new Date().getTime())
    .add(1, "hour")
    .format("YYYY-MM-DD HH:mm:ss");
});

const timeEnd = computed(() => {
  return formData.end
    ? dayjs(formData.end).subtract(1, "hour").format("YYYY-MM-DD HH:mm:ss")
    : "";
});

const startVisible = ref(false);
const endVisible = ref(false);

const onStartConfirm = (val) => {
  formData.start = val;
  startVisible.value = false;
};

const onEndConfirm = (val) => {
  console.log(timeStart.value);
  formData.end = val;
  endVisible.value = false;
};

const onCancel = () => {
  startVisible.value = false;
  endVisible.value = false;
};
</script>

<style scoped></style>

IssueShoot

• 预估时长: 6
• 期望完成时间: 2024-04-24 00:00:00 +0000 UTC
• 开发难度: 中
• 参与人数: 1
• 需求对接人: anlyyao
• 验收标准: 实现期望改造效果，提 PR 并通过验收无误
• 备注: 最终激励以实际提交 pull request 并合并为准

[github-actions]

👋 @linzowo，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[anlyyao]

Task:

1. sfc 改 tsx；
2. 验证当前问题是否修复