Закрыть блок Div при клике вне блока или на дате (datapicker)

Question

На сайте календарь открывается по клику используется этот скрипт

$('.datepicker').on('click', function() {
  $('.datepicker').removeClass('close').addClass('open');
});

$('ЧТО СЮДА ВСТАВИТЬ?').on('click', function() {
  $('.datepicker').removeClass('open').addClass('close');
});

и CSS

.datepicker.close {
  position: absolute;
  overflow: hidden;
  max-height: 40px;
  bottom: 5px;
  animation-name: DivClose;
  animation-duration: 1s;
}

.datepicker.open {
  position: absolute;
  overflow: hidden;
  max-height: 260px;
  bottom: 5px;
  animation-name: DivOpen;
  animation-duration: 1s;
}

@keyframes DivOpen {
  from {
    max-height: 40px;
  }
  to {
    max-height: 260px;
  }
}

@keyframes DivClose {
  from {
    max-height: 260px;
  }
  to {
    max-height: 40px;
  }
}

Что надо добавить в код, чтобы календарь закрылся после выбора даты или после клика вне календаря?

<div id="datepicker" class="datepicker close">
  <input type="hidden" id="datepicker_value" value=""></div>

Answer 1

    $('.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');
            }
        });
    });

    .datepicker {
        width: 100px;
        height: 100px;
        background-color: blue;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="datepicker">Пурум Пум Пум</div>

C изменениями:

    $('.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');
            }
        )
    });

БЛОГ НА HUSL

Закрыть блок Div при клике вне блока или на дате (datapicker)

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