Rails 4 x Bootstrap 3 Datetimepicker：用 datetimepicker 替换默认值 datetime_select

Question

在我已经使用 Bootstrap 3 的 Rails 4 应用程序中，我刚刚添加了 Datetimepicker by eonasdan.

我仔细按照提供的说明 here and there 安装了插件。

这是我的设置：

宝石文件

gem 'momentjs-rails'
gem 'bootstrap3-datetimepicker-rails'

application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap
//= require bootstrap/dropdown
//= require moment
//= require bootstrap-datetimepicker
//= require turbolinks
//= require_tree .

application.scss

@import "bootstrap-sprockets";
@import "bootstrap";
@import 'bootstrap/theme';
@import 'bootstrap-datetimepicker';
@import "font-awesome-sprockets";
@import "font-awesome";
@import "simple_calendar";
@import "custom.scss";
@import "custom/**/*"

我确实重启了我的服务器。

现在，我正在尝试在我的 Posts#New 和 Posts#Edit 视图表单中使用该插件，以替换当前的 datetime_select 字段：

<div class="field">
  <%= f.label :date, "DATE" %>
  <%= f.datetime_select :date %>
</div>

这是我第一次尝试后的位置：

<div class="form-group">
  <div class='input-group date' id='datetimepicker'>
    <%= f.label :date, "DATE & TIME" %>
      <%= f.text_field :date, :class => "form-control"%>
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
  </div>
  <script type="text/javascript">
    $(function () {
      $('#datetimepicker').datetimepicker();
    });
  </script>
</div>

这在视图中提供了以下元素：

虽然设计还不够完美，但目前我关心的不是这个

真正的问题是，当我创建 post 时，date 属性（datetime 数据类型）被设置为 nil，而不是在 datetimepicker.

中选择的值

我在网上找过类似的情况，最接近的是this Stack Overflow question。

不幸的是，它是基于苗条形式的，我不知道如何将它们 "translate" 转换成常规形式，以便在 erb.html 文件中使用。

知道我的代码有什么问题吗？

——————

UPDATE：我找到了一种在创建 post 时将日期实际保存到数据库的方法：

<div class="form-group" id="post_date_time">
      <%= f.label :date, "DATE & TIME" %>
      <div class='input-group date' id='datetimepicker'>
        <%= f.text_field :date, :class => "form-control"%>
          <span class="input-group-addon">
              <span class="glyphicon glyphicon-calendar"></span>
          </span>
      </div>
    </div>
    <script type="text/javascript">
      $(function () {
        $('#datetimepicker').datetimepicker();
      });
    </script>

但是，它似乎无法在编辑表单上正常工作，因为我没有使用 post 的日期填充日期时间选择器。我在这里遗漏了什么吗？

——————

Answer 1

要在您的编辑页面上填充日期时间，您可以在 javascript 设置中执行此操作：

<script type="text/javascript">
  $(function () {
    $('#datetimepicker').datetimepicker({
      defaultDate: "<%= @post.date %>",
      format: "YYYY-MM-DD hh:mm a Z"
    });
  });
</script>

我这里有工作代码：Github - Rails Datetimepicker Example

Rails 4 x Bootstrap 3 Datetimepicker：用 datetimepicker 替换默认值 datetime_select

Rails 4 x Bootstrap 3 Datetimepicker: replace default datetime_select with datetimepicker

forms

ruby-on-rails

datetimepicker

twitter-bootstrap

ruby-on-rails-4

宝石文件

application.js

application.scss