How to use @datepicker-react/hooks - 10 common examples

<input value="{getInputValue(endDate," placeholder="{phrases.endDatePlaceholder}" id="{endDateInputId}"> onFocusChange(!startDate ? START_DATE : END_DATE)}
            showCalendarIcon={showEndDateCalendarIcon}
            vertical={vertical}
            isActive={focusedInput === END_DATE}
            padding={theme.dateRangeEndDateInputPadding}
            rtl={rtl}
            disableAccessibility={focusedInput === START_DATE}
            onChange={handleInputChange}
            // @ts-ignore
            dateFormat={displayFormat}
          /&gt;
        

isActive={focusedInput === START_DATE}
                  vertical={vertical}
                />
                
                  
                
                
              
            
          )}

position="relative"
        ref={datepickerWrapperRef}
      >
        
          <input value="{getInputValue(startDate," placeholder="{phrases.startDatePlaceholder}" id="{startDateInputId}"> onFocusChange(START_DATE)}
            showCalendarIcon={showStartDateCalendarIcon}
            vertical={vertical}
            isActive={focusedInput === START_DATE}
            padding={theme.dateRangeStartDateInputPadding}
            rtl={rtl}
            onChange={handleInputChange}
            // @ts-ignore
            dateFormat={displayFormat}
          /&gt;
          

}
  }

  return (
    ) => theme || {}}>
      
        <input value="{getInputValue(date," placeholder="{phrases.datePlaceholder}" id="{inputId}"> onFocusChange(true)}
          showCalendarIcon={showCalendarIcon}
          vertical={vertical}
          isActive={false}
          padding={theme.dateSingleInputPadding}
          rtl={rtl}
          onChange={handleInputChange}
          // @ts-ignore
          dateFormat={displayFormat}
        /&gt;

zIndex={theme.datepickerCloseWrapperZIndex}
            >
              
            
          )}

          {showSelectedDates && (

ref.current = setTimeout(() => {
      onClick()
      // @ts-ignore
      const parsedDate = parseDate(dateValue, dateFormat, new Date())

      // @ts-ignore
      if (!isNaN(parsedDate)) {
        onChange(parsedDate)
      }
    }, 1000)
  }

onDayRender={(date: Date) => (
          
            {dayLabelFormatFn(date)}
            😜
          
        )}
      />

onDayRender={(date: Date) => (
          
            {dayLabelFormatFn(date)}
            😜
          
        )}
      />

onDayRender={(date: Date) => (
          
            {dayLabelFormatFn(date)}
            😜
          
        )}
      />

isDateSelected,
    isFirstOrLastSelectedDate,
    isDateHovered,
    firstDayOfWeek,
    onDateSelect,
    onResetDates,
    goToPreviousMonths,
    goToNextMonths,
    numberOfMonths,
    hoveredDate,
    onDateHover,
    isDateFocused,
    focusedDate,
    onDateFocus,
    isDateBlocked: isDateBlockedFn,
  } = useDatepicker({
    startDate,
    endDate,
    focusedInput,
    onDatesChange,
    minBookingDate,
    maxBookingDate,
    minBookingDays,
    isDateBlocked,
    exactMinBookingDays,
    unavailableDates,
    initialVisibleMonth,
    numberOfMonths: numberOfMonthsProp,
    firstDayOfWeek: firstDayOfWeekProp,
  })
  useImperativeHandle(ref, () => ({
    onDateSelect: (date: Date) => {