I have a Rails project using simple_form and I can't seem to get the date picker to work (using the Bootstrap Datepicker gem https://github.com/Nerian/bootstrap-datepicker-rails.
I have tried what's been proposed in the following stack overflow posts:
How do i write a cleaner date picker input for SimpleForm
Add datepicker with rails 3.2.11, simple_form and bootstrap
Changes in the form are not saved to database
But, so far none of them have worked.
Here is my code:
In my View I have this:
<%= f.input :start_date, :input_html => {data: {behaviour: "datepicker"}}, :as => :string %>
I have added the following to Application.js
//= require bootstrap-datepicker
$(function() {
$('input.datepicker').datepicker();
});
I have added the following to Application.css
*= require bootstrap-datepicker
I've even tried putting the js code directly on the page and it still doesn't work.
Any ideas? I'm stumped.
Thanks
Your function assigning the datepicker behavior searches for inputs with class 'datepicker'. Your inputs must have this class.
Use the following:
<%= f.input :start_date, :input_html => {class: 'datepicker', data: {behaviour: "datepicker"}}, :as => :string %>
Related
I'm working with rails' activeadmin and creating a custom form like so:
<%= semantic_form_for [:admin, Client.find(#wedding_cake.client_id), #wedding_cake] do |f| %>
than I want to add an input for a date like so:
<%= f.input :date, as: :datepicker %>
However, I'm getting "Unable to find input class for datepicker" from rails.
I've tried including jquery date picker in my gem file, but that didn't change anything. What am I doing wrong?
I ran into this exact issue and what worked for me was: https://github.com/activeadmin/activeadmin/wiki/Combine-datetime-picker-with-activeadmin#or-do-it-manually
Specifically:
In active_admin, change the column use
:as => datepicker TO :as => :string, :input_html => {:class => "hasDatetimePicker"}
However, I had to prepend the datepicker class, and in my case, change hasDatetimePicker to hasDatePicker
:as => :string, :input_html => {:class => 'datepicker hasDatePicker'}
h/t to Eugen's comment for pointing me in the right direction
Try the DateNTimePickerActiveAdmin Rubygem. It works really well and is customisable according to your project.
You can find the documentation here: https://github.com/NikhithaGraceJosh/date_n_time_picker_activeadmin
From the docs:
Gemfile
gem 'date_n_time_picker_activeadmin'
Code Sample (In your form)
f.input :column_name, as: :datetimepicker
CSS
In active_admin.scss, add the line,
#import date_n_time_picker_activeadmin
JS
In active_admin.js, add the line,
//= require date_n_time_picker_activeadmin
Hope it's useful!
I have a rails form created using the simple_form and haml with Angular JS code sprinkled in it. Angular is doing its job and computing the values fine. However, I have a display problem: I cannot display the totals being computed by angular and display it as a formatted value in a form control.
Here is the code snippet of the haml view:
= f.input :total_amount, :label => 'Invoice Total', :input_html => { :readonly => true, "ng-model" => "grand_total" }
So the form_control 'total_amount' is bound to the "grand_total" attribute on $scope for Angular.
Everything is working fine computationally. However, the total_amount input field is being displayed 'unformatted', e.g. 1655.3456. I would like to display it as currency, e.g., $1,655.00.
I do not know how to do it. I have tried to use the suggested approach of using number_to_currency rails view helper as shown below:
= f.input :total_amount, :label => 'Invoice Total', :input_html => { :readonly => true, "ng-model" => "grand_total", :value => number_to_currency(f.object.total_amount) }
But since the total_amount field is blank to begin with when I initialize the Rails view, it has no effect. Also, as the users change the nested form fields, the total amount is being updated dynamically by Angular. The number updates fine, but formatting is an issue.
Thanks in advance for any help.
You can use currency filter from angular https://docs.angularjs.org/api/ng/filter/currency
Because you are not using this field as input, try wrapping display value in something like span, then you can add filter like this
<span>{{total_amount | currency}}</span>
You can read about other options from the link
Or you can use directive from this answer https://stackoverflow.com/a/27051526/1805815
I am trying to use the autosize-rails gem to create text boxes that automatically get bigger when filled. I installed the gem and bundled it.
gem 'autosize-rails
I then added this to my js.coffeescript file:
$(document).ready ->
$("textarea").autosize()
and finally my form looks like this:
<%= f.input :title, as: :text, input_html: { :class => "textarea" }%>
The forms still use the default scroll bar.
I have no experience with this gem, but it looks like you need to change $("textarea") to $(".textarea") in your coffeescript file.
I'm using Bootstrap-sass and formtastic in my Rails application, and I'm not sure why the bootstrap-typeahead feature isn't working.
Form partial:
<%= f.input :tag, :input_html => { :'data-provide' => "typeahead", :'data-source' => '["hello", "hellow", "heaven", "helo", "herr"]' } %>
application.js manifest:
//= require bootstrap-typeahead //typeahead is correctly loaded, checked with firebug
result HTML source code:
<input :data-minLength="2" data-provide="typeahead" data-source="["hello", "hellow", "heaven", "helo", "herr"]"
In the end, I will need to customize typeahead to get the performance I want, but even this simple javascript isn't working for some reason. I cant find anything wrong with the code. Could anyone help me?
UPDATE:
I tried it in the javascript way as follows:
<script> //call typeahead
$(function() {
$('input#type_ahead').typeahead({
'source' : ["hello", "heaven", "heythere"]
});
})
</script>
<%= f.input :tag_list, :input_html => { :id => "type_ahead" }, %> //input tag
And still it seems like typeahead fails to work. i.e) typing in "he" does not get me a dropdown of those three items in the above array. Does anyone have an idea?
I think you need to set html_safe for:
{ :'data-source' => '["hello", "hellow", "heaven", "helo", "herr"]'.html_safe }
Have you called the typeahead() method when your page loads? You need to do something like this;
$(function() {
$('input').typeahead();
})
You'll need to assign a class or id to your input to bind the typeahead to it specifically (Rails probably has assigned an id to it automatically, I'm presuming you've omitted it specifically)
$(function() {
$('input#my-tag-field-with-a-cool-typeahead').typeahead();
})
edit:
The following worked for me. It'll take a bit of modification to the rails part to fit your situation, but this definitely works.
<script>
$(function() {
$('input#type_ahead').typeahead()
}
</script>
<%= text_field_tag :test_type, '', data: {provide: 'typeahead', source: "['hello','heythere','heaven']"} %>
How do I set different css classes for the different selects(day, month) generate by:
<%= f.input :birthday, :as => :date, :discard_year => true,
:order => [:day, :month] %>
I just found a way to set the css class for the overall input.
It doesn't have to be simple_form. It can be regular rails code too.
Unfortunately, there is no simple way to solve it with select_date, even with simple-form. simple-form maps :as => 'date' to date_select.
Although you can split date_select into a select_day and select_month inputs and pass the respective css class at html_options for each input.