创建一个输入类型=“;日期“;Ember中

Create an input type="date" in Ember

本文关键字:日期 Ember 类型 输入 一个 创建      更新时间:2023-09-26

我正试图在Emberjs中创建一个<input type="date"/>,但我遇到了两个问题:

  1. 在我所在的国家,日期显示为DD-MM-YYYY格式,而日期字段需要MM-DD-YYYY格式(然后浏览器根据其区域设置显示)。因此,如果浏览器支持日期输入字段,则应以一种方式格式化日期,如果不支持,则应采用另一种方式
  2. 日期绑定到date对象

我使用Momentjs进行格式化和Ember数据。

我正在尝试像这样扩展Ember.TextField:

App.DateField = Ember.TextField.extend
  value: ( (key, value) ->
    if value?
      if /Date/.test value.constructor #I assume that if the passed value is a Date object then it is arriving directly from the model
        if Modernizr.inputtypes.date
          moment(value).format('YYYY-MM-DD')
        else
          moment(value).format('DD-MM-YYYY')
      else # if the passed value is not a Date object then the user is typing into the form
        if Modernizr.inputtypes.date
          value = new Date('value')
        else
          value
  ).property()
  type: 'date'

对于具有日期输入的浏览器,支持这种工作方式。对于其他浏览器,日期显示正确,但在模型中保存为(格式错误的)字符串。

如何在后台使用Date对象的同时保持正确的格式?

演示

更新

感谢在接受的答案中提供的博客文章,我能够更新演示以做我想做的事情(有一些奇怪之处,但目前不相关)

Demo2

看看这两篇博客文章:

这是一个简单的日期选择器:http://hawkins.io/2013/06/datepicker-in-ember/这个使用引导程序日期选择器http://hawkins.io/2013/06/fancy-ember-datepicker-with-twitter-bootstrap/

希望这将有助于

我没有看到任何针对字符串用例的解析。您需要使用类似Date.parse的东西来将用户输入的字符串转换为Date对象。

if Modernizr.inputtypes.date
  value = new Date(value)
else
  value = Date.parse(value)