Search code examples
jqueryruby-on-railsdateruby-on-rails-4datetimepicker

Date format changing after reload page in rails 4 using datetimepicker


I've noticed something strange in my app.

When I enter to the main page here: http://leszczyna.wzks.uj.edu.pl/12_stolarski/events_for_seniors/ and click on the second field in search and pick something, the date format appearing is 'dd-mm-yyyy'.

But when I click in the top left-hand corner 'Wydarzenia dla seniorów' date format is changing to 'dd/mm/yyyy'. I've noticed that locale is appearing in URL but have no idea if it has impact on that behavior.

What is more, when I refresh page after that, date format comes to the beginning.

What can cause that strange behavior of that input?

EDIT

Code from my view:

<div class="form-group">
      <label class="sr-only" for="date">Email</label>
      <%= text_field_tag :date,
                         params[:date],
                         placeholder: 'Kliknij, aby wybrać datę',
                         class: 'form-control input-lg date',
                         :data => {
                                 provide: 'datepicker'
                         }
      %>
    </div>

And my javascript:

    /* Search date */
if ($('body.homepage').length) {
    $('.date').datepicker({
        'language': "pl",
        'todayHighlight': true,
        'format': 'dd-mm-yyyy',
        'autoclose': true
    })
}

Solution

  • It's happening due to turbolinks, turn off turbolinks for the top left-hand corner 'Wydarzenia dla seniorów' link. In the header your link is present under a div with navbar-header class. To that div element add data-no-turbolink, example below

    <div class="navbar-header" data-no-turbolink>
    

    This will resolve your problem!

    or

    In your js file, load javascript like this

    ready = function(){
    
      /* Search date */
      if ($('body.homepage').length) {
        $('.date').datepicker({
            'language': "pl",
            'todayHighlight': true,
            'format': 'dd-mm-yyyy',
            'autoclose': true
        });
      }  
    }
    $(document).ready(ready);
    $(document).on('page:load', ready);
    

    This is the best solution.

    Hope this helps!