Skip to content

Commit ecab894

Browse files
oliviertassinarioliviertassinari
committedOct 23, 2015
[DatePicker] implement custom DateTimeFormat
1 parent 2c18cd7 commit ecab894

File tree

3 files changed

+179
-99
lines changed

3 files changed

+179
-99
lines changed
 

‎src/date-picker/calendar-toolbar.jsx

+23-25
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,24 @@ const SlideInTransitionGroup = require('../transition-groups/slide-in');
99
const ThemeManager = require('../styles/theme-manager');
1010
const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme');
1111

12+
const styles = {
13+
root: {
14+
position: 'relative',
15+
padding: 0,
16+
backgroundColor: 'inherit',
17+
},
18+
title: {
19+
position: 'absolute',
20+
top: 17,
21+
lineHeight: '14px',
22+
fontSize: 14,
23+
height: 14,
24+
width: '100%',
25+
fontWeight: '500',
26+
textAlign: 'center',
27+
},
28+
};
29+
1230
const CalendarToolbar = React.createClass({
1331
contextTypes: {
1432
muiTheme: React.PropTypes.object,
@@ -62,31 +80,11 @@ const CalendarToolbar = React.createClass({
6280
}
6381
},
6482

65-
_styles() {
66-
return {
67-
root: {
68-
position: 'relative',
69-
padding: 0,
70-
backgroundColor: 'inherit',
71-
},
72-
73-
title: {
74-
position: 'absolute',
75-
top: '17px',
76-
lineHeight: '14px',
77-
fontSize: '14px',
78-
height: '14px',
79-
width: '100%',
80-
fontWeight: '500',
81-
textAlign: 'center',
82-
},
83-
};
84-
},
85-
8683
render() {
87-
let month = DateTime.getFullMonth(this.props.displayDate);
88-
let year = this.props.displayDate.getFullYear();
89-
let styles = this._styles();
84+
const dateTimeFormated = new DateTime.DateTimeFormat('en-US', {
85+
month: 'long',
86+
year: 'numeric',
87+
}).format(this.props.displayDate);
9088

9189
const nextButtonIcon = this.state.muiTheme.isRtl ? <NavigationChevronRight /> : <NavigationChevronLeft />;
9290
const prevButtonIcon = this.state.muiTheme.isRtl ? <NavigationChevronLeft /> : <NavigationChevronRight />;
@@ -96,7 +94,7 @@ const CalendarToolbar = React.createClass({
9694
<SlideInTransitionGroup
9795
style={styles.title}
9896
direction={this.state.transitionDirection}>
99-
<div key={month + '_' + year}>{month} {year}</div>
97+
<div key={dateTimeFormated}>{dateTimeFormated}</div>
10098
</SlideInTransitionGroup>
10199

102100
<ToolbarGroup key={0} float="left">

‎src/date-picker/date-display.jsx

+10-14
Original file line numberDiff line numberDiff line change
@@ -85,12 +85,6 @@ const DateDisplay = React.createClass({
8585
padding: 20,
8686
},
8787

88-
month: {
89-
display: isLandscape ? 'block' : undefined,
90-
marginLeft: isLandscape ? undefined : 8,
91-
marginTop: isLandscape ? 5 : undefined,
92-
},
93-
9488
monthDay: {
9589
root: {
9690
display: 'inline-block',
@@ -135,11 +129,14 @@ const DateDisplay = React.createClass({
135129
style,
136130
...other,
137131
} = this.props;
138-
let dayOfWeek = DateTime.getDayOfWeek(this.props.selectedDate);
139-
let month = DateTime.getShortMonth(this.props.selectedDate);
140-
let day = this.props.selectedDate.getDate();
141-
let year = this.props.selectedDate.getFullYear();
142-
let styles = this.getStyles();
132+
const year = this.props.selectedDate.getFullYear();
133+
const styles = this.getStyles();
134+
135+
const dateTimeFormated = new DateTime.DateTimeFormat('en-US', {
136+
month: 'short',
137+
weekday: 'short',
138+
day: '2-digit',
139+
}).format(this.props.selectedDate);
143140

144141
return (
145142
<div {...other} style={this.prepareStyles(styles.root, this.props.style)}>
@@ -153,11 +150,10 @@ const DateDisplay = React.createClass({
153150
style={styles.monthDay.root}
154151
direction={this.state.transitionDirection}>
155152
<div
156-
key={dayOfWeek + month + day}
153+
key={dateTimeFormated}
157154
style={styles.monthDay.title}
158155
onTouchTap={this._handleMonthDayClick}>
159-
<span>{dayOfWeek},</span>
160-
<span style={styles.month}>{month} {day}</span>
156+
{dateTimeFormated}
161157
</div>
162158
</SlideInTransitionGroup>
163159
</div>

‎src/utils/date-time.js

+146-60
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,154 @@
1+
2+
function DateTimeFormat(locale, options) {
3+
this.options = options;
4+
5+
if (process.env.NODE_ENV !== 'production' && locale !== 'en-US') {
6+
console.warn('Wrong usage of DateTimeFormat');
7+
}
8+
9+
this.format = function(date) {
10+
let output;
11+
12+
if (options.month === 'short' &&
13+
options.weekday === 'short' &&
14+
options.day === '2-digit') {
15+
16+
const day = date.getDay();
17+
switch (day) {
18+
case 0:
19+
output = 'Sun';
20+
break;
21+
case 1:
22+
output = 'Mon';
23+
break;
24+
case 2:
25+
output = 'Tue';
26+
break;
27+
case 3:
28+
output = 'Wed';
29+
break;
30+
case 4:
31+
output = 'Thu';
32+
break;
33+
case 5:
34+
output = 'Fri';
35+
break;
36+
case 6:
37+
output = 'Sat';
38+
break;
39+
}
40+
41+
output += ', ';
42+
43+
const month = date.getMonth();
44+
switch (month) {
45+
case 0:
46+
output += 'Jan';
47+
break;
48+
case 1:
49+
output += 'Feb';
50+
break;
51+
case 2:
52+
output += 'Mar';
53+
break;
54+
case 3:
55+
output += 'Apr';
56+
break;
57+
case 4:
58+
output += 'May';
59+
break;
60+
case 5:
61+
output += 'Jun';
62+
break;
63+
case 6:
64+
output += 'Jul';
65+
break;
66+
case 7:
67+
output += 'Aug';
68+
break;
69+
case 8:
70+
output += 'Sep';
71+
break;
72+
case 9:
73+
output += 'Oct';
74+
break;
75+
case 10:
76+
output += 'Nov';
77+
break;
78+
case 11:
79+
output += 'Dec';
80+
break;
81+
}
82+
83+
output += ' ' + date.getDate()
84+
} else if (options.month === 'long'
85+
&& options.year === 'numeric') {
86+
87+
switch (date.getMonth()) {
88+
case 0:
89+
output = 'January';
90+
break;
91+
case 1:
92+
output = 'February';
93+
break;
94+
case 2:
95+
output = 'March';
96+
break;
97+
case 3:
98+
output = 'April';
99+
break;
100+
case 4:
101+
output = 'May';
102+
break;
103+
case 5:
104+
output = 'June';
105+
break;
106+
case 6:
107+
output = 'July';
108+
break;
109+
case 7:
110+
output = 'August';
111+
break;
112+
case 8:
113+
output = 'September';
114+
break;
115+
case 9:
116+
output = 'October';
117+
break;
118+
case 10:
119+
output = 'November';
120+
break;
121+
case 11:
122+
output = 'December';
123+
break;
124+
}
125+
126+
output += ' ' + date.getFullYear();
127+
} else if (process.env.NODE_ENV !== 'production') {
128+
console.warn('Wrong usage of DateTimeFormat');
129+
}
130+
131+
return output;
132+
};
133+
}
134+
1135
module.exports = {
136+
DateTimeFormat: DateTimeFormat,
2137

3138
addDays(d, days) {
4-
let newDate = this.clone(d);
139+
const newDate = this.clone(d);
5140
newDate.setDate(d.getDate() + days);
6141
return newDate;
7142
},
8143

9144
addMonths(d, months) {
10-
let newDate = this.clone(d);
145+
const newDate = this.clone(d);
11146
newDate.setMonth(d.getMonth() + months);
12147
return newDate;
13148
},
14149

15150
addYears(d, years) {
16-
let newDate = this.clone(d);
151+
const newDate = this.clone(d);
17152
newDate.setFullYear(d.getFullYear() + years);
18153
return newDate;
19154
},
@@ -23,7 +158,7 @@ module.exports = {
23158
},
24159

25160
cloneAsDate(d) {
26-
let clonedDate = this.clone(d);
161+
const clonedDate = this.clone(d);
27162
clonedDate.setHours(0, 0, 0, 0);
28163
return clonedDate;
29164
},
@@ -41,55 +176,6 @@ module.exports = {
41176
return new Date(d.getFullYear(), d.getMonth(), 1);
42177
},
43178

44-
getFullMonth(d) {
45-
let month = d.getMonth();
46-
switch (month) {
47-
case 0: return 'January';
48-
case 1: return 'February';
49-
case 2: return 'March';
50-
case 3: return 'April';
51-
case 4: return 'May';
52-
case 5: return 'June';
53-
case 6: return 'July';
54-
case 7: return 'August';
55-
case 8: return 'September';
56-
case 9: return 'October';
57-
case 10: return 'November';
58-
case 11: return 'December';
59-
}
60-
},
61-
62-
getShortMonth(d) {
63-
let month = d.getMonth();
64-
switch (month) {
65-
case 0: return 'Jan';
66-
case 1: return 'Feb';
67-
case 2: return 'Mar';
68-
case 3: return 'Apr';
69-
case 4: return 'May';
70-
case 5: return 'Jun';
71-
case 6: return 'Jul';
72-
case 7: return 'Aug';
73-
case 8: return 'Sep';
74-
case 9: return 'Oct';
75-
case 10: return 'Nov';
76-
case 11: return 'Dec';
77-
}
78-
},
79-
80-
getDayOfWeek(d) {
81-
let dow = d.getDay();
82-
switch (dow) {
83-
case 0: return 'Sun';
84-
case 1: return 'Mon';
85-
case 2: return 'Tue';
86-
case 3: return 'Wed';
87-
case 4: return 'Thu';
88-
case 5: return 'Fri';
89-
case 6: return 'Sat';
90-
}
91-
},
92-
93179
getWeekArray(d) {
94180
let dayArray = [];
95181
let daysInMonth = this.getDaysInMonth(d);
@@ -120,9 +206,9 @@ module.exports = {
120206
},
121207

122208
format(date) {
123-
let m = date.getMonth() + 1;
124-
let d = date.getDate();
125-
let y = date.getFullYear();
209+
const m = date.getMonth() + 1;
210+
const d = date.getDate();
211+
const y = date.getFullYear();
126212
return m + '/' + d + '/' + y;
127213
},
128214

@@ -134,15 +220,15 @@ module.exports = {
134220
},
135221

136222
isBeforeDate(d1, d2) {
137-
let date1 = this.cloneAsDate(d1);
138-
let date2 = this.cloneAsDate(d2);
223+
const date1 = this.cloneAsDate(d1);
224+
const date2 = this.cloneAsDate(d2);
139225

140226
return (date1.getTime() < date2.getTime());
141227
},
142228

143229
isAfterDate(d1, d2) {
144-
let date1 = this.cloneAsDate(d1);
145-
let date2 = this.cloneAsDate(d2);
230+
const date1 = this.cloneAsDate(d1);
231+
const date2 = this.cloneAsDate(d2);
146232

147233
return (date1.getTime() > date2.getTime());
148234
},

0 commit comments

Comments
 (0)
Please sign in to comment.