Me and my co-workers were testing my web app. And, in the form in my computer/local/dev and server/production it shows the date format dd/mm/yyyy 00:00 and for my coworkers mm/dd/yyyy 00:00 am/pm with the same local chrome settings and computer settings.
why is this?
and how can I change this for all users? if possible.
piece of code:
<div class="mini_jumbotron">
<div class="mini_text">Inicio<%= image_tag("calendar.png", :class => "calendar")%>
</div> <br>
</div>
<%= f.datetime_field :Inicio %>
Try below code:
<%= f.date_field :Inicio, as: :date, value: f.object.try(:strftime,"%d/%m/%Y"), class: 'form-control' %>
You can also use this gem: https://github.com/Nerian/bootstrap-datepicker-rails
on your gemfile.rb
gem 'bootstrap-datepicker-rails'
then bundle install and restart rails server
then add this line to app/assets/stylesheets/application.css
*= require bootstrap-datepicker
and add this line to app/assets/javascripts/application.js
//= require bootstrap-datepicker
and to use this in your form:
<%= f.date_field :Inicio, :id => "datepicker" %>
and add this javascript on the same view of your form
<script>
$('#datepicker').datepicker({format: 'dd/mm/yyyy HH:MM:ss'});
</script>
Related
I have a Ruby on Rails project that uses the material-saas gem. I recently noticed that text field animations have stopped working. More specifically, when a text field is active, the label does not move up on the page and whatever the user types in the input field writes over the label text and looks awful. Here (https://github.com/Dogfalo/materialize/issues/682) is an example of the style issue I'm encountering. In addition to the label text not moving correctly, the form also has a file field that is not working. When a user selects a file to upload, the file name does not appear in the form, which is the intended behavior.
I recently ran rake assets:clobber and rake assets:precompile and I wonder if that has something to do with this issue.
I did some research and in the Material CSS docs they say:
You can also call the function Materialize.updateTextFields(); to
reinitialize all the Materialize labels on the page if you are
dynamically adding inputs.
I attempted this fix, but I get Uncaught TypeError: Materialize.updateTextFields is not a function in my console when I load the page.
Here is my form view:
<%= render 'shared/header' %>
<div class="container">
<h3>New Photo of the Day</h3>
<div class="row">
<%= form_for #photo, multiple: true do |f| %>
<div class="input-field">
<%= f.label :title %>
<%= f.text_field :title %>
</div>
<div class="input-field">
<%= f.label :caption %>
<%= f.text_area :caption, class: "materialize-textarea" %>
</div>
<%= f.label :date %>
<%= f.date_field :date, class: "datepicker"%>
<div class="file-field input-field">
<div class="btn waves-effect waves-light yellow accent-4 white-text">
<span>File</span>
<%= f.file_field :image %>
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
<div class="input-field center-align">
<%= f.submit "Upload", class: "btn-large waves-effect waves-light" %>
</div>
<% end %>
Here is my assets/application.js
//= require jquery
//= require materialize-sprockets
//= require jquery_ujs
//= require react
//= require react_ujs
//= require components
//= require_tree .
Here is my assets/custom.js
$(document).ready(function() {
Materialize.updateTextFields();
});
This is all really strange because I know the form style animations were working. I did not change the code for my form. The only thing I can think of is the clobber / precompile command, which I needed to run to get some ui improvements up onto production.
Thanks for taking the time to look this one over and I appreciate the assistance!
Looks like a few issues to me:
Rails is magic, and it does something called "turbolinks." Basically, pages are dynamically replaced instead of actually changing pages. It makes your site faster, but doesn't always issue the same Javascript events.
You'll also need JQuery 2 (I've updated my answer after advice from Dmitry).
Change the first few lines of your application JS to:
//= require jquery2
//= require turbolinks
//= require materialize-sprockets
Secondly, I found a second bug that exists in the materialize library. Basically, it wouldn't define updateTextFields() until turbo links loaded a page. To fix this, I've submitted a PR, but in the meantime, I would money-patch this by copy/pasting the method from the source to your code (inside $(document).ready). Use something like this to let your code get updated once they fix the bug (pretty much a polyfill).
Materialize.updateTextFields = Materialize.updateTextFields || // code from forms.js
You are using jQuery 1.x.
Try using jQuery 2.x or 3.x.
Source: https://github.com/Dogfalo/materialize/issues/4593
E: The way to do this in your setup would be to change the line //= require jquery to //= require jquery2.
I am trying to use Dropzone.js to upload files within my Rails app.
It seems that if I use the standard setup, the entire form becomes an image upload field. However, my form contains other fields as well. I only want to use Dropzone.js in a file_field area.
Steps I've used are:
Gemfile
gem 'rails-assets-dropzonejs', source: 'https://rails-assets.org'
application.js
//= require dropzonejs
application.css
*= require dropzonejs
_form.html.erb
<%= form_for #activity, html: {class: 'ui form'} do |f| %>
<!-- Fields like this one don't need to be dropzone fields -->
<div class="field">
<%= f.label :name %>
<%= f.text_field :name %>
</div>
<!-- The following field does -->
<div class="field">
<%= f.label :gallery_images %>
<%= f.file_field :gallery_images, multiple: true, class: 'drop' %>
<%= f.hidden_field :gallery_images_cache %>
</div>
<% end %>
activities.coffee
$ ->
$('.drop').dropzone({ url: "/activities/post" });
As you can see, I'm trying to bind Dropzone to the 'drop' class which I've attached to the file_field. However, this doesn't seem to work correctly and I am seeing no errors in the console.
Anyone have an idea how I'd get Dropzone.js to work for a file_field within a Rails form? Or can I only bind it to the entire form?
Any help is much appreciated! Thanks!
You need to permit the :file param. Most probably there will be code something along the line of
private
def activities_params
params.permit(:name, ...other_params)
end
Add :file to the permit method
private
def activities_params
params.permit(...other_params, :file)
end
I'm trying to use bootstrap-switch-rails on my Rails project, but I can't make it work. I've been mostly following this tutorial.
This is what I tried so far.
Added this in my Gemfile
gem 'bootstrap-switch-rails', '~> 3.0.0'
Added this in the top of my app/assets/stylesheets/custom.scss
#import "bootstrap";
#import "bootstrap3-switch";
#import "bootstrap-sprockets";
/* Rest of the file omitted */
This is my application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require bootstrap-switch
//= require_tree .
My application.css
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
*= require bootstrap-switch3
And finally, the form where I want to use the switch:
<% content_for :head do %>
<script type="text/javascript">
$(function() {
$("input:checkbox").bootstrapSwitch();
});
</script>
<% end %>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<%= form_for(#consultant) do |f| %>
<%= render 'consultants/consultant_error_messages' %>
<%= f.label :identifier %>
<%= f.text_field :identifier, class: 'form-control' %>
<%= f.label :email %>
<%= f.email_field :email, class: 'form-control' %>
<%= f.label :first_name %>
<%= f.text_field :first_name, class: 'form-control' %>
<%= f.label :last_name %>
<%= f.text_field :last_name, class: 'form-control' %>
<%= f.label :disabled, "Habilitar/Deshabilitar" %>
<%= f.check_box :disabled, :data => {
:size=>'small', 'on-color'=>'success', 'on-text'=>'Habilitar', 'off-text'=>'Deshabilitar'
} %>
<%= f.submit "Guardar", class: "btn btn-primary" %>
<% end %>
</div>
</div>
The checkbox is being shown as a regular checkbox, instead of a switch.
Any ideas on what should I be missing?
Thanks in advance.
Try to replace require bootstrap-switch3 with require bootstrap3-switch in your application.css
Also try executing $("input:checkbox").bootstrapSwitch(); in the console to see the output.
Another user solved the issue writing the HTML instead of using the one generated by Rails: rails 4 : change state issue with Bootstrap Switch
how can I style the date format of a date_field?
I got the following form:
<%= form_for([#user, #vehicle]) do |f| %>
<%= f.label :name, "Vehicle name" %>
<%= f.text_field :name, class: 'form-control' %>
<%= f.label :matriculation_date %>
<%= f.date_field :matriculation_date, class: 'form-control' %>
<%= f.submit "Add", class: "btn btn-primary" %>
<% end %>
this is rendering the following HTML for the date field:
<input class="form-control" type="date" name="vehicle[matriculation_date]" id="vehicle_matriculation_date">
The date field accept input in the following format: mm/dd/yyyy. I want it to accept format like dd/mm/yyyy.
I tried to edit it.yml file without any luck.
it:
date:
formats:
default: ! '%d/%m/%Y'
datetime:
formats:
default: ! '%d/%m/%Y %H:%M'
Any clue? Thank you
EDIT
None of the proposed solutions solve my problem, so I think my question was not very clear. What I want is just to style how the date_field prompt the user (see image for more details). At the moment the form show mm/dd/yyyy, and I want it to show dd/mm/yyyy.
Not sure it might be a useful information, but I'm using Bootstrap for styling.
You can do:
<%= f.date_field :matriculation_date, as: :date, value: f.object.try(:strftime,"%m/%d/%Y"), class: 'form-control' %>
You can convert the date formate with strftime()
#date.strftime("%d/%m/%Y")
It will convert your date into dd/mm/yyyy formate as you wanted.
Here I am showing you an example:
t = Time.now
=> 2016-04-28 16:09:42 -0700
>> t.strftime("%d/%m/%Y")
=> "28/04/2016"
for more strftime() formatting options you can check this http://apidock.com/ruby/DateTime/strftime
EDIT :
After reading your comment and screenshot i've got the solution as follow.
You can also use this gem: https://github.com/Nerian/bootstrap-datepicker-rails
on your gemfile.rb
gem 'bootstrap-datepicker-rails'
then bundle install and restart rails server
then add this line to app/assets/stylesheets/application.css
*= require bootstrap-datepicker
and add this line to app/assets/javascripts/application.js
//= require bootstrap-datepicker
and to use this in your form:
<%= f.date_field :matriculation_date, :id => "datepicker" %>
and add this javascript on the same view of your form
<script>
$('#datepicker').datepicker({format: 'dd/mm/yyyy'});
</script>
You can try this
#yourdate.strftime("%m/%d/%Y")
this works!
My answer is based on #Dharmesh_Rupani answer
Follow the steps to add the gem 'bootstrap-datepicker-rails'
I made two little changes on the form
<%= f.text_field : matriculation_date, :placeholder => 'dd/mm/yyyy', class: 'form-control datepicker' %>
The first thing is I changed the type of the field to text, because when I implemented I had two calendars, one from the date_field and another from the new gem
The other thing I changed is instead of :id I used :class, because it may happen that you have more than one date field
lastly, you should add this on the view
<script>
$( document ).ready(function() {
$('.datepicker').datepicker({format: 'dd/mm/yyyy'});
});
</script>
I'm creating a simple sign_up form for new users on my site. I have ran the install for simple_form bootstrap...
rails g simple_form:install --bootstrap
However, it's still not showing up and rendering as a normal simple_form.
Here is my form code:
<h2>Sign up</h2>
<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name ), :html => {:class => 'form-horizontal' }) do |f| %>
<%= f.error_notification %>
<%= f.input :username, :required => true, class: "form-control"%>
<%= f.input :first_name, :required => true, class: "form-control" %>
<%= f.input :last_name, :required => true, class: "form-control" %>
<%= f.input :twitter, class: "form-control", type: "text", placeholder: "Username" %>
<%= f.input :bio, class: "form-control" %>
<%= f.input :email, :required => true, :autofocus => true, class: "form-control" %>
<div class="form-actions">
<%= f.button :submit, "Sign up", class: "btn btn-primary btn-sm" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
Not sure what I'm doing wrong here. Thanks in advance.
The sample application here mentions how you need to download Bootstrap separately (they use curl) and place it in vendor/assets/stylesheets/bootstrap.css.
Please try that.
It sounds like Bootstrap is not installed in your application or maybe you are trying to use Bootstrap 3. At the time I typed this on 2013-10-13, Simple Form did not support Bootstrap 3. See here for more details.
So that means you need to add Bootstrap 2.x to your application and Vidya has provided some good direction already.
If you are interested in using a gem to add Bootstrap 2.x, then I've provided instructions for twitter-bootstrap-rails below. Be sure to review their readme as well in case I omitted something.
In your gemfile add:
gem "twitter-bootstrap-rails", :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'
Then at the rails console for your project run (I've assumed you want less support):
bundle install
rails generate bootstrap:install less
Depending on whether you want a fixed or static layout use one of the two lines below:
rails g bootstrap:layout application fixed
rails g bootstrap:layout application fluid
Finally, edit your application.css file (found in app/assets/stylesheets) so it has 'require bootstrap_and_overrides similar to the example below:
*= require_self
*= require bootstrap_and_overrides
*= require_tree .
I'm pretty sure this happens by default now but you might also want to confirm that you have 'require twitter/bootstrap in your application.js as well (found in app/assets/javascripts). An example from a project of mine is below:
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .
If it still doesn't work and you added this gem. Kindly let me know what version of ruby, rails, simple_form and twitter-bootstrap-rails you are using.