How to automatically open second UI Date Picker on closing first one (infinite-scrolling-datepicker)

Question

I read the following posts -

• How to open second UI Datepicker on closing the first one
• How to simulate a click with JavaScript?
• How to tell which datepicker the widget is open for
• Check if datepicker is open
• Set value of jQuery datepicker to value of another datepicker

Unfortunately I have still not resolved my problem.

I am using the infinite scrolling date picker. And eventually want to make it so once the From date is selected, the date picker for the To date is automatically displayed. For the time being I am treating the German date field as the To Date.

I have included my JS code here - https://trinket.io/python/a0249eeb33 and HTML code here - https://trinket.io/python/09a81dfcf7. After many failed attempts, my code is quite messy.

These statements work -

 $("#datepicker-default").datepicker( "hide" )
 $("#datepicker-german").focus()
          

But this doesn't -

$("#datepicker-german").datepicker( "show" )

Update

I achieved my goals using this code.

<script>

    function moveToNextDatePicker(currentField, nextField) {
      
      $( currentField ).trigger('hide.sys-datepicker');
      
      setTimeout(function() {
      
        $( nextField ).focus().trigger('show.sys-datepicker');
      
      }, 100);

    }


    $(function () {
      
      $('#datepicker-default').datepicker({
        onSelect: function (date) {
          moveToNextDatePicker(this, '#datepicker-german');
        }
      });

      $('#datepicker-german').datepicker({
        monthNames: ['Januar','Februar','März','April','Mai','Juni', 'Juli','August','September','Oktober','November','Dezember'],
        dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
        firstDay: 1,
      
        onSelect: function (date) {
          moveToNextDatePicker(this, '#datepicker-french');
        }
      
      });
      
      $('#datepicker-french').datepicker({
        monthNames: ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'],
        dayNamesMin: ['D','L','M','M','J','V','S'],
        firstDay: 1,
        onSelect: function (date) {
          moveToNextDatePicker(this, '#datepicker-spanish');
        }
      });
      $('#datepicker-spanish').datepicker({
        monthNames: ['enero','febrero','marzo','abril','mayo','junio', 'julio','agosto','septiembre','octubre','noviembre','diciembre'],
        dayNamesMin: ['D','L','M','X','J','V','S'],
        firstDay: 1,
        onSelect: function (date) {
          moveToNextDatePicker(this, '#datepicker-yymmdd');
        }
      });
      
      $('#datepicker-yymmdd').datepicker({


        onSelect: function (date) {
          moveToNextDatePicker(this, '#datepicker-multiple');
        },