如何在输入字段中使用ember-cli-bootstrap-datepicker显示本地日期?

时间:2015-03-11 22:40:26

标签: ember-cli bootstrap-datepicker

使用ember-cli-bootstrap-datepicker时,我在日历上选择的日期日历关闭时输入字段上显示的日期。它是选择的日期-1天。

但是,我有另一个绑定到同一属性{{expires_at}}的字段,它显示我选择的相应日期。我假设这是UTC转换;即使它似乎发生在一天中的任何时间,我尝试它。我试图找出一种让ember-cli-bootstrap-datepicker输入反映我选择的日期的方法。

保存到数据库的日期是正确的日期,但这会让我的用户在该字段上看到错误的日期时感到困惑。

Bootstrap datepicker绑定到exprires_at字段,该字段由带有日期字段的rails后端支持 - 因此它通过JSON发送的格式为字符串YYYY-MM-DD。

模板/管理/特别/ form.hbs     

<div class="form-group">
  <div class="input-group">
    <label for="expires_at" class="input-group-addon fa fw fa-calendar"> Expire Date</label>
    {{bootstrap-datepicker value=expires_at todayBtn=true autoclose=true class="form-control"}}
  </div>
</div> <!-- /.form-group -->

在同一个模板上,我预览了输出将生成什么,它是一张优惠券,所以我有显示实际优惠券的字段,其中包含从表单上的字段输入的所有数据,以便最终用户知道它是什么&# 39;看起来像。

<!-- language-all: lang-html -->

<p<Expires {{short-date expires_at}}. For questions please call ...</p>

我也尝试了这个短期助手,它仍然会返回正确的日期。

助手/短date.js

import Ember from "ember";

export default Ember.Handlebars.makeBoundHelper(function(value) {
  // return moment(value, "MM-DD-YYYY");
  return moment(value, "YYYY-MM-DD").format("MM/DD/YYYY");
});

的package.json



      "devDependencies": {
        "broccoli-asset-rev": "^2.0.0",
        "broccoli-ember-hbs-template-compiler": "^1.6.1",
        "ember-cli": "0.1.15",
        "ember-cli-6to5": "^3.0.0",
        "ember-cli-app-version": "0.3.1",
        "ember-cli-bootstrap-datepicker": "0.3.1",
        "ember-cli-bootstrap-sassy": "0.0.12",
        "ember-cli-content-security-policy": "^0.3.0",
        "ember-cli-dependency-checker": "0.0.7",
        "ember-cli-font-awesome": "0.0.9",
        "ember-cli-form-data": "0.0.8",
        "ember-cli-ic-ajax": "0.1.1",
        "ember-cli-inject-live-reload": "^1.3.0",
        "ember-cli-moment": "0.0.1",
        "ember-cli-qunit": "0.3.7",
        "ember-cli-sass": "^3.1.0-beta",
        "ember-cli-simple-auth": "0.7.3",
        "ember-cli-simple-auth-devise": "0.7.3",
        "ember-cli-uglify": "1.0.1",
        "ember-data": "1.0.0-beta.14.1",
        "ember-export-application-global": "^1.0.2",
        "ember-localstorage-adapter": "^0.5.2",
        "express": "^4.8.5",
        "glob": "^4.0.5"
      }

bower.json



      "dependencies": {
        "handlebars": "~1.3.0",
        "jquery": "^1.11.1",
        "ember": "1.8.1",
        "ember-data": "1.0.0-beta.14.1",
        "ember-resolver": "~0.1.11",
        "loader.js": "ember-cli/loader.js#1.0.1",
        "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
        "ember-cli-test-loader": "ember-cli/ember-cli-test-loader#0.1.1",
        "ember-load-initializers": "ember-cli/ember-load-initializers#0.0.2",
        "ember-qunit": "0.2.8",
        "ember-qunit-notifications": "0.0.7",
        "qunit": "~1.17.1",
        "bootstrap-sass-official": "~3.3.3",
        "ember-simple-auth": "0.7.3",
        "bootstrap-datepicker": "~1.3.1"
      }

我可能隐藏了引导程序选择器的实际输入字段,只显示了另一个{{exipres_at}}字段,但我觉得我们还可以通过日期选择器来显示当地时间而且我是只是想念它。我几乎没有任何配置,并且不确定除了内联之外我应该在哪里传递任何选项但我没有看到当地时间的选项。

1 个答案:

答案 0 :(得分:0)

我是ember-cli-bootstrap-datepicker插件的作者。我很抱歉给您带来不便,但UTC转换时出现了错误。该错误已得到修复,并且可以发布新版本的附加组件。

如果您能查看the demo page上的日期选择器并告诉我问题何时消失,我将不胜感激。我已经使用不同的时区做了这件事,一切似乎都适合我。

祝你有美好的一天! :)

更新:最近发布了v0.3.3,它解决了这个问题。请安装更新并享受您的工作。