JSFiddle - React, Tailwind, and code Playground

by zapaza10

HTML

<div class="wrap_btn_sp_date"><a class="btn_sp_date show_dateform_sp" href="">выбрать дату</a></div>

<div class="wrap_dateform_sp hidden">
  <form action="">
    <input type="tel" class="widget_input date-input datepicker_from " autocomplete="off" placeholder="Туда">
    <input type="tel" class="widget_input date-input datepicker_out" autocomplete="off" placeholder="Обратно">
    <button type="submit" class="btn_sp_date_ot">Найти билеты</button>
  </form> 
</div>

JavaScript

jQuery(document).ready(function () {
    // открытие календарей
    $('body').on('click', '.show_dateform_sp', function(e) {
        e.preventDefault();
        $(this).next(".wrap_dateform_sp").toggleClass("hidden");
    });
        $(document).mouseup(function (e){//закрыть календарь при клике в не его дива
             if (!$('.wrap_dateform_sp').is(e.target)
                 && $('.wrap_dateform_sp').has(e.target).length === 0){
                 $('.wrap_dateform_sp').addClass('hidden');
             }
        });



    //календари для сп,
    //туда
    $('.wrap_dateform_sp .datepicker_from').datepicker({
        autoClose:false,
        showEvent: 'click',
        minDate: new Date(),
        onSelect: function(dateFormat,date) {
            datepicker.update({
                minDate: new Date(date)
            });
        }
    });
    //обратно
    $('.wrap_dateform_sp .datepicker_out').datepicker({
        autoClose: false,
            showEvent: 'click',
        minDate: new Date(),
        onSelect: function(dateFormat,date) {
            datepicker.update({
                minDate: new Date(date)
            });
        }
    });
});