Keep jQuery Datepicker in same place on resize


This tutorial will help you to keep jQuery Datepicker in same place on resize. I have used multiple jQuery UI datepickers in a simple layout in responsive website page.

Issue: When I have open the datepicker by clicking on the input field and then resize the window, the datepicker does not stay along with the input field. As there are multiple datepicker fields so it must be necessary to stay along with related input field.

Solution: After some try I have found a good solution to fix this issue as below.

$(window).resize(function() {
      var field = $(document.activeElement);
      if (field.is('.hasDatepicker')) {
            field.datepicker('hide').datepicker('show');
      }
});

I hope this tutorial will help you to fix the issue of jQuery datepicker on window resize.

See Example