@carbon/react
Version:
React components for the Carbon Design System
50 lines (48 loc) • 1.94 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { isEmptyDateValue } from "../utils.js";
import baseRangePlugin from "flatpickr/dist/plugins/rangePlugin";
//#region src/components/DatePicker/plugins/rangePlugin.ts
/**
* Copyright IBM Corp. 2019, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @param config Plugin configuration.
* @returns An extension of Flatpickr `rangePlugin` that does the following:
* * Better ensures the calendar dropdown is always aligned to the `<input>` for the starting date.
* Workaround for: https://github.com/flatpickr/flatpickr/issues/1944
* * A logic to ensure `fp.setDate()` call won't end up with "startDate to endDate" set to the first `<input>`
*/
const rangePlugin = (config = {}) => {
const factory = baseRangePlugin(Object.assign({ position: "left" }, config));
return (fp) => {
const { setDate: origSetDate } = fp;
const init = () => {
fp.setDate = (dates, triggerChange, format) => {
origSetDate(dates, triggerChange, format);
if (!triggerChange && Array.isArray(dates) && dates.length === 2) {
const { formatDate, _input: inputFrom } = fp;
const { input: inputTo } = config;
[inputFrom, typeof inputTo === "string" ? document.querySelector(inputTo) : inputTo].forEach((input, i) => {
if (input && input instanceof HTMLInputElement) input.value = isEmptyDateValue(dates[i]) ? "" : formatDate(new Date(dates[i]), fp.config.dateFormat);
});
}
};
};
const origRangePlugin = factory(fp);
const { onReady: origOnReady } = origRangePlugin;
return Object.assign(origRangePlugin, {
onReady: [init, origOnReady],
onPreCalendarPosition: () => {}
});
};
};
//#endregion
export { rangePlugin };