Как на поле input повесить открытие календаря?

Question

[Денис Гуров]

Ребята, всем привет. Помогите решить задачу. Есть вот такие input поля:

<div class="bapi-apartment__inline-check">
      <input type="text" name="bapi-apartment__check-in" id="bapi-apartment__check-in"
             placeholder="<?php esc_attr_e( 'CHECK IN' ) ?>" readonly>
    </div>
    <div class="bapi-apartment__inline-check">
      <input type="text" name="bapi-apartment__check-out" id="bapi-apartment__check-out"
             placeholder="<?php esc_attr_e( 'CHECK OUT' ) ?>" readonly>
    </div>

И вот такой код на jquery:

function BookingDatePick(selectorInput) {
      this.selectorInput = selectorInput;
      this.$input = $(this.selectorInput);
      this.dateFormat = 'yyyy-mm-dd';
      this.type = 'datepick';
      this.dateSelectEvent = 'bapiOnSelectDate';
    }

    BookingDatePick.prototype.init = function () {
      this.initDatepicker();
    };

    BookingDatePick.prototype.initDatepicker = function () {
      var that = this;
      var disabledDates = $('.bapi-step-1__date').data('disabled-dates');

      this.$input.datepick({
        dateFormat: getDateFormat(),
        pickerClass: 'bapi-date-picker',
        minDate: new Date(),
        maxDate: this.getMaxDate(),
        showOtherMonths: true,
        firstDay: 1,
        onDate: function (date, currentMonth) {
          for (var i = 0; i < disabledDates.length; i++) {
            var startDate = $.datepick.parseDate(getDateFormat(), disabledDates[i].start);
            var endDate = $.datepick.parseDate(getDateFormat(), disabledDates[i].end);
            if (startDate.getTime() <= date.getTime() && endDate.getTime() >= date.getTime()) {
              return {
                selectable: false,
                dateClass: 'disabled-date',
              }
            }
          }
          return {};
        },
        onSelect: function (dates) {
          that.triggerSelect(dates[0]);
        }
      });
    };

    BookingDatePick.prototype.triggerSelect = function (dates) {
      $('body').trigger(this.dateSelectEvent, [this.type, dates]);
    };

    BookingDatePick.prototype.getMaxDate = function () {
      var maxDate = new Date();
      maxDate.setFullYear(new Date().getFullYear() + 1);
      maxDate.setMonth(11);
      maxDate.setDate(31);
      return maxDate;
    };

    BookingDatePick.prototype.getCurrentDate = function () {
      var inputVal = this.$input.val();
      if (inputVal) {
        return $.datepick.parseDate(getDateFormat(), this.$input.val());
      }
    };

    function ArrivalBookingDatepick(selectorInput) {
      BookingDatePick.call(this, selectorInput);
      this.type = 'arrival';
    };

    ArrivalBookingDatepick.prototype = Object.create(BookingDatePick.prototype);
    ArrivalBookingDatepick.prototype.constructor = ArrivalBookingDatepick;

    function DepartureBookingDatepick(selectorInput) {
      BookingDatePick.call(this, selectorInput);
      this.type = 'departure';
    };

    DepartureBookingDatepick.prototype = Object.create(BookingDatePick.prototype);
    DepartureBookingDatepick.prototype.constructor = DepartureBookingDatepick;

    function DatepickerController() {
      this.arrivalDatepicker = null;
      this.departureDatepicker = null;
    };

    DatepickerController.prototype.init = function () {
      this.initDatepickers();
      this.onSelectDate();
    };

    DatepickerController.prototype.initDatepickers = function () {
      this.arrivalDatepicker = new ArrivalBookingDatepick('input[name="bapi_apartment_booking[date-arrival]"]');
      this.arrivalDatepicker.init();

      this.departureDatepicker = new DepartureBookingDatepick('input[name="bapi_apartment_booking[date-departure]"]');
      this.departureDatepicker.init();
    };

    DatepickerController.prototype.onSelectDate = function () {
      var that = this;
      $('body').on('bapiOnSelectDate', function (e, type, date) {
        switch (type) {
          case that.arrivalDatepicker.type:
            var departureDate = that.departureDatepicker.getCurrentDate();

            if (departureDate instanceof Date) {
              $('body').trigger('bapiOnSetNightsLabel', [new Date(date.getTime()), new Date(departureDate.getTime())]);
            }

            $('body').trigger('bapiOnSetArrivalDate', new Date(date.getTime()));

            date.setDate(date.getDate() + 1);
            that.departureDatepicker.$input.datepick('option', {
              minDate: date,
            });
            break;
          case that.departureDatepicker.type:
            var arrivalDate = that.arrivalDatepicker.getCurrentDate();

            if (arrivalDate instanceof Date) {
              $('body').trigger('bapiOnSetNightsLabel', [new Date(arrivalDate.getTime()), new Date(date.getTime())]);
            }

            $('body').trigger('bapiOnSetDepartureDate', new Date(date.getTime()));

            date.setDate(date.getDate() - 1);
            that.arrivalDatepicker.$input.datepick('option', {
              maxDate: date,
            });
            break;
        }
        if (that.arrivalDatepicker.$input.val() && that.departureDatepicker.$input.val()) {
          $('body').trigger('bapiFirstTabEnable');
        } else {
          $('body').trigger('bapiFirstTabDisable');
        }
      });
    };

    function initDatepickers() {
      var datePickerController = new DatepickerController();
      datePickerController.init();
    }

Помогите понять данный jquery и сделать так что бы при клике на input открывался календарь.

Answer 1

[prostoprofan]

BookingDatePick('#bapi-apartment__check-out');
BookingDatePick('#bapi-apartment__check-in');