Закрыть календарь при выборе даты или клик вне календаря

Question

Скрипт календаря создает такую разметку

<table class="ui-datepicker-calendar">
  <thead>
    <tr>
      <th scope="col"><span title="понедельник">Пн</span></th>
      <th scope="col"><span title="вторник">Вт</span></th>
      <th scope="col"><span title="среда">Ср</span></th>
      <th scope="col"><span title="четверг">Чт</span></th>
      <th scope="col"><span title="пятница">Пт</span></th>
      <th scope="col" class="ui-datepicker-week-end"><span title="суббота">Сб</span></th>
      <th scope="col" class="ui-datepicker-week-end"><span title="воскресенье">Вс</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
      <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
      <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
      <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
      <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
      <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">1</a></td>
      <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">2</a></td>
    </tr>
    <tr>
      <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">3</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">4</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">5</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">6</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">7</a></td>
      <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">8</a></td>
      <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">9</a></td>
    </tr>
    <tr>
      <td class=" ui-datepicker-days-cell-over  ui-datepicker-current-day ui-datepicker-today" data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default ui-state-highlight ui-state-active" href="#">10</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">11</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">12</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">13</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">14</a></td>
      <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">15</a></td>
      <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">16</a></td>
    </tr>
    <tr>
      <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">17</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">18</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">19</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">20</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">21</a></td>
      <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">22</a></td>
      <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">23</a></td>
    </tr>
    <tr>
      <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">24</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">25</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">26</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">27</a></td>
      <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">28</a></td>
      <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">29</a></td>
      <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
    </tr>
  </tbody>
</table>

на данном этапе работает закрытие календаря при клике вне его и при первом выборе даты

$('.datepicker').on('click', function() {
  $('.datepicker').removeClass('close').addClass('open');
});
jQuery(function($) {
  $(document).mouseup(function(e) {
    var div = $(".datepicker");
    if (!div.is(e.target) &&
      div.has(e.target).length === 0) {
      $('.datepicker').removeClass('open').addClass('close');
    }
  });
  $('a.ui-state-default').on('click', function() {
    $('.datepicker').removeClass('open').addClass('close');
  })
});

При повторном обращении не закрывается при выборе даты

Answer 1

Поле с классом datapicker должно быть отдельно, а скрываться должен сам календарь.
Вот пример:

    $('.datepicker').on('click', function () {
        $('.ui-datepicker-calendar').removeClass('close').addClass('open');
    });
    $('a.ui-state-default').on('click', function () {
            $('.ui-datepicker-calendar').removeClass('open').addClass('close');
        }
    );
    jQuery(function ($) {
        $(document).mouseup(function (e) {
            var div = $(".ui-datepicker-calendar");
            if (!div.is(e.target)
                && div.has(e.target).length === 0) {
                $('.ui-datepicker-calendar').removeClass('open').addClass('close');
            }
        });
    });

    .datepicker {
        background-color: #003eff;
        width: 100px;
    }
    .open{
        display: block;
    }
    .close{
        display: none;
    }
.ui-datepicker-calendar{
    width: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="datepicker">Показать календарь</div>
<table class="ui-datepicker-calendar">
    <thead>
    <tr>
        <th scope="col"><span title="понедельник">Пн</span></th>
        <th scope="col"><span title="вторник">Вт</span></th>
        <th scope="col"><span title="среда">Ср</span></th>
        <th scope="col"><span title="четверг">Чт</span></th>
        <th scope="col"><span title="пятница">Пт</span></th>
        <th scope="col" class="ui-datepicker-week-end"><span title="суббота">Сб</span></th>
        <th scope="col" class="ui-datepicker-week-end"><span title="воскресенье">Вс</span></th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
        <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
        <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
        <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
        <td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
        <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">1</a></td>
        <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">2</a></td>
    </tr>
    <tr>
        <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">3</a></td>
        <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">4</a></td>
        <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">5</a></td>
        <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">6</a></td>
        <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">7</a></td>
        <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">8</a></td>
        <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">9</a></td>
    </tr>
    <tr>
        <td class=" ui-datepicker-days-cell-over  ui-datepicker-current-day ui-datepicker-today" data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default ui-state-highlight ui-state-active" href="#">10</a></td>
        <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">11</a></td>
        <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">12</a></td>
        <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">13</a></td>
        <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">14</a></td>
        <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">15</a></td>
        <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">16</a></td>
    </tr>
    <tr>
        <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">17</a></td>
        <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">18</a></td>
        <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">19</a></td>
        <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">20</a></td>
        <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">21</a></td>
        <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">22</a></td>
        <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">23</a></td>
    </tr>
    <tr>
        <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">24</a></td>
        <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">25</a></td>
        <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">26</a></td>
        <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">27</a></td>
        <td class=" " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">28</a></td>
        <td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="1" data-year="2020"><a class="ui-state-default" href="#">29</a></td>
        <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
    </tr>
    </tbody>
</table>

БЛОГ НА HUSL

Закрыть календарь при выборе даты или клик вне календаря

Ответы (1 шт):