Datepicker range show "to" when select a date on "from"

Datepicker range show "to" when select a date on "from"

Hi, i'm using a example of datepicker range.

I'm trying show the datepicker "to" when the user select a date from a "from" datepicker.

For this I'm subscribing to the method of the datepicker onSelect "from" to make a show in datepicker "to".

I am using the following code:
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="utf-8">
  6. <title>jQuery UI Datepicker - Select a Date Range</title>
  7. <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
  8. <script src="../../jquery-1.8.0.js"></script>
  9. <script src="../../ui/jquery.ui.core.js"></script>
  10. <script src="../../ui/jquery.ui.widget.js"></script>
  11. <script src="../../ui/jquery.ui.datepicker.js"></script>
  12. <link rel="stylesheet" href="../demos.css">
  13. <script>
  14. $(function() {
  15. $( "#from" ).datepicker({
  16. defaultDate: "+1w",
  17. changeMonth: true,
  18. numberOfMonths: 3,
  19. onSelect: function( selectedDate ) {
  20. $( "#to" ).datepicker( "option", "minDate", selectedDate );
  21. test();
  22. }
  23. });
  24. $( "#to" ).datepicker({
  25. defaultDate: "+1w",
  26. changeMonth: true,
  27. numberOfMonths: 3,
  28. onSelect: function( selectedDate ) {
  29. $( "#from" ).datepicker( "option", "maxDate", selectedDate );
  30. }
  31. });
  32. });
  33. function test() {
  34. $( "#to" ).datepicker( "show" );
  35. }
  36. </script>
  37. </head>
  38. <body>

  40. <div class="demo">

  42. <label for="from">From</label>
  43. <input type="text" id="from" name="from"/>
  44. <label for="to">to</label>
  45. <input type="text" id="to" name="to"/>
  46. <input type="button" id="bt" value="ok" onclick="javascript: test();" />
  47. </div><!-- End demo -->

  49. <div class="demo-description">
  50. <p>Select the date range to search for.</p>
  51. </div><!-- End demo-description -->

  53. </body>
  54. </html>

When testing this code, when I click on the date "from" then the calendar "to" is displayed and rapidly disappears.

The curious thing is that if I'm in chrome for example, when you click another tab and then return to the calendar tab for example "to" is displayed correctly.

The example also has an "ok" button. Running the same code, in this case the method "test" and clicking this button calendar "to" is displayed correctly.

I'm working on this problem for a long time and have tried various ways to display calendar "to" But I always get the same result.

Thanks for reading my problem, if somehow I was not clear please question me so I can better clarify.