mirror of
https://github.com/plankanban/planka.git
synced 2025-07-18 20:59:44 +02:00
fix: Display year when date is outside of current year (#567)
This commit is contained in:
Yu Inoue
GitHub
parent
fbd1b28312
commit
db9e877506
21 changed files with 60 additions and 4 deletions
|
|
@ -4,6 +4,7 @@ import classNames from 'classnames';
|
|||
import { useTranslation, Trans } from 'react-i18next';
|
||||
import { Comment } from 'semantic-ui-react';
|
||||
|
||||
import getDateFormat from '../../../utils/get-date-format';
|
||||
import { ActivityTypes } from '../../../constants/Enums';
|
||||
import ItemComment from './ItemComment';
|
||||
import User from '../../User';
|
||||
|
|
@ -66,7 +67,7 @@ const Item = React.memo(({ type, data, createdAt, user }) => {
|
|||
<div className={classNames(styles.content)}>
|
||||
<div>{contentNode}</div>
|
||||
<span className={styles.date}>
|
||||
{t('format:longDateTime', {
|
||||
{t(`format:${getDateFormat(createdAt)}`, {
|
||||
postProcess: 'formatDate',
|
||||
value: createdAt,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { Comment } from 'semantic-ui-react';
|
|||
import { usePopup } from '../../../lib/popup';
|
||||
import { Markdown } from '../../../lib/custom-ui';
|
||||
|
||||
import getDateFormat from '../../../utils/get-date-format';
|
||||
import CommentEdit from './CommentEdit';
|
||||
import User from '../../User';
|
||||
import DeleteStep from '../../DeleteStep';
|
||||
|
|
@ -33,7 +34,7 @@ const ItemComment = React.memo(
|
|||
<div className={styles.title}>
|
||||
<span className={styles.author}>{user.name}</span>
|
||||
<span className={styles.date}>
|
||||
{t('format:longDateTime', {
|
||||
{t(`format:${getDateFormat(createdAt)}`, {
|
||||
postProcess: 'formatDate',
|
||||
value: createdAt,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
|
|||
import classNames from 'classnames';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import getDateFormat from '../../utils/get-date-format';
|
||||
|
||||
import styles from './DueDate.module.scss';
|
||||
|
||||
const SIZES = {
|
||||
|
|
@ -12,15 +14,27 @@ const SIZES = {
|
|||
MEDIUM: 'medium',
|
||||
};
|
||||
|
||||
const FORMATS = {
|
||||
const LONG_DATE_FORMAT_BY_SIZE = {
|
||||
tiny: 'longDate',
|
||||
small: 'longDate',
|
||||
medium: 'longDateTime',
|
||||
};
|
||||
|
||||
const FULL_DATE_FORMAT_BY_SIZE = {
|
||||
tiny: 'fullDate',
|
||||
small: 'fullDate',
|
||||
medium: 'fullDateTime',
|
||||
};
|
||||
|
||||
const DueDate = React.memo(({ value, size, isDisabled, onClick }) => {
|
||||
const [t] = useTranslation();
|
||||
|
||||
const dateFormat = getDateFormat(
|
||||
value,
|
||||
LONG_DATE_FORMAT_BY_SIZE[size],
|
||||
FULL_DATE_FORMAT_BY_SIZE[size],
|
||||
);
|
||||
|
||||
const contentNode = (
|
||||
<span
|
||||
className={classNames(
|
||||
|
|
@ -29,7 +43,7 @@ const DueDate = React.memo(({ value, size, isDisabled, onClick }) => {
|
|||
onClick && styles.wrapperHoverable,
|
||||
)}
|
||||
>
|
||||
{t(`format:${FORMATS[size]}`, {
|
||||
{t(`format:${dateFormat}`, {
|
||||
value,
|
||||
postProcess: 'formatDate',
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ export default {
|
|||
dateTime: '$t(format:date) $t(format:time)',
|
||||
longDate: 'd MMM',
|
||||
longDateTime: "d MMMM 'v' p",
|
||||
fullDate: 'd MMM, y',
|
||||
fullDateTime: "d MMMM, y 'v' p",
|
||||
},
|
||||
|
||||
translation: {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ export default {
|
|||
dateTime: '$t(format:date) $t(format:time)',
|
||||
longDate: 'MMM d',
|
||||
longDateTime: "MMMM d 'at' p",
|
||||
fullDate: 'MMM d, y',
|
||||
fullDateTime: "MMMM d, y 'a' p",
|
||||
},
|
||||
|
||||
translation: {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ export default {
|
|||
dateTime: '$t(format:date) $t(format:time)',
|
||||
longDate: 'd. MMM',
|
||||
longDateTime: "d. MMMM 'um' p",
|
||||
fullDate: 'd. MMM. y',
|
||||
fullDateTime: "d. MMMM. y 'um' p",
|
||||
},
|
||||
|
||||
translation: {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ export default {
|
|||
dateTime: '$t(format:date) $t(format:time)',
|
||||
longDate: 'MMM d',
|
||||
longDateTime: "MMMM d 'at' p",
|
||||
fullDate: 'MMM d, y',
|
||||
fullDateTime: "MMMM d, y 'at' p",
|
||||
},
|
||||
|
||||
translation: {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ export default {
|
|||
dateTime: '$t(format:date) $t(format:time)',
|
||||
longDate: 'MMM d',
|
||||
longDateTime: "MMMM d 'a' p",
|
||||
fullDate: 'MMM d, y',
|
||||
fullDateTime: "MMMM d, y 'a' p",
|
||||
},
|
||||
|
||||
translation: {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ export default {
|
|||
dateTime: '$t(format:date) $t(format:time)',
|
||||
longDate: 'd MMM',
|
||||
longDateTime: "d MMMM 'à' p",
|
||||
fullDate: 'd MMM y',
|
||||
fullDateTime: "d MMMM y 'à' p",
|
||||
},
|
||||
|
||||
translation: {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ export default {
|
|||
dateTime: '$t(format:date) $t(format:time)',
|
||||
longDate: 'MMM d',
|
||||
longDateTime: "MMMM d 'at' p",
|
||||
fullDate: 'MMM d, y',
|
||||
fullDateTime: "MMMM d, y 'at' p",
|
||||
},
|
||||
|
||||
translation: {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ export default {
|
|||
dateTime: '$t(format:date) $t(format:time)',
|
||||
longDate: 'MMMMd日',
|
||||
longDateTime: "MMMMd'日 ' HH:mm",
|
||||
fullDate: 'yyyy年M月d日',
|
||||
fullDateTime: 'yyyy年M月d日 HH:mm',
|
||||
},
|
||||
|
||||
translation: {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ export default {
|
|||
dateTime: '$t(format:date) $t(format:time)',
|
||||
longDate: "MMMMd'일'",
|
||||
longDateTime: "MMMMd'일 ' a hh시 mm분",
|
||||
fullDate: 'yyyy년M월d일',
|
||||
fullDateTime: 'yyyy년M월d일 a hh시 mm분',
|
||||
},
|
||||
|
||||
translation: {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ export default {
|
|||
dateTime: '$t(format:date) $t(format:time)',
|
||||
longDate: 'd MMM',
|
||||
longDateTime: "d MMMM 'o' p",
|
||||
fullDate: 'd MMM y',
|
||||
fullDateTime: "d MMMM y 'o' p",
|
||||
},
|
||||
|
||||
translation: {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ export default {
|
|||
dateTime: '$t(format:date) $t(format:time)',
|
||||
longDate: 'd MMM',
|
||||
longDateTime: "d MMMM 'в' p",
|
||||
fullDate: 'd MMM y',
|
||||
fullDateTime: "d MMMM y 'в' p",
|
||||
},
|
||||
|
||||
translation: {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ export default {
|
|||
dateTime: '$t(format:date) $t(format:time)',
|
||||
longDate: 'd MMM',
|
||||
longDateTime: "d MMMM 'в' p",
|
||||
fullDate: 'd MMM y',
|
||||
fullDateTime: "d MMMM y 'в' p",
|
||||
},
|
||||
|
||||
translation: {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ export default {
|
|||
dateTime: '$t(format:date) $t(format:time)',
|
||||
longDate: 'd MMM',
|
||||
longDateTime: "d MMMM 'v' p",
|
||||
fullDate: 'd MMM y',
|
||||
fullDateTime: "d MMMM y 'v' p",
|
||||
},
|
||||
|
||||
translation: {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ export default {
|
|||
dateTime: '$t(format:date) $t(format:time)',
|
||||
longDate: 'MMM d',
|
||||
longDateTime: "MMMM d 'at' p",
|
||||
fullDate: 'MMM d, y',
|
||||
fullDateTime: "MMMM d, y 'at' p",
|
||||
},
|
||||
|
||||
translation: {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ export default {
|
|||
dateTime: '$t(format:date) $t(format:time)',
|
||||
longDate: 'd. MMM',
|
||||
longDateTime: "d. MMMM 'Saat' p",
|
||||
fullDate: 'd. MMM. y',
|
||||
fullDateTime: "d. MMMM. y 'Saat' p",
|
||||
},
|
||||
|
||||
translation: {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ export default {
|
|||
dateTime: '$t(format:date) $t(format:time)',
|
||||
longDate: 'MMM d',
|
||||
longDateTime: "MMMM d 'at' p",
|
||||
fullDate: 'MMM d, y',
|
||||
fullDateTime: "MMMM d, y 'at' p",
|
||||
},
|
||||
|
||||
translation: {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ export default {
|
|||
dateTime: '$t(format:date) $t(format:time)',
|
||||
longDate: 'MMM d',
|
||||
longDateTime: "MMMM d 'at' p",
|
||||
fullDate: 'MMM d, y',
|
||||
fullDateTime: "MMMM d, y 'at' p",
|
||||
},
|
||||
|
||||
translation: {
|
||||
|
|
|
|||
6
client/src/utils/get-date-format.js
Normal file
6
client/src/utils/get-date-format.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export default (value, longDateFormat = 'longDateTime', fullDateFormat = 'fullDateTime') => {
|
||||
const year = value.getFullYear();
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
return year === currentYear ? longDateFormat : fullDateFormat;
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue