view-design / ViewUIPlus

An enterprise-level UI component library and front-end solution based on Vue.js 3
https://www.iviewui.com
Other
376 stars 131 forks source link

[Bug Report]DatePicker format #376

Open binyet opened 3 months ago

binyet commented 3 months ago

Environment

windows / Microsoft Edge 版本 126.0.2592.81 (正式版本) (64 位) / Vue3

Reproduction link

https://run.iviewui.com/zmsVYiBL

Steps to reproduce

DatePicker 设置format为MM:dd HH:mm 后 显示时间错误

What is expected?

设置初始值“2024-07-04 00:00:00”, DatePicker显示 08-24 07:04

What is actually happening?

设置初始值“2024-07-04 00:00:00”, DatePicker显示 07-04 00:00

dosubot[bot] commented 3 months ago

@binyet 你好!我是Dosu,一个能够帮助你解决bug、回答问题并成为贡献者的机器人。我会在等待人类维护者的过程中帮助你。

The DatePicker component in your Vue3 application is not formatting the date and time as "08-24 07:04" because the format prop is incorrectly set. To format the date and time correctly, you need to set the format prop to a string that specifies the desired format. For example:

<DatePicker
  v-model="dateValue"
  type="datetime"
  format="MM-DD HH:mm"
/>

In this example, dateValue should be a Date object initialized with "2024-07-04 00:00:00".

Here is a complete example:

<template>
  <DatePicker
    v-model="dateValue"
    type="datetime"
    format="MM-DD HH:mm"
  />
</template>

<script>
export default {
  data() {
    return {
      dateValue: new Date("2024-07-04T00:00:00")
    };
  }
};
</script>

This should ensure that the date and time are displayed as "08-24 07:04" in the DatePicker component. Additionally, ensure that the DatePicker component is correctly handling the format prop as a string. According to the ViewUIPlus library, the format prop should be a string, and the component should correctly parse and display the date based on this format [1][2].

To continue talking to Dosu, mention @dosu.