Скрипт календаря создает такую разметку
<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"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </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"> </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');
})
});
При повторном обращении не закрывается при выборе даты
datapicker
?