Date on page load is empty

74
May 15, 2018, at 5:20 PM

I have inline datepickers in my View. I using air-datepickers.

Here is code how I load it

 let leg_0_datepicker;
  let leg_1_datepicker;
  export function load_datepickers_inline(): void {
    const search_legs_0_datepicker = $("#search_legs_0_datepicker");
    leg_0_datepicker = $("#search_legs_0_datepicker").datepicker({
      language: gon.locale,
      classes: "inline-picker",
      selectOtherMonths: true,
      showOtherMonths: true,
      changeMonth: true,
      changeYear: true,
      toggleSelected: false,
      altField: "#search_legs_0_date",
      startDate: new Date(search_legs_0_datepicker.attr("data-defaultDate")),
      minDate: new Date(search_legs_0_datepicker.attr("data-mindate")),
      maxDate: new Date(search_legs_0_datepicker.attr("data-maxdate")),
      altFieldDateFormat: "yyyy-mm-dd",
      onSelect(formattedDate, date, inst) {
        if (!leg_1_datepicker) {
          return false;
        }
        leg_1_datepicker.update("minDate", date);
        if (date > leg_1_datepicker.selectedDates[0]) {
          leg_1_datepicker.selectDate(date);
        }
        if ($("#search_legs_0_hotel_date").length > 0) {
          $("#search_legs_0_hotel_date").datepicker().data("datepicker").update("minDate", date);
          $("#search_legs_0_hotel_date").datepicker().data("datepicker").selectDate(date);
          $("#search_legs_1_hotel_date").datepicker().data("datepicker").update("minDate", date);
        }
      },
    }).data("datepicker");
    if (leg_0_datepicker) {
      leg_0_datepicker.selectDate(new Date(search_legs_0_datepicker.attr("data-defaultDate")));
    }
    const search_legs_1_datepicker = $("#search_legs_1_datepicker");
    leg_1_datepicker = $("#search_legs_1_datepicker").datepicker({
      selectOtherMonths: true,
      showOtherMonths: true,
      language: gon.locale,
      changeMonth: true,
      changeYear: true,
      toggleSelected: false,
      classes: "inline-picker",
      altField: "#search_legs_1_date",
      startDate: new Date(search_legs_1_datepicker.attr("data-defaultDate")),
      minDate: new Date(search_legs_1_datepicker.attr("data-mindate")),
      maxDate: new Date(search_legs_1_datepicker.attr("data-maxdate")),
      altFieldDateFormat: "yyyy-mm-dd",
      onSelect(formattedDate, date, inst) {
        if ($("#search_legs_1_hotel_date").length > 0) {
          $("#search_legs_0_hotel_date").datepicker().data("datepicker").update("maxDate", date);
          $("#search_legs_1_hotel_date").datepicker().data("datepicker").update("maxDate", date);
          $("#search_legs_1_hotel_date").datepicker().data("datepicker").selectDate(date);
        }
      }
    }).data("datepicker");
    if (leg_1_datepicker) {
      leg_1_datepicker.selectDate(new Date(search_legs_1_datepicker.attr("data-defaultDate")));
    }
  }

I need to get value form it on submit button. I cant post all code, because it very huge.

But I faced an issue. When page loads and I click submit button it tells me, that leg_0_datepicker is not have date. But when I change date to any other it working great(onSelect event).

I think trouble can be in this part of code

 `if (leg_0_datepicker) {
          leg_0_datepicker.
             selectDate(new Date(search_legs_0_datepicker.attr("data-defaultDate")));
        }`

But as you see from my screen date is selected

Screen

How I can fix my issue, because I cannot understood, why it not works?

READ ALSO
Sorting Dropzone.js

Sorting Dropzone.js

I'm using Dropzonejs with Spring boot

106
Moving elements by class in javascript [on hold]

Moving elements by class in javascript [on hold]

For example I have the code like:

73