shelving/ui/form/DateInput.js

Toolkit for using data in JavaScript.

import { jsx as _jsx } from "react/jsx-runtime";
import { getDateString, getDateTimeString, getTimeString } from "../../util/date.js";
import { TEXT_INPUT_CLASS } from "./Input.js";
/** Convert a `PossibleDate` to a string for a specific date `<input type="etc">` type. */
const _DATE_TO_STRING = {
    "datetime-local": getDateTimeString, // ISO 8601 without timezone, e.g. "2024-01-01T12:00:00"
    date: getDateString, // YYYY-MM-DD
    time: getTimeString, // HH:MM:SS
};
export function DateInput({ name, title = "", placeholder = title, // Placeholder must be defined or `:placeholder-shown` CSS rules won't show.
required = false, disabled = false, message = "", value, onValue, min, max, input = "date", step, }) {
    const onChange = (e) => {
        onValue?.(e.currentTarget.value ?? undefined);
    };
    const dateToString = _DATE_TO_STRING[input];
    return (_jsx("input", { name: name, type: input, min: dateToString(min), max: dateToString(max), disabled: disabled, required: required, defaultValue: dateToString(value), placeholder: placeholder || " ", className: TEXT_INPUT_CLASS, onChange: onChange, onInput: onChange, title: message, "aria-invalid": !!message, step: step }));
}