javascript - jQuery UI Datepicker - Why does the 2nd datepicker disappear onfocus? - Stack Overflow

admin管理员组

文章数量:1023230

I have two input elements that function as jQuery UI datepickers. After you make a selection on the first datepicker element it should automatically focus on the second datepicker element and show the calendar, allowing you to easily and quickly make a choice.

For whatever reason the second datepicker/calendar is appearing for a moment and then disappearing. I am not sure why it is disappearing; can anyone offer me an explanation as to why it's disappearing and a possible solution?

Currently utilizing the following libraries: jQuery 1.8.3, jQuery UI 1.9.2

Here's the code I am currently using:

<ul class="fields">
    <li><label>Date picker #1</label>
        <input type="text" class="date-picker-1" />
    </li>
    <li><label> Date picker #2</label>
        <input type="text" class="date-picker-2" />
    </li>
</ul>

$('input.date-picker-1').datepicker({
    constrainInput: true,
    hideIfNoPrevNext: true,
    onSelect: function () {
        $(this).closest('.fields')
           .find('.date-picker-2').datepicker('show');
    }
});

$('input.date-picker-2').datepicker({
    onFocus: 'show'
});

Here's a fiddle: /

If any other information would be helpful please feel free to ask and I'll be happy to help out.

I have two input elements that function as jQuery UI datepickers. After you make a selection on the first datepicker element it should automatically focus on the second datepicker element and show the calendar, allowing you to easily and quickly make a choice.

For whatever reason the second datepicker/calendar is appearing for a moment and then disappearing. I am not sure why it is disappearing; can anyone offer me an explanation as to why it's disappearing and a possible solution?

Currently utilizing the following libraries: jQuery 1.8.3, jQuery UI 1.9.2

Here's the code I am currently using:

<ul class="fields">
    <li><label>Date picker #1</label>
        <input type="text" class="date-picker-1" />
    </li>
    <li><label> Date picker #2</label>
        <input type="text" class="date-picker-2" />
    </li>
</ul>

$('input.date-picker-1').datepicker({
    constrainInput: true,
    hideIfNoPrevNext: true,
    onSelect: function () {
        $(this).closest('.fields')
           .find('.date-picker-2').datepicker('show');
    }
});

$('input.date-picker-2').datepicker({
    onFocus: 'show'
});

Here's a fiddle: http://jsfiddle/B78JJ/

If any other information would be helpful please feel free to ask and I'll be happy to help out.

• javascript
• jquery
• jquery-ui
• jquery-ui-datepicker

Share Improve this question Follow edited Apr 20, 2013 at 16:52 kyle.stearns asked Apr 20, 2013 at 16:46 kyle.stearnskyle.stearns 2,3462121 silver badges3131 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

It seems a focus timing issue, the quick workaround is to use a small timeout:

$('input.date-picker-1').datepicker({
    constrainInput: true,
    hideIfNoPrevNext: true,
    onSelect: function () {
        var dees = $(this);
        setTimeout(function() { 
           dees.closest('.fields').find('.date-picker-2').datepicker('show');
        }, 100);
    }
});

See working fiddle

Today in august of 2019 we had same issue. You could fix this using method onClose. Another issue appear when options changeMonth or changeYear enabled but it was solved with onChangeMonthYear.

$(function() {
	$from = $("#from");
  $to = $("#to");

	$from.datepicker({
  	onClose : function(){
      $to.datepicker('show');
    }
  });
  
  $to.datepicker({
    changeMonth: true,
    changeYear: true,
    onChangeMonthYear: function(year, month ){
    	$to.datepicker('setDate', new Date(year, month-1, 1));
    }
  });
})

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>

<input type="text" id="from">
<input type="text" id="to">

Because of this:

 $(this).closest('.fields').find('.date-picker-2').datepicker('show');

You can use:

window.setTimeout(function(){
    $('.date-picker-2').datepicker('show');
}, 1);

I have two input elements that function as jQuery UI datepickers. After you make a selection on the first datepicker element it should automatically focus on the second datepicker element and show the calendar, allowing you to easily and quickly make a choice.

For whatever reason the second datepicker/calendar is appearing for a moment and then disappearing. I am not sure why it is disappearing; can anyone offer me an explanation as to why it's disappearing and a possible solution?

Currently utilizing the following libraries: jQuery 1.8.3, jQuery UI 1.9.2

Here's the code I am currently using:

<ul class="fields">
    <li><label>Date picker #1</label>
        <input type="text" class="date-picker-1" />
    </li>
    <li><label> Date picker #2</label>
        <input type="text" class="date-picker-2" />
    </li>
</ul>

$('input.date-picker-1').datepicker({
    constrainInput: true,
    hideIfNoPrevNext: true,
    onSelect: function () {
        $(this).closest('.fields')
           .find('.date-picker-2').datepicker('show');
    }
});

$('input.date-picker-2').datepicker({
    onFocus: 'show'
});

Here's a fiddle: /

If any other information would be helpful please feel free to ask and I'll be happy to help out.

I have two input elements that function as jQuery UI datepickers. After you make a selection on the first datepicker element it should automatically focus on the second datepicker element and show the calendar, allowing you to easily and quickly make a choice.

For whatever reason the second datepicker/calendar is appearing for a moment and then disappearing. I am not sure why it is disappearing; can anyone offer me an explanation as to why it's disappearing and a possible solution?

Currently utilizing the following libraries: jQuery 1.8.3, jQuery UI 1.9.2

Here's the code I am currently using:

<ul class="fields">
    <li><label>Date picker #1</label>
        <input type="text" class="date-picker-1" />
    </li>
    <li><label> Date picker #2</label>
        <input type="text" class="date-picker-2" />
    </li>
</ul>

$('input.date-picker-1').datepicker({
    constrainInput: true,
    hideIfNoPrevNext: true,
    onSelect: function () {
        $(this).closest('.fields')
           .find('.date-picker-2').datepicker('show');
    }
});

$('input.date-picker-2').datepicker({
    onFocus: 'show'
});

Here's a fiddle: http://jsfiddle/B78JJ/

If any other information would be helpful please feel free to ask and I'll be happy to help out.

• javascript
• jquery
• jquery-ui
• jquery-ui-datepicker

Share Improve this question Follow edited Apr 20, 2013 at 16:52 kyle.stearns asked Apr 20, 2013 at 16:46 kyle.stearnskyle.stearns 2,3462121 silver badges3131 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

It seems a focus timing issue, the quick workaround is to use a small timeout:

$('input.date-picker-1').datepicker({
    constrainInput: true,
    hideIfNoPrevNext: true,
    onSelect: function () {
        var dees = $(this);
        setTimeout(function() { 
           dees.closest('.fields').find('.date-picker-2').datepicker('show');
        }, 100);
    }
});

See working fiddle

Today in august of 2019 we had same issue. You could fix this using method onClose. Another issue appear when options changeMonth or changeYear enabled but it was solved with onChangeMonthYear.

$(function() {
	$from = $("#from");
  $to = $("#to");

	$from.datepicker({
  	onClose : function(){
      $to.datepicker('show');
    }
  });
  
  $to.datepicker({
    changeMonth: true,
    changeYear: true,
    onChangeMonthYear: function(year, month ){
    	$to.datepicker('setDate', new Date(year, month-1, 1));
    }
  });
})

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>

<input type="text" id="from">
<input type="text" id="to">

Because of this:

 $(this).closest('.fields').find('.date-picker-2').datepicker('show');

You can use:

window.setTimeout(function(){
    $('.date-picker-2').datepicker('show');
}, 1);

本文标签： javascriptjQuery UI DatepickerWhy does the 2nd datepicker disappear onfocusStack Overflow