单击jquery UI datepicker的上一个/下一个时隐藏模态

Question

我使用jQuery datepicker https://jqueryui.com/datepicker/和UIkit框架https://getuikit.com/

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

问题是单击jquery UI datepicker的上一个/下一个后隐藏了模态窗口。

以下是我的代码。

Demo on 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上的演示