0

I have problem with two datepickers on the same page, they just don't want to work together.

I have found topics connected to mine but they didn't solve my problem:

Conflict with two jquery datepickers on same page

Javascript two datepicker conflict

My fields looks like that:

        <div class="row">
            <div class="col-xs-6 filter-from">
                <input id="date-filter-from" type="text" class="form-control filter-value datepicker-field" data-filter-value="from">
            </div>
            <div class="col-xs-6 filter-to">
                <input id="date-filter-to" type="text" class="form-control filter-value datepicker-field" data-filter-value="to">
            </div>
        </div>

Initialization looks like that:

$(document).ready( function() {
    $(document).find('#date-filter-from').datepicker();
    $(document).find('#date-filter-to').datepicker();
});

Now what happens. First datepicker I click works okey. Then when I click second it doesn't work at all OR when I pick a date it shows error in console:

Uncaught TypeError: Cannot set property 'currentDay' of undefined

I will appreciate any help or ideas.

Community
  • 1
  • 1
Michal Olszowski
  • 795
  • 1
  • 8
  • 25
  • could you create a jsfiddle reproducing the problem? – dmlittle Jul 16 '15 at 08:46
  • Of course, give me few minutes. – Michal Olszowski Jul 16 '15 at 08:48
  • Now it became even more intereseting because on jsfiddle everything works fine... Same code: http://jsfiddle.net/cwcms6ra/ – Michal Olszowski Jul 16 '15 at 08:51
  • Your error _Uncaught TypeError: Cannot set property 'currentDay' of undefined_ might be coming when you click on 2nd `datepicker`. Check it once, I mean click 1st `datepicker` and check the `console` and then click 2nd `datepicker` and check the `console` – Guruprasad J Rao Jul 16 '15 at 08:52
  • Please add latest jquery and jquery-ui library – Bhavin Solanki Jul 16 '15 at 08:54
  • I have download latest libraries, still the same thing happens. @GuruprasadRao It's exactly what happens. – Michal Olszowski Jul 16 '15 at 09:09
  • then there is problem initializing 2nd `datepicker`. Are you setting any options in `datepickers` or just initializing as you have shown here? Are there any other initializations happening for the same anywhere in the page? what is `currentDay` here? variable? – Guruprasad J Rao Jul 16 '15 at 09:24
  • I assuming that currentDay is variable from the Datepicker JqueryUi and something just went wrong 'inside' it. No setting or options for this datepickers, exactly like I have shown. There are other initializations and for now I'm checking if any of them could "break" my datepickers. – Michal Olszowski Jul 16 '15 at 09:33
  • Tried with jquery 2.1.1 and jquery UI - v1.11.4 and seems working fine. – Vijay Porwal Jul 16 '15 at 09:40
  • I found a problem and solution. This datepickers was as a filter on a list. So after picking a date a part of site is reloaded with AJAX. After that I had to initialize datepickers one more time and then it works fine. – Michal Olszowski Jul 16 '15 at 09:54

1 Answers1

-1

Use a JQuery selector instead of $(document).find 

$(document).ready(function() {
  $('#date-filter-from').datepicker();
  $('#date-filter-to').datepicker();
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div class="row">
  <div class="col-xs-6 filter-from">
    <input id="date-filter-from" type="text" class="form-control filter-value datepicker-field" data-filter-value="from">
  </div>
  <div class="col-xs-6 filter-to">
    <input id="date-filter-to" type="text" class="form-control filter-value datepicker-field" data-filter-value="to">
  </div>
</div>
Vincent F
  • 371
  • 3
  • 17
  • It was not an issue. And what u propose would propably never change anything, It's only grabbing an input in a different way... I found a problem and solution yesterday. This datepickers was as a filter on a list. So after picking a date a part of site is reloaded with AJAX. After that I had to initialize datepickers one more time and then it works fine. – Michal Olszowski Jul 17 '15 at 13:54