EN · DE · RU · FR · ES

#2657: FormattedDateTime.jsx

projectforge-webapp/src/components/design/input/calendar/FormattedDateTime.jsx Type: JavaScript/React · Role: Calendar · Source: projectforge-webapp/src/components/design/input/calendar/FormattedDateTime.jsx 36 lines · 31 code · 0 comments · 5 blank
React date/time input component providing calendar picker, date range, and formatted display for the ProjectForge web app.

Code Structure

Hooks used: Selector, Selector

Imports from: moment, prop-types, react, react-redux

Has PropTypes for: FormattedDateTime

Source Code (abridged)

import moment from 'moment';
import PropTypes from 'prop-types';
import React from 'react';
import { useSelector } from 'react-redux';

function FormattedDateTime(
    {
        date,
        slot = 'FROM',
        ...props
    },
) {
    const jsDateFormat = useSelector((state) => state.authentication.user.jsDateFormat);
    const jsTimestampFormatMinutes = useSelector((state) => state.authentication.user.jsTimestampFormatMinutes);
    let format = jsTimestampFormatMinutes;

    if (
        (slot === 'FROM' && date.getHours() === 0 && date.getMinutes() === 0)
        || (slot === 'TO' && date.getHours() === 23 && date.getMinutes() === 59)) {
        format = jsDateFormat;
    }

    return (
        <span {...props}>
            {moment(date)
                .format(format)}
        </span>
    );
}

FormattedDateTime.propTypes = {
    date: PropTypes.instanceOf(Date).isRequired,
    slot: PropTypes.oneOf(['FROM', 'TO']),
};

export default FormattedDateTime;

Git History

bf988bc6d Eliminate 43 npm vulnerabilities: react-scripts→Vite, ESLint 9, dependency cleanup, bugfixes
3685edd6c lift to react 18 wip
033629f77 fix typescript eslint bugs
ee7116516 wip: time input
862b06bbf format time intervall