DatePicker "мерцает" на window.resize

Question

У меня есть средство выбора даты в диалоговом окне jquery. По какой-то причине я должен закрыть и снова открыть указатель даты на window.resize. Что я пробовал до сих пор:

$(window).resize(function () {

    if ($("#myDialog").is(":visible")) {
        $("#myDialog").dialog({
            position: {
                my: "center",
                at: "center",
                of: window
            }
        });

        var field = $("#myDialog").find("input.hasDatepicker");
        field.datepicker('hide');
        field.datepicker('show');
    }

});

К сожалению, с этим кодом указатель даты «мерцает» несколько раз после изменения размера в результате. Как я могу избежать этого?

PS: Для лучшей наглядности я также добавляю оригинальную Fiddle здесь, где вы можете увидеть проблему, уменьшив окно результатов:

var dialog = $("#dates").dialog({
  autoOpen: false,
  height: 'auto',
  modal: true,
  position: {
    my: "center",
    at: "center",
    of: window
  },  
  resizable: false
});


$(function() {
  $("#openDialog").on("click", function() {
    dialog.dialog("open");
  });

  $(".datepicker").datepicker();
});


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

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<button id="openDialog">
  Click to open Dialog
</button>

<div id="dates" class="hidden">
  <input type="text" class="datepicker" id="date1" />
</div>