Блог

У меня есть поле ввода, в котором при нажатии на него открывается календарь. Это идет из библиотеки. Проблема в том, что когда я хочу изменить стили календаря и проверить их (реквизиты) в консоли, я не могу.

Так что в основном:

1. Я нажимаю на поле ввода, календарь открывается в небольшом модальном
2. Я вижу div (относящийся к календарю), появляющийся в разделе «Элементы» консоли
3. Как только я нажимаю на этот div в консоли (раздел элементов), календарь исчезает с экрана, поэтому я не могу проверить его стили

Итак, вопрос в том, как я могу отобразить календарь, так как поле ввода всегда нажимается с помощью консоли? Используя внешнюю фреймворк, я не вижу никаких событий onClick. либо какие-либо реквизиты, которые настраивают календарь на открытие, я попытался принудительно изменить все состояния элементов (параметры в DevTools, чтобы заставить ваше поле ввода быть сфокусированным: DevTools принудительно изменяет состояние элемента), но ничего не работает. Есть какие-нибудь идеи? введите код здесь

Это и есть код:

 // DATE PICKER
  const defaultFrom = {
    year: new Date().getFullYear(),
    month: new Date().getMonth(),
    day: new Date().getDate(),
  };
  const defaultTo = {
    year: new Date().getFullYear(),
    month: new Date().getMonth(),
    day: new Date().getDate(),
  };
  const defaultValue = {
    from: defaultFrom,
    to: defaultTo,
  };
  const [selectedDayRange, setSelectedDayRange] = useState(defaultValue);

  /*  const formatInputValue = () => {
    if (!selectedDayRange) return new Date().getDate();
    console.log(selectedDayRange, "day selected")
    return `From: ${selectedDayRange.from.day}/${selectedDayRange.from.month}
    To: ${selectedDayRange.to.day}/${selectedDayRange.to.month}`;
  }; */

  const myCustomLocale = {
    // months list by order
    months: [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December',
    ],

    // week days by order
    weekDays: [
      {
        name: 'Monday',
        short: 'M',
      },
      {
        name: 'Tuesday',
        short: 'T',
      },
      {
        name: 'Wednesday',
        short: 'W',
      },
      {
        name: 'Thursday',
        short: 'T',
      },
      {
        name: 'Friday',
        short: 'F',
      },
      {
        name: 'Saturday',
        short: 'S',
      },
      {
        name: 'Sunday', // used for accessibility
        short: 'S', // displayed at the top of days' rows
        // isWeekend: true, // is it a formal weekend or not?
      },
    ],

    // just play around with this number between 0 and 6
    weekStartingIndex: 4,

    // return a { year: number, month: number, day: number } object
    getToday(gregorainTodayObject) {
      return gregorainTodayObject;
    },

    // return a native JavaScript date here
    toNativeDate(date) {
      return new Date(date.year, date.month, date.day);
    },

    // return a number for date's month length
    getMonthLength(date) {
      return new Date(date.year, date.month, 0).getDate();
    },

    // return a transformed digit to your locale
    transformDigit(digit) {
      return digit;
    },

    // texts in the date picker
    nextMonth: 'Next Month',
    previousMonth: 'Previous Month',
    openMonthSelector: 'Open Month Selector',
    openYearSelector: 'Open Year Selector',
    closeMonthSelector: 'Close Month Selector',
    closeYearSelector: 'Close Year Selector',
    defaultPlaceholder: 'Select...',

    // for input range value
    from: 'from',
    to: 'to',

    // used for input value when multi dates are selected
    digitSeparator: ',',

    // if your provide -2 for example, year will be 2 digited
    yearLetterSkip: 0,

    // is your language rtl or ltr?
    isRtl: false,
  };
 

// компонент

   <DateInput>
    <DatePicker
      value={selectedDayRange}
      onChange={setSelectedDayRange}
      inputPlaceholder="Select a date" // placeholder
      // formatInputText={formatInputValue} // format value
      inputClassName="my-custom-input" // custom class
      shouldHighlightWeekends
      colorPrimary="rgba(4, 173, 147, 255)" // added this
      calendarClassName="custom-calendar" // and this
      calendarTodayClassName="custom-today-day" // also thi
      calendarClassName="responsive-calendar" // added this
      locale={myCustomLocale} // custom locale object
      data-testid="datepicker-input"
    />
  </DateInput>
 

причины проверки стиля календаря заключаются в том, что мне нужна опция, в которой пользователь может выбрать как один день, так и диапазон дат. Но здесь, чтобы выбрать только один день, мне нужно дважды щелкнуть, потому что для этого требуется ОТ и ДО даты. Поэтому я хотел поиграть со стилем, а также с реквизитом, чтобы пользователь мог щелкнуть только один раз, если у него нет диапазона. Другими словами, если вы нажмете в один и тот же день, вы дважды получите диапазон, но в одну и ту же дату. Мне нужно одно значение, когда пользователь нажимает одну дату, и если пользователь выбирает другую дату, открывается опция диапазона. Но не уверен, как это реализовать с помощью этой библиотеки, потому что, во-первых, я даже не могу открыть параметры календаря. имеет ли это смысл?

Вы можете использовать эти параметры в DevTools, чтобы заставить поле ввода быть сфокусированным:

Состояние элемента силы DevTools