如何从 bootstrap-datepicker-rails 中检索范围？答案

【问题标题】：How to retrieve a range from bootstrap-datepicker-rails?如何从 bootstrap-datepicker-rails 中检索范围？
【发布时间】：2013-10-13 15:17:50
【问题描述】：

我是一个充满希望并对 Ruby on Rails 4 感到惊讶的新手。在我的应用程序中，我需要用户输入日期范围。为此，我发现 bootstrap-datepicker-rails gem 非常性感。它基本上适用于个人日期，但我无法获得我想要谈论的日期范围：

开始日期默认是今天

结束日期默认为今天 + 1 年，并且必须大于开始日期。

日期格式为 dd/mm/yyyy

我从这段运行良好的代码开始：

<div class="field">
  <%= f.label :active_from %><br>
  <%= f.text_field :active_from, 'data-behaviour' => 'datepicker', 'data-date-format' => 'dd/mm/yyyy'%>
  <script type="text/javascript">
    $('[data-behaviour~=datepicker]').datepicker();
  </script>
</div>
<div class="field">
  <%= f.label :active_to %><br>
  <%= f.text_field :active_to, 'data-behaviour' => 'datepicker', 'data-date-format' => 'dd/mm/yyyy'%>
  <script type="text/javascript">
    $('[data-behaviour~=datepicker]').datepicker();
  </script>
</div>

但尝试在 Rails 中实现原始文档@github 上的日期范围输入代码示例，我搞砸了：开始日期和结束日期之间没有交互。

<div class="input-daterange">
    <%= f.text_field :active_from, 'data-behaviour' => 'datepicker', 'data-date-format' => 'dd/mm/yyyy', 'value' =>  DateTime.now.strftime("%d/%m/%Y") %>
    <span class="add-on">to</span>
    <%= f.text_field :active_to, 'data-behaviour' => 'datepicker', 'data-date-format' => 'dd/mm/yyyy', 'value' =>  (DateTime.now + 1.years).strftime("%d/%m/%Y") %>
    <script type="text/javascript">
      $('[data-behaviour~=datepicker]').datepicker();
    </script>
</div>

您能帮我将我的 2 个日期选择转换为范围选择吗？非常感谢！

最好的问候，

弗雷德

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap datepicker ruby-on-rails-4

【解决方案1】：

试试这个：

在 app/assets/javascripts/main.js 中

// This initializes all elements that have data-behaviour=datepicker as a datepicker.    
// There is no need to repeat this statement anywhere else. 
$(document).ready(function(){
  $('[data-behaviour~=datepicker]').datepicker();
})

在 app/assets/javascripts/application.js 中添加这个

//= require main

在你看来：

<div class="input-daterange" data-behaviour='datepicker' id="datepicker">
   <input type="text" class="input-small" name="start" />
   <span class="add-on">to</span>
   <input type="text" class="input-small" name="end" />
</div>

文档：

http://eternicode.github.io/bootstrap-datepicker/?markup=range&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&language=en&orientation=auto&keyboardNavigation=on&forceParse=on#sandbox

【讨论】：

您好 Nerian，感谢您的代码。它显示得很好，但我仍然有问题。我写道：
to
。行为是存在的，但它不会更新我的 active_from 和 active_to 字段。 Rails 语法会是什么？
@user1185081 所以显示了日期选择器，但是当你选择一个日期时，输入没有更新？ js控制台有没有报错信息？
我相信@Nerian 试图证明的要点是，您希望在.input-daterange 元素上实例化日期选择器，而不是内部输入。在您的示例中，这意味着将 data-behavior="datepicker" 属性从输入移动到包含 div。
非常感谢 Nerian 和 eternicode，你们帮我看穿了！

【解决方案2】：

感谢 Nerian 和 eternicode 的解释，我能够构建正确的语法来以 Ruby on Rails 4 形式实现日期选择器。

以下示例允许用户为某些记录的有效性设置日期范围：

日期范围格式为 dd/mm/yyyy

数据行为适用于整个 DIV

<div class="input-daterange" data-behaviour="datepicker" id="datepicker" data-date-format="dd/mm/yyyy">
   <%= f.text_field :active_from, :class => "input-small" %>  
   <span class="add-on">to</span>
   <%= f.text_field :active_to, :class => "input-small" %> 
</div>
<script type="text/javascript">
  $('[data-behaviour~=datepicker]').datepicker();
</script>

非常感谢大家！

最好的问候，

弗雷德

【讨论】：