bootstrap-datepicker-rails project integrates a datepicker with Rails 3 assets pipeline.
http://github.com/Nerian/bootstrap-datepicker-rails
https://github.com/eternicode/bootstrap-datepicker
Include bootstrap-datepicker-rails in Gemfile;
gem 'bootstrap-datepicker-rails'
or you can install from latest build;
gem 'bootstrap-datepicker-rails', :require => 'bootstrap-datepicker-rails',
:git => 'git://github.com/Nerian/bootstrap-datepicker-rails.git'
and run bundle install.
Add this line to app/assets/stylesheets/application.css
*= require bootstrap-datepicker
# Or if using bootstrap v3:
*= require bootstrap-datepicker3
Add this line to app/assets/javascripts/application.js
//= require bootstrap-datepicker
The default includes support for all languages. You can fine tune the included locales to suit your needs:
//= require bootstrap-datepicker/core
//= require bootstrap-datepicker/locales/bootstrap-datepicker.es.js
//= require bootstrap-datepicker/locales/bootstrap-datepicker.fr.js
Just use the simple data-provide='datepicker'
attribute.
<input type="text" data-provide='datepicker' >
Or call datepicker() with any selector.
<input type="text" class='datepicker' >
<script type="text/javascript">
$(document).ready(function(){
$('.datepicker').datepicker();
});
</script>
Examples:
http://eternicode.github.io/bootstrap-datepicker/
There are a lot of options you can pass to datepicker(). They are documented at https://github.com/eternicode/bootstrap-datepicker
Please use the rake task to update the assets.
Examples :
rake update # Update the assets with the latest tag source code on master
rake update v1.4.0 # Update the assets with the specified tag source code
Use Github Issues.
Copyright (c) 2014 Gonzalo Rodríguez-Baltanás Díaz
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
bootstrap-datepicker-rails's People
Forkers
excid3 asgeo1 robbied72 evendis tiagoblackcode netoctone wakilo arjanl victorhazbunanuff railyboy glebtv robheittman sixfingers priviterag flynfish karzac unknown-dev albertbellonch ivoke palderson trietle chris24 siong1987 trongrg tedkulp 7even ideasasylum pinglamb jay3126 eeng madmax prandazzo flintinatux zpaulovics shimaanabdanet raeno tsl0922 rabidfire jcoleman jfabre musicglue odesey pk4media booda406 tianbymy zhiyisoft onemagicant silasb olevanban choyno ijpe andresilveirah amitsuroliya lslab mzaragoza vipulchhabra lifedna fisikal-limited 8bithero samda tkwwarchive swapt camray coppermind zires railslove stager94 mfazekas pauloat josephmg kyleeardley sman591 clevertechru spizm cwest jlfenaux dennisbaskin busyconf badjo1 wethu shpakvel goodylabs tsandras idolweb icleversoft httplab rmm5t nicholaswagner sebastianiorga galingospodinov yangman-c smoothdvd romuloccomp bencolon venturestorm matbox ibazylchuk jmbae group16 evert7190bootstrap-datepicker-rails's Issues
The datepicker calender position
Uncaught TypeError: Cannot call method 'removeClass' of undefined
Uncaught TypeError: Object [object Object] has no method 'datepicker'
I'm getting the error:
Uncaught TypeError: Object [object Object] has no method 'datepicker'
I have this in my application.js file:
// = require jquery
//= require bootstrap
//= require bootstrap-datepicker
//= require jquery_ujs
//= require_tree .
$(document).on("focus", "[data-behaviour~='datepicker']", function(e){
$(this).datepicker({"format": "yyyy-mm-dd", "weekStart": 1, "autoclose": true});
});
$(document).on("focus", "[data-behaviour~='datepicker']", function(e){
$(this).datepicker({"format": "yyyy-mm-dd", "weekStart": 1, "autoclose": true});
});
And here is my date field:
https://gist.github.com/2989158
Do you have any idea what might be causing the error?
Thanks!
Display the curent month by default
Is it possible to display the current month by default ? If I set startDate value, il will always use that maonth as a start-up month in the view:
<script>
$(function () {
$('#operation_value_date').datepicker({autoclose: true, "weekStart": 1, language: "fr", format: "dd/mm/yyyy", todayHighlight: true});
$('#operation_close_date').datepicker({autoclose: true, "weekStart": 1, language: "fr", startDate: "01/01/2012", format: "dd/mm/yyyy", todayHighlight: true});
});
</script>
If I set nothing it will display year 1912, or 1936 or 1907 as a start view. More of that id does not highlight the date that was previousely set (fir example in case of editing the date and clicking on the textfield).
I'm on Rails 3.2.8, bootstrap-datepicker-rails v.0.6.24.
Thank you.
should mask value
when applied to a field, user input should be limited with only acceptable characters
Date Range?
Is there a way to do a date range with this gem? I looked in all the documentation and i'm not really sure how to set that up if there is indeed a way.
bootstrap switch is breaking bootstrap-datepicker
See:
Bttstrp/bootstrap-switch#27
For those who want to solve that quick:
.datepicker .switch {
display: table-cell;
}
date picker classes change
I checked all the isues and found one that looks like my problem but reordering the requires dont fix it, i have this files:
application.js
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap
//= require bootstrap-datepicker
//= require_tree .
Gemfile.rb
gem 'twitter-bootstrap-rails'
gem 'taps'
gem 'rails', '3.2.6'
gem 'heroku'
gem 'therubyracer'
gem 'haml-rails'
gem 'jquery-rails'
gem 'sass'
gem 'sass-rails'
gem 'meta_search'
gem 'coffee-rails'
gem 'mercury-rails'
gem 'less-rails'
gem 'bootstrap-datepicker-rails'
gem 'simple_form'
gem 'activeadmin'
the problem just popped out suddenly, everything just messed up, i force reinstalled bootstrap and tried out many other things but the classes change from:
div class="datepicker dropdown-menu" style="top: 91px; left: 747.5px; display: block;"
to:
div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="ui-datepicker-div"
when i click the field, is making me crazy. please help.
i even reseted to before activeadmin installation wich was the last commit the selector worked and still persist the problem and reseted server each time i made a change. i had it in dd-mm-yyyy configuration and changed to dd/mm/yyyy in the selector, is just weird.
css error
.datepicker td.active.disabled:hover.active {
background-color: #003399 \9;
}
in bootstrap-datepicker.css
should be obviously 👍
background-color: #003399;
spurious semi-colon breaks IE
All of the locale scripts begin with a semi-colon which is breaking IE9.
/**
- Arabic translation for bootstrap-datepicker
- Mohammed Alshehri [email protected]
*/
;
(function($){
$.fn.datepicker.dates['ar'] = {
Latest version causes asset precompile error when deploying on Heroku
When I tried to deploy on Heroku with the latest gem, I got a precompile error resulting from an unexpected token "{" somewhere in the JS. Not sure how to recreate or how to pinpoint where it is, but I switched to gem 'bootstrap-datepicker-rails', '0.6.21' and it worked fine.
DatePicker doesnt show correctly when in popover
I managed to get the datepicker to display for a field inside a popover by calling it in a callback, but when displayed it is at the top of the window, even though the field is much further down.
Install error
Fetching gem metadata from https://rubygems.org/......
Fetching gem metadata from https://rubygems.org/..
Could not find gem 'bootstrap-daterangepicker-rails (>= 0) ruby' in the gems available on this machine.
Single click in IE7/8 doesn't work
I cannot get the datepicker to work in IE7/8 with a single click under XP/Vista.
I have logged a ticket with Andrew Rowls as Issue #174.
I have tried to put in place what looked like a fix from another repo but was unsuccessful. Unfortunately the project I am doing for a friend needs to run under IE7 minimum, and I've been developing under Firefox so all looks good until I run it in IE under a VM
Not working with simple_form
I follow the guide as below:
In "application.css":
*= require_self
*= require tree
*= require bootstrap-datepicker
In "application.js":
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap
//= require bootstrap-datepicker
//= require_tree .
In the "date.js" file:
$('[data-behaviour~=datepicker]').datepicker({
"format": "yyyy-mm-dd",
"weekStart": 1,
"autoclose": true
});
In the "view":
= simple_form_for @Vendor, html: { class: 'form-horizontal' } do |f|
= f.input :start_date, :as => :string, :input_html => { data: {behaviour: "datepicker"}}
But no date_picker pop up. Any suggestion that I miss any steps.
It works when I use the simple datepicker: http://www.chadcf.com/blog/jqueryui-datepicker-rails-and-simpleform-easy-way
Can't clear date on edit.
I am using Rails 4.0 & Ruby 2.0 with Twitter-Bootstrap-Rails. Datepicker works great, except if I edit a record and click on the date ( or create a new record) I can't click away from the date without it putting in a date. If I click into the field and delete the date, when I click away it still fills it back in with today's date. I'm new enough to not be able to tell if this is something I am doing wrong or a bug.
My JS code is:
$(document).on("focus", "[data-behaviour~='datepicker']", function(e){
$(this).datepicker({"format": "mm-dd-yyyy", "weekStart": 1, "autoclose": true})
});
If I clear out the date and click away from the text input field it automatically inserts today's day.
Styling issues for days not in current month
The gem works fine - as advertised. Kudos! However, days not in current month have the same weight as the days those are. This is a bit irritating.
When I did a view source, I couldn't find any CSS being loaded. Also the instructions don't mention it at all. Let me know if you'd want me to send you a patch (if I get around to solving this and other things).
Thanks.
Date from text_field is not saving to the DB
HI,
I just installed your gem and I have gotten the datepicker to show up and display in the view the way I want it, but when I create my tournament it doesn't save the date in the text field to the database.
My view:
<h1>New tournament</h1>
<fieldset>
<%= form_for @tournament do |f| %>
<td>
<tr>
</tr>
<td>
<div class="field">
<%= f.label :name %>
<%= f.text_field :name, :autofocus => true %>
</div>
</td>
<td>
<div class="field" >
<%= f.label :date %>
<%= f.text_field :date, class: 'datepicker' %>
</div>
</td>
<td>
<div class="field">
<%= f.label :reg_fee %>
<%= f.text_field :reg_fee %>
</div>
</td>
<div class="form-actions">
<%= f.submit "Create", :class => 'btn btn-primary' %>
<%= f.submit "Cancel", :class => 'btn btn-primary' %>
</div>
<% end %>
</fieldset>
And my coffeeScript
$ ->
$('.datepicker').datepicker()
I've also tried doing
$(document).on "focus", "[data_behavior~='datepicker']", (e) ->
$(this).datepicker
format: "mm/dd/yyyy"
weekstart: 1
autoclose: true
with:
<div class="field" >
<%= f.label :date %>
<%= f.text_field :date, :data_behavior => 'datepicker' '%>
</div>
When I input the date manually it works fine.
Any help would be much appreciated. Thanks!
Starts with Feb 1 1970?
The date picker initially starts with Feb 1, 1970. How do I get it to default to Today or the currently selected date for a field that's already populated?
JavaScript assets do load properly, but CSS don't
More infos here:
Update:
It seems the problem isn't that the CSS is not loaded, but that the datepicker's generated HTML does not have some needed classes, like ".datepicker".
Here's the generated code:
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="position: absolute; top: 282.5px; left: 575.5px; z-index: 1; "><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"><a class="ui-datepicker-prev ui-corner-all" onclick="DP_jQuery_1345895877573.datepicker._adjustDate('#dp1345895877575', -1, 'M');" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a><a class="ui-datepicker-next ui-corner-all" onclick="DP_jQuery_1345895877573.datepicker._adjustDate('#dp1345895877575', +1, 'M');" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a><div class="ui-datepicker-title"><span class="ui-datepicker-month">August</span> <span class="ui-datepicker-year">2012</span></div></div><table class="ui-datepicker-calendar"><thead><tr><th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th><th><span title="Monday">Mo</span></th><th><span title="Tuesday">Tu</span></th><th><span title="Wednesday">We</span></th><th><span title="Thursday">Th</span></th><th><span title="Friday">Fr</span></th><th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th></tr></thead><tbody><tr><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">1</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">2</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">3</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">4</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">5</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">6</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">7</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">8</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">9</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">10</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">11</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">12</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">13</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">14</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">15</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">16</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">17</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">18</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">19</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">20</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">21</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">22</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">23</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">24</a></td><td class=" ui-datepicker-week-end ui-datepicker-days-cell-over ui-datepicker-today" onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default ui-state-highlight ui-state-hover" href="#">25</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">26</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">27</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">28</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">29</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">30</a></td><td class=" " onclick="DP_jQuery_1345895877573.datepicker._selectDay('#dp1345895877575',7,2012, this);return false;"><a class="ui-state-default" href="#">31</a></td><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td></tr></tbody></table></div>
Missing icons
Hi, I've installed gem, added includes for javascript and css, but icons (arrows) does not appear on callendar.
Do I have to include something else?
I'm using bootstrap-sass gem.
Problem with UserMailer + premailer-rails
Hello,
Great gem, but I had problems using it with UserMailer + premailer-rails. I got this error when sending emails with HTML template:
undefined method `[]' for nil:NilClass
To fix it a just change the way bootstrap-datepicker.css is inserted:
Old way: *= require bootstrap-datepicker (into application.css.scss)
New way: @import "bootstrap-datepicker" (into custom.css.scss)
You could try to reproduce this error and change README.md instructions (https://github.com/Nerian/bootstrap-datepicker-rails#configuration)
Thanks!
Problem with datepicker attached to an non input
Hi @Nerian,
I am facing an issue with your gem and I can't figuring out what it's really happening.
The issue is present in the version 1.0.0.5, but not in the previous one the 1.0.0.3.
The issue is related with the ability to attach the datepicker to an non input field (a div in my case,and this is possible looking at the eternicode bootstrap datepicker).
My code is the following:
$(selector).datepicker().on('changeDate', function() {
var picker = $(selector).data('date');
console.log(picker);
});
Stupid and easy code, but good enough to illustrate the issue.
$(selector) is a DIV
Until version 1.0.0.3 the $(selector).data('date') return the value of the date (in a sql format - yyyy-mm-dd), with the new version 1.0.0.5 instead, $(selector).data('date') return undefined.
What excatly changed between the 2 version? I saw that there are few changes, and one use tooltip on the date, but I am not really sure what can create this issue (kind of annoying btw, because the other only way to access the value should be using an ev in the function of changedate, and returning ev.date, that unfortunately sucks because will always return the date but with a day less than the date selected).
Could you advise me in regard?
For now I just regress my updating of your gem at the 1.0.0.3, but I really look into a solution.
Best
Dinuz
How to use with Bootstrap-Sass gem
I have setup using plain ERB tempting the following in a view that contains an individuals date of birth (dob).
I'm new at this Rails/HTML5/CSS3/jQuery/bootstrap gig as you can probably tell from this 'how to use' question.
Your example has how the input should look. Can you confirm if the data-behaviour='date picker' should go in my bootstrap div class statement or in my f.text_field (for the input). I have tried both but don't seem to be getting this to fire.
<div class="field span2 data-behaviour='datepicker'">
<%= f.text_field :dob %>
<%= f.label :dob, "Birth Date" %>
</div>
or
<div class="field span2">
<%= f.text_field :dob, :class => "data-behaviour='datepicker'" %>
<%= f.label :dob, "Birth Date" %>
</div>
Does the 'autoclose' fire as soon as one clicks the date entry. Other date pickers I have played with (jQuery) automatically update the field on selection. Do we have to pick this up with the change event?
Lost styles?
data-date-viewmode not working correctly?
Could it be, that:
data-date-viewmode="years"
does not work correctly?
It stays on the day viewmode and not on the viewmode years
<label for="user_birthday">Birthday</label>
<div class="input-append date" id="user_birthday" data-date-viewmode="years" data-date-format="dd-mm-yyyy">
<%= f.input_field :birthday, id: "user-birthday", class: "span2", :placeholder => 'dd-mm-yyyy' %>
<span class="add-on" >
<i style="color: grey;" class="icon-calendar"></i>
</span>
</div>
<p class="help-block">Format must be dd-mm-yyyy</p>
html rendered
<div class="input-append date" id="user_birthday" data-date-viewmode="years" data-date-format="dd-mm-yyyy
<input class="string required span2" id="user-birthday" name="user[birthday]" placeholder="dd-mm-yyyy" size="50" type="text" />
<span class="add-on">
<i style="color: grey;" class="icon-calendar"></i>
</span>
</div>
<label for="user_birthday">Birthday</label>
<div class="input-append date" id="user_birthday" data-date-viewmode="years" data-date-format="dd-mm-yyyy">
<%= f.input_field :birthday, id: "user-birthday", class: "span2", :placeholder => 'dd-mm-yyyy' %>
<span class="add-on" >
<i style="color: grey;" class="icon-calendar"></i>
</span>
</div>
<p class="help-block">Format must be dd-mm-yyyy</p>
The guys from simple_form-bootstrap
said, that this problem should be on bootstrap-datepicker-rails
not updating locale upon I18N.locale changed
date-picker-rails is running fine with my simple_form, however upon changing locale ( fr or en) , the calendar is still in english ..
I inserted into my application.js
//= require bootstrap-datepicker/core
//= require bootstrap-datepicker/locales/bootstrap-datepicker.fr
//= require bootstrap-datepicker/locales/bootstrap-datepicker.es
I have a simple_form input
class DatePickerInput < SimpleForm::Inputs::StringInput
def input
value = object.send(attribute_name) if object.respond_to? attribute_name
input_html_options[:value] ||= I18n.localize(value) if value.present?
input_html_classes << "datepicker"
super # leave StringInput do the real rendering
end
end
how the I18n.locale relate to the datepicker locale ?
[SOLVED]
I inserted into my layout application.html.haml
=javascript_tag "window.locale = #{I18n.locale.to_s.inspect};"
Then in my js file :
$(".datepicker").datepicker format: "dd-mm-yyyy", language: locale
startDate, endDate not working
hi,
you have mentioned that eternicode's code has been included. if so, the options should be working. but they don't seem to be.
i have a simple code which fails:
$(function() {
$( "#start-date" ).datepicker({
onSelect: function( selectedDate ) {
$("#end-date").datepicker( "setStartDate", selectedDate );
}
});
$( "#end-date" ).datepicker({
onSelect: function( selectedDate ) {
$("#start-date").datepicker( "setEndDate", selectedDate );
}
});
});
disabling of the date fails. sorry bro! i'm headed back to eternicode now..
Datepicker bootstrap - input_append
Hello, I'm stuck trying to make datepicker work correctly with bootstrap.
If i associate both for 'datepicker' class and 'data-behaviour' =>'datepicker' attributes to my input fields it works correctly and format data with this pattern "dd/mm/yyyy".
What i would like to do instead is associate the picker with the span and set the value to my input field.
I'm actually displaying it in control-group with input-append, here is my html code
<div class="control-group">
<label class="date optional control-label" for="renewal_sales_invoice_date">Data fattura vendita</label>
<div class="controls">
<div class="input-append">
<input class="input-small" data-behaviour="datepicker" id="renewal_sales_invoice_date" name="renewal[sales_invoice_date]" size="30" type="text" value="05/01/2012">
<span class="add-on datepicker">
<i class="icon-calendar"></i>
</span>
</div>
</div>
And this is my js script call
$('.datepicker').datepicker({
"format": "dd/mm/yyyy",
"weekStart": 1,
"language": '#{locale}',
"autoclose": true
});
This way it doesn't update my input field value so i tried to use the 'changeDate' callback to set it manually like this
$('.datepicker').on('changeDate', function(ev){
var dt = new Date(ev.date.valueOf());
$(this).parent().children('input').attr("value", ev.date.toString("dd/mmyyyy"));
console.log($(this).parent().children('input').attr("value"));
});
This solution works partially because it updates the value but does not format it. :(
Hope someone could help me :)
have a nice day
License missing from gemspec
Some companies will only use gems with a certain license.
The canonical and easy way to check is via the gemspec,
via e.g.
spec.license = 'MIT'
# or
spec.licenses = ['MIT', 'GPL-2']
Even for projects that already specify a license, including a license in your gemspec is a good practice, since it is easily
discoverable there without having to check the readme or for a license file.
For example, there is a License Finder gem to help companies ensure all gems they use
meet their licensing needs. This tool depends on license information being available in the gemspec. This is an important enough
issue that even Bundler now generates gems with a default 'MIT' license.
If you need help choosing a license (sorry, I haven't checked your readme or looked for a license file),
github has created a license picker tool.
In case you're wondering how I found you and why I made this issue, it's because I'm collecting stats on gems (I was originally
looking for download data) and decided to collect license metadata,too, and make issues for gemspecs not specifying a license as a public service :).
I hope you'll consider specifying a license in your gemspec. If not, please just close the issue and let me know. In either case, I'll follow up. Thanks!
p.s. I've written a blog post about this project
Clicking browser vertical scrollbar causes datepicker to disappear
Hello, thanks for the great datepicker for rails.
I've been watching my users interact with the datepicker. I have it attached to an input field with autoclose turned on. When the field is near the bottom of the browser window and the user clicks on the date field this causes the datepicker to appear partially off the bottom of the browser window. They then use the vertical scrollbar to bring it into view but it disappears upon clicking the scrollbar (at least it does in IE). When it disappears the field retains focus so that clicking on the date field again does not cause the datepicker to reappear. This leaves them confused.
I suggest that clicking on the vertical scrollbar should not cause the datepicker to hide itself.
I'm using bootstrap-datepicker-rails (0.6.41). The following change results in behavior that works for me. This is in core.js at line 78 and adds a test for the X location of the click against the browser viewport width.
$(document).on('mousedown', function (e) {
// Clicked outside the datepicker, hide it
if ($(e.target).closest('.datepicker.datepicker-inline, .datepicker.datepicker-dropdown').length === 0 &&
e.clientX < this.body.clientWidth) {
that.hide();
}
});
Thanks, -- Jim
Datepicker appears at the bottom of the page!
This is my installation details but still I could not resolve the problem.
gem file:
gem 'bootstrap-datepicker-rails'
gem 'bootstrap-sass'
my application.css.erb
*= require bootstrap-datepicker
*/
@import 'bootsrap';
my application.js
//= require bootstrap-datepicker
//= require bootstrap-datepicker/core
//= require bootstrap-datepicker/locales/bootstrap-datepicker.es
//= require bootstrap-datepicker/locales/bootstrap-datepicker.fr
my page HTML
<%= f.text_field(:warranty, :size => 10, :class => "datepicker") %>
and the js at the bottom of the page:
$('.datepicker').datepicker();
The problem is that the date picker appears at the bottom of the page instead of a normal popup.
Unobtrusively replace date fields
Hey there,
I am wondering if there's a way to unobtrusively replace the normal date fields with this.
Sometimes you rely on the default behavior with multi parameter attributes like date(3i) and such. I for example had to replicate the default behavior by parsing those triplets for some date fields in an non-activerecord model. Due to the fact that I have implemented those things in many places all over my app, and because it's just better to have a non-js way to pick dates, too, I'd love the gem to just replace the existing behavior without me needing to adjust parsing the dates.
Is this possible in any way? Is there a default way to replace those date triplets automagically, or do I have to implement some onLoad filters on the jQuery side?
Thanks for your help
Arne
Y in format will not rendered
$('[data-behaviour~=datepicker]').datepicker( { format: 'd.m.Y', language: 'de', todayBtn: true, calendarWeeks: true } );
produces in my case with rails 4 and bootstrap 3 in the input field after select a date
12.12.Y
Suggestion: add z-index:9000 style to .datepicker
Put the picker in front when you use a modal box, for example lazybox.
bootstrap-datepicker-rails blocks daterangepicker
my application.js included both '= require bootstrap-datepicker/core' and '= require daterangepicker'
but when i click on textfield for daterangepicker, then textfields not take the input value from daterangepicker. So, my question is can we use daterangepicker along with bootstrap-datepicker-rails?
Datepicker displayed by default and doesn't update text_field after selection
usability
hey,
great plugin, thanks for your work!
just a small notice to the usablity:
- select a date: it would be better if there is a "OK" button. otherwise the user has to click somewhere else to hide the picker.
inspiration: http://jdewit.github.com/bootstrap-timepicker/ - switching month by clicking on "old" dates. nice feature, but confusing for unexpirenced users :)
again, nice work!
TypeError: Object [object Object] has no method 'datepicker'
Ok, this error is probably a FAQ at this stage but I still can't figure it out!
My application.js
:
//= require jquery
//= require jquery_ujs
//= require dresssed
//= require bootstrap-datepicker
//= require_tree .
(dresssed is a bootstrap-based rails theme)
From my erb.html:
<%= f.text_field :due, 'data-behaviour' => 'datepicker', class: 'datepicker' %>
And (ignoring any of the javascript/coffeescript to initialise it), if try to manually call datepicker from the Chrome console
$("[data-behaviour~='datepicker']").datepicker();
TypeError: Object [object Object] has no method 'datepicker'
$("[data-behaviour~='datepicker']")[0].datepicker();
TypeError: Object #<HTMLInputElement> has no method 'datepicker'
$("[data-behaviour~='datepicker']");
[
<input class="datepicker" data-behaviour="datepicker" id="plan_due" name="plan[due]" size="30" type="text" value="2012-08-26">
]
$(".datepicker");
[
<input class="datepicker" data-behaviour="datepicker" id="plan_due" name="plan[due]" size="30" type="text" value="2012-08-26">
]
$(".datepicker").datepicker();
TypeError: Object [object Object] has no method 'datepicker'
$(".datepicker")[0].datepicker();
TypeError: Object #<HTMLInputElement> has no method 'datepicker'
But all the bootstrap-datepicker js files have been loaded.
Any ideas? Please point out my stupidity ;-)
Undefined NaN with "dd-mm-yyyy" format
Hi
When using dd-mm-yyyy date formats (spanish), the calendar shows an "undefined NaN" message
This issue seems to be fixed on Andrew Rowls plugin but not here in your great gem
Has that been merged already?
Can't get it working Rails 3.2 Windows 7
Complete noob so I'm sure it's something I'm doing, but after 3 hours of trying I can't figure out how to get this to work. The calendar is just not showing up at all when I click in the text field.
Gist here:
UI issue in Safari when using class `datepicker` on input object
If you create an input with class datepicker
, the carrot that normally only shows at the top of the date picker shows all the time at top: 0, left: 0
. To circumvent this, a class other than datepicker
has to be used.
This isn't happening in Chrome, but is happening in Safari.
Datepicker location changes when using jquery 1.8.3
When I use jquery 1.8.3 the datepicker calender appears at the top of the screen. If I switch back to 1.7.2 it works fine.
I have updated my datepicker gem and it still exhibits the above behavior.
Any help appreciated.
Cannot save the dates
Hello,
when i add a new record, i the dates are not saved at all...
Also, if i insert the dates manually and try to edit, browser stops working and i get the following error :
An action script on this page may be busy, or has stopped responding. You can stop the script now, or continue to see if the script will complete.
Script: http://127.0.0.1:3000/assets/bootstrap-datepicker/core.js?body=1:666
How can i fix this? I have included the gem in my gem file and i also followed all the instructions.
Thank you
Choose date should close dialog
Hi,
I have an feature request. Currently if I click on a date it will be selecting by changing the background color to blue. But I have to do two clicks to get the date into the textfield.
If the user clicks on a date it should select this date and close the dialog.
Regards,
Martin
Can't get datepicker to work using CoffeeScript
Rails 3.2.7 with latest bootstrap and jquery. I have an input field whose html is <input data-behavior="datepicker" id="race_begins_on" name="race[begins_on]" size="30" type="text" value="2012-07-29">
and a coffeescript file which executes on document.ready(); --
->
$(document).on("focus", "[data-behaviour~='datepicker']", (event) =>
$(@).datepicker({"format": "yyyy-mm-dd", "weekStart": 1, "autoclose": true}))
I also tried straight JS from your example using the coffeescript backtick escape.
I can see (through Chrome inspect element) the JS is getting included, the datepicker code is present, but nothing happens when my field gets focus. Any thoughts?
bootstrap-datepicker is not working inr ails 3.2.5
http://stackoverflow.com/questions/12072689/trying-to-put-the-bootstrap-datepicker-in-my-rails-project#comment16139024_12072689
I included gem 'bootstrap-datepicker-rails' in my gemfile.
I included it in my application.js and in css also.
But it is now working in my view.htm.erb.
datepicker opens on the bottom of the page
instead of a small popup, date picker appers on the bottom of the page.
screenshot: http://image.yogile.com/adigs3nc/gzrnihufybeyyxm5unlwf7-large.png
Trailing commas error
When I include the bootstrap-datepicker-rails in my program (using Rails 3.1) I'm not able to compile my assets when I push to Heroku based on a trailing commas error. This is triggered by Closure compiler, which fires a parse error saying there are trailing commas (around some part of the code that begins with: days: ["
I believe this is one of the locale files but have not been able to locate it.
Update README with how to include without all locales or only specific locales
Hi!
It might be an overkill (in some situations) to include all locales. Perhaps it might be nice to include in the README, how once can only include the core or only specific locales as the user wants.
Cheers,
Aditya
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.