@sap-ux/ui-components/dist/components/UIDatePicker/UIDatePicker.js

SAP UI Components Library

import React from 'react';
import { UITextInput } from '../UIInput/index.js';
import { UIIcon } from '../UIIcon/index.js';
import { UiIcons } from '../Icons.js';
import './UIDatePicker.scss';
/**
 * UIDatePicker component.
 *
 * @exports
 * @class {UIDatePicker}
 * @extends {React.Component<UIDatePickerProps>}
 */
export class UIDatePicker extends React.Component {
    /**
     * Initializes component properties.
     *
     * @param {UIDatePickerProps} props
     */
    constructor(props) {
        super(props);
        this.state = {
            value: ''
        };
        this.dateRegex = /^\d{4}-\d{2}-\d{2}$/;
        this.dateTimeRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/;
        this.state.value = props.defaultValue ?? '';
        this.onInputChange = this.onInputChange.bind(this);
        this.onPickerChange = this.onPickerChange.bind(this);
    }
    /**
     * On input change event.
     *
     * @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} e
     * @param {string} newValue
     */
    onInputChange(e, newValue = '') {
        newValue = newValue.trim();
        this.props.onChange?.(e, newValue);
        this.setState({ value: newValue });
    }
    /**
     * On Date picker change.
     *
     * @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} e
     */
    onPickerChange(e) {
        let newValue = e.target.value;
        if (!this.props.dateOnly && !this.dateTimeRegex.test(newValue)) {
            newValue = `${e.target.value}:00`;
        }
        this.props.onChange?.(e, newValue);
        this.setState({ value: newValue });
    }
    /**
     * @returns {JSX.Element}
     */
    render() {
        const isFormat = this.dateRegex.test(this.state.value) || this.dateTimeRegex.test(this.state.value);
        return (React.createElement("div", { className: "ui-DatePicker", onKeyDown: this.props.onKeyDown, onClick: this.props.onClick },
            React.createElement(UITextInput, { componentRef: this.props.componentRef, errorMessage: this.props.errorMessage, value: this.state.value, onChange: this.onInputChange }),
            React.createElement("div", { className: "ui-DatePicker-toggle" },
                React.createElement(UIIcon, { iconName: UiIcons.Calendar }),
                React.createElement("input", { type: this.props.dateOnly ? 'date' : 'datetime-local', step: "1", value: isFormat ? this.state.value : '', onChange: this.onPickerChange }))));
    }
}
//# sourceMappingURL=UIDatePicker.js.map