CODEWITHSUNDEEP
ruby-on-railsbootstrap-datepicker
user3331154
user3331154

Reputation: 187

Cannot display selected date using Bootstrap-datepicker-rails as "dd/mm/yyyy"

I am attempting to put the bootstrap-datepicker on date input fields in my application. After the date is selected from the calendar, I want the date to display as 'dd/mm/yyyy'. The Dates are saved in the table (sqlite) in 'yyyy-mm-dd' format.

I have done the following:

In the application.js file, I have:

   //= require jquery
   //= require jquery_ujs
   //= require jquery-ui
   //= require turbolinks
   //= require bootstrap-datepicker
   //= require_tree .

In the application.html.erb file, I have:

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

In the custom.css.scss, I have:

  @import "bootstrap-sprockets";
  @import "bootstrap";

In the related .js file, I have:

   $(document).on("focus", "[data-behaviour~='datepicker']", function(e){
   $(this).datepicker({"format": "dd-mm-yy", "weekStart": 1, autoclose": true, "language": 'en-GB'})});

I have also tried this code in the application.js file - with no luck.

In the related form, I have:

    <a> Start Date/time: </a>
    <%= f.text_field :start_date, 'data-behaviour' => 'datepicker', size:10 %>

Result: I get a calendar from which I can select a date, but the date shows up in the default format of "mm/dd/yyyy".

Other tries: I have put the script in the form, but that has also not worked.

Any help will be immensely appreciated.

Thanking you in advance,

Upvotes: 0

Views: 1382

Answers (3)

chaitanya
chaitanya

Reputation: 1984

I have also faced this kind of situation where i want one date format to display date in text field and another format to save date.

so my work around is as follows

Declare different fields to accept date and to save date. here my accept field is "select_date" and actual field is "date"

= text_field_tag :select_date, '', :class => "datepicker"
= hidden_field_tag("date", "", :id => "request_date")

and simple script helps me to save value in both fields.

$(function() {
  $(".datepicker").datepicker({ 
    dateFormat: 'DD MM d',
    altField: '#request_date',
    altFormat: "yy-mm-dd"
  });
});

so when you select value in calendar, it fills both fields in different format.

Upvotes: 1

Sasidaran
Sasidaran

Reputation: 454

You can set the date format as data attribute as,

<%= f.text_field :start_date, 'data-behaviour' => 'datepicker', size:10, 'data-date-format' => "mm/dd/yyyy")

Upvotes: 1

Developer
Developer

Reputation: 6243

You can print the date in 'dd/mm/yyyy' format by using strftime

<a> Start Date/time: </a>
<%= f.text_field :start_date, value: (f.object.start_date.strftime("%d-%m-%Y") if f.object.start_date.present?), 'data-behaviour' => 'datepicker', size:10 %>

Upvotes: 0

Related Questions