Element: [Feature Request] DateTimePicker, DatePicker, TimePicker value-format support the output millimeter level timestamp

Created on 15 Jan 2018 · 16Comments · Source: ElemeFE/element

Existing Component

是

Component Name

DateTimePicker 、DatePicker、TimePicker

Description

由于前后端分离后，时间格式的通信都采用timestamp统一格式，请问以上三个组件是否可以支持，v-model的对象直接绑定number类型的毫秒级timestamp。

date-picker feature request

Source

ghost

👍1

Most helpful comment

OK，加了 feature label。

Leopoldthecoder on 16 Jan 2018

👍2

All 16 comments

Translation of this issue:

Existing Component

yes

Component Name

DateTimePicker, DatePicker, TimePicker

Description

After the separation of the front end and the rear end, the timestamp format is used in the time format communication. If the above three components can be supported, the object of V-model is directly bound to the number type of millisecond timestamp.

element-bot on 15 Jan 2018

用new Date(timestamp) 和 date.getTime()自己处理一下吧。
value-format不会支持数字类型

wacky6 on 15 Jan 2018

@wacky6 这样要处理的地方很多，特别是后台系统，很多都是时间戳。
比如，拿到数据的时候要format一遍

topic.readyTime = timeUtil.dateToTimestamp(topic.readyTime);
topic.topicDuration = timeUtil.dateToTimestamp(topic.topicDuration);

在传给server的时候，还要format一遍

 topic.readyTime = timeUtil.dateToTimestamp(topic.readyTime);
 topic.topicDuration = timeUtil.dateToTimestamp(topic.topicDuration);

你看这样是否合理，目前value可以绑定timestamp，一旦修改，除非用户指定，应该返回的格式和原始绑定格式一致。比如：
number(timestamp) --> number(timestamp)
Date --> Date
String --> String

baifan on 15 Jan 2018

还有类似以下这个BUG，如果value绑定的是一个number类型的时间戳，则可以正常展示，但除非清空，否则不能进行重新选择其他时间。

https://jsfiddle.net/2v7zhq9g/

baifan on 15 Jan 2018

不考虑自适应格式。格式只用value-format控制（null 或日期格式字串）
另外目前TimeSelect的返回格式一定是字符串

wacky6 on 15 Jan 2018

@Leopoldthecoder
date-picker 时间戳格式这个需求大佬怎么看啊？ value-format加个特例？

wacky6 on 15 Jan 2018

个人觉得时间戳的需求用一个计算属性就能满足：https://jsfiddle.net/mwdxuen7/ ，我遇到这种情况也是这么写的。

Leopoldthecoder on 15 Jan 2018

👍1

我觉得可以先给个feature label？

如果让date-picker支持时间戳的话代码量少很多。和form一起用的话似乎能比computed更偷懒一些？

<el-form :model="form">
  <el-form-item prop="date" :rules="[ ... ]">
    <el-date-picker v-model="form.date" type="date" placeholder="选择日期" value-format="timestamp" />
  <el-form-item>
</el-form>

data() {
  return {
    form: {
      date: Date.now()
    }
  }
}

wacky6 on 15 Jan 2018

@Leopoldthecoder @wacky6 感谢两位的帮助
在拿单个数据的时候，而且时间类字段较少的情况，可以这么做，但后台一般拿回来的都是列表。我们做的系统是活动相关的，涉及到活动开始时间、结束时间、报名开始时间、结束时间、置顶开始时间、结束时间，以及每个主题持续时间。如果有timestamp输出，会轻松很多，否则要写很多代码。

在前后端的交互中，时间类型是否使用timestamp做规范，更为合适一些，而不应该是format后的字符串。

baifan on 16 Jan 2018

OK，加了 feature label。

Leopoldthecoder on 16 Jan 2018

👍2

PR https://github.com/ElemeFE/element/pull/9319

来找 bug 啦（逃

wacky6 on 17 Jan 2018

👍1

Could someone please briefly summarize the conversation here, and perhaps the changes listed in the PR description as well?