@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
42 lines (41 loc) • 1.86 kB
JavaScript
import * as React from 'react';
import { Datepicker } from '../../../components/Datepicker';
import { useAdaptable } from '../../AdaptableContext';
import useProperty from '../../../components/utils/useProperty';
import { dateToISO, parseDateValue } from '../../../Utilities/Helpers/DateHelper';
const AdaptableDateInput = React.forwardRef((props, ref) => {
const dateInputOptions = useAdaptable().adaptableOptions.userInterfaceOptions.dateInputOptions;
const { value: _, defaultValue: __, onChange, required, disabled, showClearButton, ...inputProps } = props;
const [value, setValue] = useProperty(props, 'value', undefined, {
onChange: (dateString) =>
// wrap date value in FormEvent in order to keep the external API unchanged
props.onChange?.({
target: {
// ALWAYS trigger onChange with the ISO format
value: dateString,
},
}),
});
const dateValue = value ? parseDateValue(value) : null;
const datepickerProps = {
// this is OK as long as we do not support range datepicker
value: dateValue,
onChange: (dateValue) =>
// convert to ISO8601 string format
// see https://developer.mozilla.org/en-US/docs/Web/HTML/Date_and_time_formats#date_strings
setValue(dateToISO(dateValue) ?? ''),
required,
disabled,
dateProps: {
format: dateInputOptions.dateFormat,
locale: dateInputOptions.locale,
},
showWeekNumber: dateInputOptions.showWeekNumber,
showOutsideDays: dateInputOptions.showOutsideDays,
datepickerButtons: dateInputOptions.datepickerButtons,
showClearButton,
...inputProps,
};
return React.createElement(Datepicker, { ref: ref, ...datepickerProps });
});
export default AdaptableDateInput;