Skip to content

Commit 5f4b50c

Browse files
author
Jonas Gossens
committed
✨ Change DateInfo
1 parent 63ec29c commit 5f4b50c

File tree

4 files changed

+66
-8
lines changed

4 files changed

+66
-8
lines changed

‎examples/react-chayns-dateinfo/Example.jsx

+3
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,9 @@ export default class DateExample extends Component {
6868
<div style={{ fontWeight: 'bold' }}>writeMonth:</div>
6969
<DateInfo date={date} writeMonth language={language} />
7070

71+
<div style={{ fontWeight: 'bold' }}>writeMonth=false showDate:</div>
72+
<DateInfo date={date} writeMonth={false} showDate language={language} />
73+
7174
<div style={{ fontWeight: 'bold' }}>writeMonth writeDay:</div>
7275
<DateInfo date={date} writeMonth writeDay language={language} />
7376

‎src/react-chayns-dateinfo/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ The component got the following properties:
3030
| showTime | show time in the text | bool | | null |
3131
| showDate | show date in the text | bool | | null |
3232
| writeDay | write day (e.g. monday) | bool | | false |
33-
| writeMonth | write month (e.g. december instead of 12.) | bool | | false |
33+
| writeMonth | write month (e.g. december (true) or 12. (false) instead of dec) | bool | | null |
3434
| noTitle | don't add the title attribute | bool | | false |
3535
| useToday | use today instead of the date | bool | | null |
3636
| useTomorrowYesterday | use tomorrow and yesterday instead of the date | bool | | null |

‎src/react-chayns-dateinfo/component/DateInfo.jsx

+14-7
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default class DateInfo extends PureComponent {
2424
showTime: null,
2525
showDate: null,
2626
writeDay: false,
27-
writeMonth: false,
27+
writeMonth: null,
2828
noTitle: false,
2929
useToday: null,
3030
useTomorrowYesterday: null,
@@ -85,6 +85,7 @@ export default class DateInfo extends PureComponent {
8585
days: dateObj.getDate(),
8686
month: dateObj.getMonth() + 1,
8787
monthWritten: text[options.language].MONTHS[dateObj.getMonth()],
88+
monthShortWritten: text[options.language].MONTHS_SHORT[dateObj.getMonth()],
8889
years: dateObj.getFullYear(),
8990
};
9091

@@ -109,8 +110,10 @@ export default class DateInfo extends PureComponent {
109110
} else if ((options.showDate || options.writeMonth) && (!(options.useTomorrowYesterday && unit === 'day') && !(options.useToday && (unit.charAt(unit.length - 1) === '0' || unit === 'now')))) {
110111
if (options.writeMonth) {
111112
txt = text[options.language].ABSOLUTE_TEXT.dateMW;
112-
} else {
113+
} else if (options.writeMonth === false) {
113114
txt = text[options.language].ABSOLUTE_TEXT.date;
115+
} else {
116+
txt = text[options.language].ABSOLUTE_TEXT.dateMSW;
114117
}
115118
}
116119

@@ -134,13 +137,14 @@ export default class DateInfo extends PureComponent {
134137

135138
static getAbsoluteDateString = (date, options = { language: 'de' }) => {
136139
const dateObj = new Date(date);
137-
const txt = text[options.language].ABSOLUTE_TEXT.datetime;
140+
const txt = text[options.language].ABSOLUTE_TEXT.datetimeMSW;
138141
const absoluteValues = {
139142
seconds: dateObj.getSeconds(),
140143
minutes: dateObj.getMinutes(),
141144
hours: dateObj.getHours(),
142145
days: dateObj.getDate(),
143146
month: dateObj.getMonth() + 1,
147+
monthShortWritten: text[options.language].MONTHS_SHORT[dateObj.getMonth()],
144148
years: dateObj.getFullYear(),
145149
};
146150
return DateInfo.replace(txt, {}, absoluteValues);
@@ -153,15 +157,18 @@ export default class DateInfo extends PureComponent {
153157
.replace('##rMONTHS##', relativeValues.months)
154158
.replace('##rYEARS##', relativeValues.years)
155159
.replace('##aSECONDS##', absoluteValues.seconds)
156-
.replace('##aMINUTES##', absoluteValues.minutes.toString().padStart(2, '0'))
157-
.replace('##aHOURS##', absoluteValues.hours.toString().padStart(2, '0'))
158-
.replace('##aDAYS##', absoluteValues.days)
159-
.replace('##aMONTH##', absoluteValues.month)
160+
.replace('##aMINUTES##', DateInfo.leadingZero(absoluteValues.minutes))
161+
.replace('##aHOURS##', DateInfo.leadingZero(absoluteValues.hours))
162+
.replace('##aDAYS##', DateInfo.leadingZero(absoluteValues.days))
163+
.replace('##aMONTH##', DateInfo.leadingZero(absoluteValues.month))
164+
.replace('##aMONTHsw##', absoluteValues.monthShortWritten)
160165
.replace('##aMONTHw##', absoluteValues.monthWritten)
161166
.replace('##aYEARS##', absoluteValues.years)
162167
.replace(/^\s*|\s*$/g, '')// Matches whitespace at the start and end of the string
163168
;
164169

170+
static leadingZero = value => value.toString().padStart(2, '0');
171+
165172
render() {
166173
const {
167174
date, language, noTitle, children, showDate, showTime, writeMonth, writeDay, date2, useToday, useTomorrowYesterday,

‎src/react-chayns-dateinfo/constants/text.js

+48
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,11 @@ const text = {
4848
ABSOLUTE_TEXT: {
4949
date: '##aDAYS##.##aMONTH##.##aYEARS##',
5050
dateMW: '##aDAYS##. ##aMONTHw## ##aYEARS##',
51+
dateMSW: '##aDAYS##. ##aMONTHsw## ##aYEARS##',
5152
time: '##aHOURS##:##aMINUTES## Uhr',
5253
datetime: '##aDAYS##.##aMONTH##.##aYEARS##, ##aHOURS##:##aMINUTES## Uhr',
5354
datetimeMW: '##aDAYS##. ##aMONTHw## ##aYEARS##, ##aHOURS##:##aMINUTES## Uhr',
55+
datetimeMSW: '##aDAYS##. ##aMONTHsw## ##aYEARS##, ##aHOURS##:##aMINUTES## Uhr',
5456
at: 'um',
5557
},
5658
INTERVAL: {
@@ -80,6 +82,20 @@ const text = {
8082
'November',
8183
'Dezember',
8284
],
85+
MONTHS_SHORT: [
86+
'Jan.',
87+
'Feb.',
88+
'Mär.',
89+
'Apr.',
90+
'Mai',
91+
'Jun.',
92+
'Jul.',
93+
'Aug.',
94+
'Sep.',
95+
'Okt.',
96+
'Nov.',
97+
'Dez.',
98+
],
8399
},
84100
en: {
85101
RELATIVE_TEXT: {
@@ -130,9 +146,11 @@ const text = {
130146
ABSOLUTE_TEXT: {
131147
date: '##aDAYS##/##aMONTH##/##aYEARS##',
132148
dateMW: '##aDAYS## ##aMONTHw## ##aYEARS##',
149+
dateMSW: '##aDAYS## ##aMONTHsw## ##aYEARS##',
133150
time: '##aHOURS##:##aMINUTES##',
134151
datetime: '##aDAYS##/##aMONTH##/##aYEARS##, ##aHOURS##:##aMINUTES##',
135152
datetimeMW: '##aDAYS## ##aMONTHw## ##aYEARS##, ##aHOURS##:##aMINUTES##',
153+
datetimeMSW: '##aDAYS## ##aMONTHsw## ##aYEARS##, ##aHOURS##:##aMINUTES##',
136154
at: 'at',
137155
},
138156
INTERVAL: {
@@ -162,6 +180,20 @@ const text = {
162180
'november',
163181
'december',
164182
],
183+
MONTHS_SHORT: [
184+
'jan',
185+
'feb',
186+
'mar',
187+
'apr',
188+
'may',
189+
'jun',
190+
'jul',
191+
'aug',
192+
'sep',
193+
'oct',
194+
'nov',
195+
'dec',
196+
],
165197
},
166198
nl: {
167199
RELATIVE_TEXT: {
@@ -212,9 +244,11 @@ const text = {
212244
ABSOLUTE_TEXT: {
213245
date: '##aDAYS##-##aMONTH##-##aYEARS##',
214246
dateMW: '##aDAYS## ##aMONTHw## ##aYEARS##',
247+
dateMSW: '##aDAYS## ##aMONTHsw## ##aYEARS##',
215248
time: '##aHOURS##.##aMINUTES## uur',
216249
datetime: '##aDAYS##-##aMONTH##-##aYEARS##, ##aHOURS##.##aMINUTES## uur',
217250
datetimeMW: '##aDAYS## ##aMONTHw## ##aYEARS##, ##aHOURS##.##aMINUTES## uur',
251+
datetimeMSW: '##aDAYS## ##aMONTHsw## ##aYEARS##, ##aHOURS##.##aMINUTES## uur',
218252
at: 'om',
219253
},
220254
INTERVAL: {
@@ -244,6 +278,20 @@ const text = {
244278
'november',
245279
'december',
246280
],
281+
MONTHS_SHORT: [
282+
'jan',
283+
'feb',
284+
'mrt',
285+
'apr',
286+
'mei',
287+
'jun',
288+
'jul',
289+
'aug',
290+
'sep',
291+
'okt',
292+
'nov',
293+
'dec',
294+
],
247295
},
248296
};
249297

0 commit comments

Comments
 (0)