6

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.

enter image description here

davideghz
  • 3,596
  • 5
  • 26
  • 50
  • Perhaps this may help: http://stackoverflow.com/questions/1449955/rails-date-format-in-a-text-field. Note the pro and cons when it comes to saving the values. – GoGoCarl Apr 28 '16 at 22:36
  • If this is a problem of which input it accepts, I would imagine that has to do with the browsers locale and what is the standard date notation for that locale. This SO post seems to re-inforce this http://stackoverflow.com/questions/3496241/specifying-the-value-output-of-of-an-html5-input-type-date – Mitch Apr 28 '16 at 23:26
  • well, I thought the same, and that's why I tried to edit the it.yml file, but I had no luck with it – davideghz Apr 29 '16 at 16:22

4 Answers4

14

You can do:

<%= f.date_field :matriculation_date, as: :date, value: f.object.try(:strftime,"%m/%d/%Y"), class: 'form-control' %>
Deepak Mahakale
  • 22,834
  • 10
  • 68
  • 88
Bella
  • 350
  • 2
  • 7
1

You can try this

@yourdate.strftime("%m/%d/%Y")

this works!

Deepak Mahakale
  • 22,834
  • 10
  • 68
  • 88
Renzo Diaz
  • 13
  • 5
  • I've not such variable in my code, can you pls add more info? I do not want to style a date, I want to style the date_field input in the form. Thank you! – davideghz Apr 29 '16 at 16:21
1

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>
Dharmesh Rupani
  • 1,029
  • 2
  • 12
  • 22
  • I've not such variable in my code, can you pls add more info? I do not want to style a date, I want to style the date_field input in the form. Thank you! – davideghz Apr 29 '16 at 16:22
  • @davideghz I have edited my answer after checking your comment & screenshot. Hope it will solve your issue. – Dharmesh Rupani Apr 29 '16 at 21:04
  • Hi Dharmesh, thank you very much. Anyway the datepicker just skip the problem and does not solve it to the root. I removed my last edit where I speak about datepicker, since I think it can be misleading. The original issue with date_field is still open :) – davideghz Apr 29 '16 at 21:45
0

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>
agusgambina
  • 6,229
  • 14
  • 54
  • 94