react-time-picker/dist/TimeInput/AmPm.js

A time picker for your React app.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { getHours } from '@wojtekmaj/date-utils';
import clsx from 'clsx';
import { convert24to12 } from '../shared/dates.js';
import { getAmPmLabels } from '../shared/utils.js';
export default function AmPm({ ariaLabel, autoFocus, className, disabled, inputRef, locale, maxTime, minTime, onChange, onKeyDown, required, value, }) {
    const amDisabled = minTime ? convert24to12(getHours(minTime))[1] === 'pm' : false;
    const pmDisabled = maxTime ? convert24to12(getHours(maxTime))[1] === 'am' : false;
    const name = 'amPm';
    const [amLabel, pmLabel] = getAmPmLabels(locale);
    return (_jsxs("select", { "aria-label": ariaLabel, 
        // biome-ignore lint/a11y/noAutofocus: This is up to developers' decision
        autoFocus: autoFocus, className: clsx(`${className}__input`, `${className}__${name}`), "data-input": "true", "data-select": "true", disabled: disabled, name: name, onChange: onChange, onKeyDown: onKeyDown, 
        // Assertion is needed for React 18 compatibility
        ref: inputRef, required: required, value: value !== null ? value : '', children: [!value && _jsx("option", { value: "", children: "--" }), _jsx("option", { disabled: amDisabled, value: "am", children: amLabel }), _jsx("option", { disabled: pmDisabled, value: "pm", children: pmLabel })] }));
}