如何从bootstrap-datepicker-rails中检索范围？ [英] How to retrieve a range from bootstrap-datepicker-rails?

问题描述

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

开始日期默认是今天

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

日期格式为dd / mm / yyyy

我从这段代码开始，效果很好：

 code>< div class =field> 
<％= f.label：active_from％>< br> 
<％= f.text_field：active_from，'data-behavior'=> 'datepicker'，'data-date-format'=> 'dd / mm / yyyy'％> 
< script type =text / javascript> 
 $（'[data-behavior〜= datepicker]'）。datepicker（）; 
< / script> 
< / div> 
< div class =field> 
<％= f.label：active_to％>< br> 
<％= f.text_field：active_to，'data-behavior'=> 'datepicker'，'data-date-format'=> 'dd / mm / yyyy'％> 
< script type =text / javascript> 
 $（'[data-behavior〜= datepicker]'）。datepicker（）; 
< / script> 
< / div> 
  

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

 < div class =input-daterange> 
<％= f.text_field：active_from，'data-behavior'=> 'datepicker'，'data-date-format'=> 'dd / mm / yyyy'，'value'=> DateTime.now.strftime（％d /％m /％Y）％> 
< span class =add-on>到< / span> 
<％= f.text_field：active_to，'data-behavior'=> 'datepicker'，'data-date-format'=> 'dd / mm / yyyy'，'value'=> （DateTime.now + 1.years）.strftime（％d /％m /％Y）％> 
< script type =text / javascript> 
 $（'[data-behavior〜= datepicker]'）。datepicker（）; 
< / script> 
< / div> 
  

你能帮我把我的2日期选择转换成范围选择吗？
非常感谢！

祝福，

Fred

解决方案

尝试这样：

在app / assets / javascripts / main.js

  //这将初始化具有data-behavior = datepicker作为日期戳的所有元素。 
 //没有必要在其他地方重复这个声明。 
 $（document）.ready（function（）{
 $（'[data-behavior〜= datepicker]'）。datepicker（）; 
}）
  

将其添加到app / assets / javascripts / application.js中

  // = require main 
  

在您的视图中：

 < div class =input-daterangedata-behavior ='datepicker'id =datepicker> 
< input type =textclass =input-smallname =start/> 
< span class =add-on>到< / span> 
< input type =textclass =input-smallname =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

I'm a newbie full of hope and amazed with Ruby on Rails 4. In my application, I need the user to input a range of dates. For this, I found the bootstrap-datepicker-rails gem very sexy. It basically works fine for indivdual dates, but I can't manage to get what I want talking about a date range :

The start date default is today

The end date default is today + 1 year, and has to be greater than the start date.

The date format is dd/mm/yyyy

I started with this piece of code which works well :

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

But trying to implement in rails the date range input examples of code found on the original documentation @github, I mess up : no interaction between star and end dates.

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

Can you please help me convert my 2 dates selection into a range selection ? Thanks a lot !

Best regards,

Fred

解决方案

Try this:

in 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();
})

Add this in app/assets/javascripts/application.js

//= require main

In your view:

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

Docs:

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

这篇关于如何从bootstrap-datepicker-rails中检索范围？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！