How to retrieve a range from bootstrap-datepicker-rails?

Question

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

Answer 1

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

Answer 2

Thanks to the explanations from Nerian and eternicode, I was able to build the right syntax for implementing the date picker in a Ruby on Rails 4 form.

Following example allows the user to setup a date range for some record validity:

The date range is formatted as dd/mm/yyyy

The data-behaviour applies to the whole 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>

Thanks a lot guys !

Best regards,

Fred