Created
June 25, 2012 12:17
-
-
Save railyboy/2988256 to your computer and use it in GitHub Desktop.
How to use bootstrap-datepicker-rails with Bootstrap-Sass gem
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<%= 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 %> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//= 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'); | |
// }) ; | |
}); |
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
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