当单击jQuery UI datepicker的prev/下一步时，模态正在隐藏

Question

我使用jQuery datepicker https://jqueryui.com/datepicker/和Uikit Framework https://getuikit.com/

我想在模式窗口内使用我的表单中的datepicker。

问题是单击jQuery UI datepicker的prev/下一个。

之后，模态窗口正在隐藏。

以下是我的代码。

jsfiddle上的演示

预先感谢。

jQuery(document).ready(function($) {
  $("#from_date").datepicker({
    defaultDate: new Date(),
    dateFormat: 'dd MM yy',
    beforeShow: function(textbox, instance) {
      $('#ui-datepicker-div').css({
        position: 'absolute',
        top: -20,
        left: 5
      });
      $('#checkin_container').append($('#ui-datepicker-div'));
      $('#ui-datepicker-div').hide();
    }
  });
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/js/uikit-icons.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/css/uikit.min.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.12.1/themes/black-tie/jquery-ui.css" rel="stylesheet"/>
<a class="uk-button uk-button-default" href="#modal-full" uk-toggle>Open</a>
<div id="modal-full" class="uk-modal-full" uk-modal>
  <div class="uk-modal-dialog">
    <button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>
    <div class="uk-padding-large">
      <h1>Headline</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <div id="checkin_container" class="uk-width-1-2@s uk-margin-medium-bottom uk-text-left">
        <label class="uk-form-label" for="from_date">Check In</label>
        <div class="uk-form-controls uk-margin-small-top">
          <input type="text" placeholder="Check In" name="from_date" onfocus="blur();" id="from_date" autocomplete="off" class="uk-input yt-date">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

//防止dom泡泡，应该可以。

$('#ui-datepicker-div').on('click', function(e) {
    e.stopPropagation();
});

在JSFIDDLE上更正演示

https://jsfiddle.net/yiannistaos/03ss4u43/42/