Skip to content

Instantly share code, notes, and snippets.

@railyboy
Created June 25, 2012 12:17
Show Gist options
  • Save railyboy/2988256 to your computer and use it in GitHub Desktop.
Save railyboy/2988256 to your computer and use it in GitHub Desktop.
How to use bootstrap-datepicker-rails with Bootstrap-Sass gem
<%= form_for(@person) do |f| %>
<% if @person.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(@person.errors.count, "error") %> prohibited this person from being saved:</h2>
<ul>
<% @person.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="row">
<div class="field span1">
<%= f.label :name %><br />
<%= f.text_field :name %>
</div>
<div class="field span2" data-behaviour='datepicker'>
<%= f.label :dob %><br />
<%= f.text_field :dob %>
</div>
</div>
<div class="row">
<div class="date_dob" id="date_dob">
<%= hidden_field_tag( :_current_date, :value => today ) %>
</div>
<div class="date_dob" id="date_dob_text">
<%= text_field_tag( :_todays_date, :value => today ) %>
</div>
<div class="field span1" data-behaviour='datepicker'>
<%= f.label :dod %><br />
<%= f.text_field :dod %>
</div>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-datepicker
//= require_tree .
var todaysDate = new Date();
$(document).on("focus", "[data-behaviour~='datepicker']", function(e){
$(this).datepicker({"format": "yyyy-mm-dd", "weekStart": 1, "autoclose": true})
$(this).datepicker().on('changeDate', function(ev) {
{alert ('Changed')};
})
// $(this).datepicker.on('changeDate', functin(ev) {
// // if (ev.date.valueOf() > todaysDate.valueOf()) {
// // $('#alert').show().find('strong').text('Date of Birth must not be after today!');
// // } else {
// // $('#alert').hide();
// // startDate = new Date(ev.date);
// // $('#date-start-display').text($('#date-start').data('date'));
// // }
// // $('#date_dob').datepicker('hide');
// }) ;
});
@Nerian
Copy link

Nerian commented Jun 25, 2012

On line 21 you are using date_select. It should be an input field.

data-behaviour='datepicker' must be in the input field, not in the parent div.

@railyboy
Copy link
Author

Oops! I've muddled my metaphors (well dates actually).

So I have been using the date picker with lines 33 and 34 dod (Date of Death).

I see what you mean by line 21. What I wanted to know was can I change from a text_field to just a date_field (think that exists in Rails)?

I have the alert working now, I'm updating the Gist. How do I put the date selected back into the DoD field?

@Nerian
Copy link

Nerian commented Jun 25, 2012

Not sure if I understand. What value do you want to put where?

@railyboy
Copy link
Author

If we concentrate of one field for now. DOD (lines 32-34). So in this case I want to enter a Date of Death and make sure that its not greater than the system current date. As I will have two 'datepicker's on the form I have used the suggestion of selecting as I did.

So when the changeDate event is called how do I check the date is not greater than todays, and then put the data (date of death) in the Dod field?

I couldn't find a Rails form helper for dates other than date_select. Does one not exist? So do we always present dates as text even in in the database we have stored the value as a date? Do I have to do a conversion somewhere in my (presumably model)?

@railyboy
Copy link
Author

okay, I have it wired-up as per your instructions. Just need to figure out how to do the date comparison and fail gracefully if wrong.

@Nerian
Copy link

Nerian commented Jun 25, 2012

When you click an input field that has been datapickerised a calendar will be presented. When you click on a date inside that calendar the calendar will disappear and a date will be shown in the input field. If that is not what currently happens, then there is something wrong in that code. There should be no need to manually set dates.

I suggest that you do that validation server side. The Rails app is will receive a dod value that you will compare to Date.today. No need to put the current date as a hidden field (that could be faked anyway, never trust those values).

Date and databases are another story. It depends on the database, but chances are you using MySQL so I think there is a Date type. Notice that your web application will always receive text from a form. It is up to you to interpret it, convert and manipulate to whatever your needs are.

@railyboy
Copy link
Author

Thanks Nerian. I need to do the comparison on the fly for the DOB (Date of Birth) as the current application (20 yr old VB6 app I am porting for a friend and using this as a way of learning rails) has some front-side validation. So for DOB I will need to after entering the date, calculate a persons age. From this a text_field: age will be updated. Hence reason for having the hidden_fields (thought this was easiest way).

Sorry if I have had several 'N00b' questions. I hope to be able to give back to the community in the next year once I feel confident in my abilities. Figure it will take that long to get everything down pat

@railyboy
Copy link
Author

Next I want to use your cool looking 'Rich Text Editor'. Was going to use TinyMCE, or the one from Thoughbot (think this was who did their own version), but yours looks well up for what I need.

@Nerian
Copy link

Nerian commented Jun 25, 2012

Sounds like fun :)

You should use this to get the value from the input fields.
http://api.jquery.com/val/

@railyboy
Copy link
Author

Hi again, I had a couple of meetings to attend this afternoon. I'm confused now. Is this plugin a jQuery plugin/extension of the jQuery date picker, or is it a pure javascript solution?

I've been trying to work out how to do the date calculations, and looking at using val I took to be just getting the value into a variable.
What is the valueOf() function - jQuery or javascript?

I have my hidden field which contains the server date (not formatted) and I then want to compare that with the date selected. Can you point me in the right direction of how to do age calculations.

Thanks again

@Nerian
Copy link

Nerian commented Jun 25, 2012

This datepicker is a jQuery plugin. It depends on jQuery. It doesn't extend the jQuery UI datepicker. It replaces it actually.

Date calculations are complicated stuff. Edge cases are common. That is why I said that you should do it in ruby. I have never done anything like that in javascript.

If you are doing this just for learning I will say 'fuck this feature' and move on. There is way too much to learn to waste so much time on a specific thing. When you are learning the first steps on something you want to get a overview of the whole thing as fast as possible.

The first book I read about Rails is Agile Web development with Rails. It is pretty good. Totally recommended :)

http://pragprog.com/book/rails4/agile-web-development-with-rails

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment