AirDatePicker for Custom Elements

[Unluckynerd]

I'm using a custom Element (Web component) for Input with React. When I try to use AirDatePicker with the Input Web component, it is rendered as Inline Date Picker, even when providing inline: false in options.

const DatePicker = () => {
  const inputRef = useRef();
  const dp = useRef();

  useEffect(() => {
    dp.current = new AirDatepicker(inputRef.current, {
      locale: localeEn,
      inline: false,
      view: 'months',
      minView: 'months',
      dateFormat: 'MM-yyyy',
    });
  }, []);

  return <custom-input ref={inputRef} />;
};

Only able to use AirDatePicker only in Native Input element, when I'm using other than input html element it is rendered as inline.

[Unluckynerd]

air-datepicker/src/datepicker.js

Line 179 in 1a54ee2

if (inline || !this.elIsInput) {

Is there any reason for rendering AirDatePicker as inline for all html elements except input? This behavior becomes particularly problematic when incorporating web components or HTML elements beyond the native input element. It will be really helpful if you can change this behaviour @t1m0n

[t1m0n]

It was done for simplicity. When developer uses AirDatepicker on block elements, it will automatically render as inline calendar. Because it makes no sense to display it as a regular calendar with a show/hide functionality, since the user will never be able to open it (as there will be no element to focus on).

If you are using custom element would not it better to initialize AirDatepicker inside this element?

[Unluckynerd]

Thanks for the suggestion @t1m0n . I have considered that approach too. Primarily input element is used for datepickers but there could be cases where showing the calendar upon button click. Considering the flexibility for different cases, I have raised this issue.

[t1m0n]

Yeah maybe you are right, this logic is unnecessary. I'll think how to improve this. Thanks!