Twitter Bootstrap Question posted in

Twitter bootstrap – Rails datepicker only works with _tag

I’m new to RoR, and after reading a lot of articles here and on the web, I got datepicker working on my RoR project, to filter search results. However, now I need to use datepicker to set some values in my model, but the _tag prevents that, and the create action does not save the dates in the DB.

I tried dropping the _tag, but then the JS does not seem to activate on my webpage and the Datepicker no longer pops up (although if I manually enter a date in to the field, the create works fine and the date is stored in the DB).

I tried using a hidden_field, and various other things to get it working and interacting with my model, but I am stuck.

So I have two flavors of the same question:
1 – How can I get datepicker to work without _tag? Based on what I have seen on Stackoverflow, that is a normal use.
2 – How can I use datepicker with a _tag and interact with my model?

Below are the relevant snippets of my code for the datepicker with _tag that works. Any help would be greatly appreciated!

GEMFILE

gem 'rails', '4.2.2'
gem 'jquery-rails',           '4.0.4'
gem 'jquery-ui-rails'
gem 'tinymce-rails'
# Bootstrap and stuff
gem "twitter-bootstrap-rails"
gem 'bootstrap-sass',          '3.2.0.0'
gem 'bootstrap-datepicker-rails'

# Datatables
gem 'jquery-datatables-rails', '~> 3.3.0'

HTML

<div class="row">
    <%= form_tag("/vacations/list", method: "get", action: 'dateFilter') do %>
  <div class="col-md-2 col-md-offset-0">
      <%= label_tag :start_date %>
      <%= text_field_tag :start_date %>
      <%= submit_tag "Filter by Date", class: "btn btn-primary" %>
  </div>
  <div class="col-md-2 col-md-offset-0">
      <%= label_tag :end_date %>
      <%= text_field_tag :end_date %>
  </div>
    <% end %>
</div>

VACATIONS.JS

$(document).ready(function() {
$('#vacations').dataTable({
    "pageLength": 25
});
$("#start_date").datepicker({dateFormat: 'yy-mm-dd'});
$("#end_date").datepicker({dateFormat: 'yy-mm-dd'});
});

VACATIONS CONTROLLER

def list
  get_data_set
  @start_date = params['start_date'] || ""
  @end_date = params['end_date'] || ""
    if @start_date.empty? && @end_date.empty?
      @vacations = Vacation.all
    else
      @vacations = dateFilter
    end
  end

def dateFilter
  @start_date = params['start_date']
  @end_date = params['end_date']
  @vacations = Vacation.where(start_date: @start_date..@end_date)
  return @vacations
end

The fact that datepicker works fine with the _tag makes me think I am either close or doing something dumb. Any help would be great.

UPDATE:

Here is the HTML for the new use case that half works – if I fill in the start_date and end_date field manually, I can update the model, but clicking on the field does not kick of the JS to bring up the Datepicker.

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_for(@vacation_report) do |f| %>

      <%= f.label :timeperiod_name %>
      <%= f.text_field :timeperiod_name, class: 'form-control' %>

      <div class="row">
        <div class="col-md-2 col-md-offset-0">
          <%= f.label :start_date %>
          <%= f.text_field :start_date %>
        </div>
      <div class="col-md-2 col-md-offset-0">
          <%= f.label :end_date %>
          <%= f.text_field :end_date %>
      </div>
    </div>
      <%= f.submit "Create", class: "btn btn-primary" %>
    <% end %>
  </div>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I got this working. Thanks to @MarsAtomic for pointing my thinking to the JS. Below is updated HTML and the JS that does work - I'm posting it in case it helps somebody else someday.

    vacation_report.html.erb

    <% provide(:title, "Create Report") %>
<h1>Create Report</h1>

<%= form_for(@vacation_report) do |f| %>

<div class="row">
  <div class="col-md-6 col-md-offset-3">

  <%= f.label :timeperiod_name %>
  <%= f.text_field :timeperiod_name, class: 'form-control' %>

  <div class="row">
    <div class="col-md-2 col-md-offset-0">
          <%= f.label :start_date %>
          <%= f.text_field :start_date, :class => 'datepicker' %>
    </div>
    <div class="col-md-2 col-md-offset-0">
        <%= f.label :end_date %>
        <%= f.text_field :end_date, :class => 'datepicker' %>
    </div>
  </div>
  <%= f.submit "Create", class: "btn btn-primary" %>
  </div>
</div>

<% end %>

    vacation_reports.js

    $(document).ready(function(){
$('#vacation_reports').dataTable({
    "pageLength": 25
});
$('.datepicker').datepicker();
});

  2. 0

    You should read up on how Rails forms work. Rails helper methods with the _tag suffix are used inside forms defined by the form_tag helper, whereas helpers without the _tag suffix are used inside forms defined by the form_for helper. This second kind of helper is known as a model object helper.

    Look at how you’ve defined your form:

    <%= form_tag("/vacations/list", method: "get", action: 'dateFilter') do %>
  ...
<% end %>

    This means that all helpers within your form must be of the _tag variety. When you randomly throw in f.text_field, then of course it’s not going to work, and it’s not because it’s a datepicker field.

    UPDATE:

    In order for Datepicker to work, you have to make sure that the element referred to in your JS file agrees with the HTML that you’re generating via your helper method.

    In your case, you’ve specified the element as a class:

    <%= f.text_field :timeperiod_name, class: 'form-control' %>

    Your JS, on the other hand, uses a hash mark (#), which would indicate an ID, and not a class.

    Change:

    $('#vacations').dataTable({

    to:

    $('.vacations').dataTable({

    You can safely denote an ID with # when there is only a single Datepicker element in your form.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search