@ezform/mui/lib/components/FieldDate.js

Material UI form components for use with EZForm React validation and form library

import React, { memo } from "react";
import { useField, propsEqual } from "@ezform/core";
import { KeyboardDateTimePicker, KeyboardDatePicker, KeyboardTimePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
import MomentUtils from "@date-io/moment";
import { FormControl } from "@material-ui/core";
import { FieldReadonly } from "./FieldReadonly";
import moment from "moment";
export var FieldDate = memo(function (props) {
    var id = props.id, name = props.name, form = props.form, _a = props.validator, validator = _a === void 0 ? function () { return null; } : _a, disabled = props.disabled, label = props.label, format = props.format, _b = props.autoOk, autoOk = _b === void 0 ? true : _b, _c = props.disableToolbar, disableToolbar = _c === void 0 ? false : _c, _d = props.variant, variant = _d === void 0 ? "standard" : _d, minDate = props.minDate, maxDate = props.maxDate, minDateMessage = props.minDateMessage, maxDateMessage = props.maxDateMessage, initialDate = props.initialDate, disablePast = props.disablePast, disableFuture = props.disableFuture, _e = props.type, type = _e === void 0 ? "date" : _e, _f = props.readonly, readonly = _f === void 0 ? form.isReadonly : _f, defaultValue = props.defaultValue, placeholder = props.placeholder;
    useField(name, validator, form, defaultValue);
    var handleChange = function (date) {
        form.setField(name, (date === null || date === void 0 ? void 0 : date.unix()) * 1000);
    };
    if (readonly) {
        return (React.createElement(FieldReadonly, { variant: variant, name: name, id: id, label: label, value: moment(form.getField(name)).format(format), fullWidth: true }));
    }
    return (React.createElement(FormControl, { fullWidth: true },
        React.createElement(MuiPickersUtilsProvider, { utils: MomentUtils },
            React.createElement(React.Fragment, null,
                type === "date" && (React.createElement(KeyboardDatePicker, { autoOk: autoOk, disableToolbar: disableToolbar, disabled: disabled, format: format, name: name, id: id, label: label, value: form.getField(name) || null, onChange: handleChange, KeyboardButtonProps: {
                        "aria-label": "change date",
                    }, error: form.hasError(name), helperText: form.getHelperText(name), inputVariant: variant, initialFocusedDate: initialDate, minDate: minDate, minDateMessage: minDateMessage, maxDate: maxDate, maxDateMessage: maxDateMessage, disablePast: disablePast, disableFuture: disableFuture, InputProps: { placeholder: placeholder } })),
                type === "datetime" && (React.createElement(KeyboardDateTimePicker, { autoOk: autoOk, disableToolbar: disableToolbar, disabled: disabled, format: format, name: name, id: id, label: label, value: form.getField(name) || null, onChange: handleChange, KeyboardButtonProps: {
                        "aria-label": "change date",
                    }, error: form.hasError(name), helperText: form.getHelperText(name), inputVariant: variant, initialFocusedDate: initialDate, minDate: minDate, minDateMessage: minDateMessage, maxDate: maxDate, maxDateMessage: maxDateMessage, disablePast: disablePast, disableFuture: disableFuture, ampm: false, InputProps: { placeholder: placeholder } })),
                type === "time" && (React.createElement(KeyboardTimePicker, { autoOk: autoOk, disableToolbar: disableToolbar, disabled: disabled, format: format, name: name, id: id, label: label, value: form.getField(name) || null, onChange: handleChange, KeyboardButtonProps: {
                        "aria-label": "change date",
                    }, error: form.hasError(name), helperText: form.getHelperText(name), inputVariant: variant, initialFocusedDate: initialDate, ampm: false, InputProps: { placeholder: placeholder } }))))));
}, propsEqual);