Rails 4 x Bootstrap 3 Datetimepicker：用datetimepicker替换默认的datetime_select [英] Rails 4 x Bootstrap 3 Datetimepicker: replace default datetime_select with datetimepicker

问题描述

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

尽管设计还很不完善，但现在，这并不是我所关心的

真正的问题是，当我创建帖子时， date 属性（即< c $ c> datetime 数据类型）设置为 nil ，而不是在 datetimepicker 。

我在网上寻找类似情况，发现的最接近的是此堆栈溢出问题。

不幸的是，它基于细长形式，并且我不知道如何将它们转换为常规格式，以用于 erb.html 文件。

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

—————

更新：我发现一种在创建帖子时实际上将日期保存到数据库的方法：

 < div class = form-group id = post_date_time> 
<％= f.label：date， DATE& TIME％> 
< div class ='输入组日期'id ='datetimepicker'> 
<％= f.text_field：date，：class => 形式控制％> 
< span class = input-group-addon> 
< span class = glyphicon glyphicon-calendar< / span> 
< / span> 
< / div> 
< / div> 
< script type = text / javascript> 
 $（function（）{
 $（’＃datetimepicker'）。datetimepicker（）; 
}）; 
< / script> 
  

但是，它似乎在编辑表单上无法正常工作，因为我没有datetimepicker填充了发布日期。我在这里错过了什么吗？

————

解决方案

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

 < script type = text / javascript> 
 $（function（）{
 $（'＃datetimepicker'）。datetimepicker（{
 defaultDate：<％= @ post.date％>，
格式： YYYY-MM-DD hh：mm a Z 
}）; 
}）; 
< / script> 
  

我在这里有工作代码： Github-Rails Datetimepicker示例

In my Rails 4 app, which already uses Bootstrap 3, I just added Datetimepicker by eonasdan.

I carefully followed the instructions offered here and there to install the plugin.

Here is my setup:

Gemfile

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/**/*"

And I do have restarted my server.

Now, I am trying to use the plugin in my Posts#New and Posts#Edit views form, to replace the current datetime_select field:

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

This is where I am after my first attempt:

<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>

Which gives me the following elements in the view:

Although the design is far from perfect, for now, this is not what I am concerned about.

The real problem is that, when I create a post, the date attribute (which is a datetime data type) is set to nil, instead of the value chosen in the datetimepicker.

I looked for similar situations online, and the closest I have found is this Stack Overflow question.

Unfortunately, it is based on slim forms, and I don't know how to "translate" them into regular forms, to be used in a erb.html file.

Any idea of what is wrong with my code?

—————

UPDATE: I have found a way that is actually saving the date to the database when the post is created:

<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>

However, it does not seem to work properly on the edit form, since I don't get the datetimepicker populated with the date of the post. Am I missing something here?

—————

解决方案

To get the datetime populated on your edit page you can do this in the javascript setup:

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

I have the working code here: Github - Rails Datetimepicker Example

这篇关于Rails 4 x Bootstrap 3 Datetimepicker：用datetimepicker替换默认的datetime_select的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！