@rjsf/antd
Version:
Ant Design theme, fields and widgets for react-jsonschema-form
22 lines • 1.37 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import dayjs from 'dayjs';
import { ariaDescribedByIds, } from '@rjsf/utils';
import { DatePicker } from 'antd';
const DATE_PICKER_STYLE = {
width: '100%',
};
/** The `DateTimeWidget` component uses the `BaseInputTemplate` changing the type to `datetime-local` and transforms
* the value to/from utc using the appropriate utility functions.
*
* @param props - The `WidgetProps` for this component
*/
export default function DateTimeWidget(props) {
const { disabled, formContext, id, onBlur, onChange, onFocus, placeholder, readonly, value } = props;
const { readonlyAsDisabled = true } = formContext;
const handleChange = (nextValue) => onChange(nextValue && nextValue.toISOString());
const handleBlur = () => onBlur(id, value);
const handleFocus = () => onFocus(id, value);
const getPopupContainer = (node) => node.parentNode;
return (_jsx(DatePicker, { disabled: disabled || (readonlyAsDisabled && readonly), getPopupContainer: getPopupContainer, id: id, name: id, onBlur: !readonly ? handleBlur : undefined, onChange: !readonly ? handleChange : undefined, onFocus: !readonly ? handleFocus : undefined, placeholder: placeholder, showTime: true, style: DATE_PICKER_STYLE, value: value && dayjs(value), "aria-describedby": ariaDescribedByIds(id) }));
}
//# sourceMappingURL=index.js.map