Skip to content

Commit 8e05be5

Browse files
oliviertassinarioliviertassinari
committed
Merge pull request mui#1658 from oliviertassinari/date-picker-intl
[DatePicker] add Intl support
2 parents 75f6782 + 9c59bba commit 8e05be5

File tree

9 files changed

+189
-104
lines changed

9 files changed

+189
-104
lines changed

‎docs/src/app/components/pages/components/date-picker.jsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,27 @@ export default class DatePickerPage extends React.Component {
2929
{
3030
name: 'Props',
3131
infoArray: [
32+
{
33+
name: 'DateTimeFormat',
34+
type: 'func',
35+
header: 'default: custom function defined inside utils/date-time.js that only supports en-US locale',
36+
desc: 'Constructor for time formatting. Follow this specificaction: ' +
37+
'ECMAScript Internationalization API 1.0 (ECMA-402).',
38+
},
39+
{
40+
name: 'locale',
41+
type: 'string',
42+
header: 'default: en-US',
43+
desc: 'Locale used for formatting date. If you are not using the default value, ' +
44+
'you have to provide a DateTimeFormat that supports it. You can use Intl.DateTimeFormat' +
45+
' if it\'s supported by your environment. https://github.com/andyearnshaw/Intl.js is a good polyfill.',
46+
},
47+
{
48+
name: 'wordings',
49+
type: 'object',
50+
header: 'default: {ok: \'OK\', cancel: \'Cancel\' }',
51+
desc: 'Wordings used inside the button of the dialog.',
52+
},
3253
{
3354
name: 'autoOk',
3455
type: 'bool',
@@ -195,6 +216,13 @@ export default class DatePickerPage extends React.Component {
195216
maxDate={this.state.maxDate}
196217
showYearSelector={this.state.showYearSelector} />
197218

219+
<DatePicker
220+
hintText="fr version"
221+
DateTimeFormat={Intl.DateTimeFormat}
222+
// Intl is defined by the browser see http://caniuse.com/#search=intl
223+
wordings={{ok: 'OK', cancel: 'Annuler'}}
224+
locale="fr" />
225+
198226
<div style={optionsStyle}>
199227
<TextField
200228
floatingLabelText="Min Date"

‎docs/src/app/components/raw-code/date-picker-code.txt‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,10 @@
1616
minDate={this.state.minDate}
1717
maxDate={this.state.maxDate}
1818
showYearSelector={this.state.showYearSelector} />
19+
20+
<DatePicker
21+
hintText="fr version"
22+
// Intl is defined by the browser see http://caniuse.com/#search=intl
23+
DateTimeFormat={Intl.DateTimeFormat}
24+
wordings={{ok: 'OK', cancel: 'Annuler'}}
25+
locale="fr" />

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

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
const React = require('react');
2-
const DateTime = require('../utils/date-time');
32
const IconButton = require('../icon-button');
43
const Toolbar = require('../toolbar/toolbar');
54
const ToolbarGroup = require('../toolbar/toolbar-group');
@@ -9,6 +8,24 @@ const SlideInTransitionGroup = require('../transition-groups/slide-in');
98
const ThemeManager = require('../styles/theme-manager');
109
const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme');
1110

11+
const styles = {
12+
root: {
13+
position: 'relative',
14+
padding: 0,
15+
backgroundColor: 'inherit',
16+
},
17+
title: {
18+
position: 'absolute',
19+
top: 17,
20+
lineHeight: '14px',
21+
fontSize: 14,
22+
height: 14,
23+
width: '100%',
24+
fontWeight: '500',
25+
textAlign: 'center',
26+
},
27+
};
28+
1229
const CalendarToolbar = React.createClass({
1330
contextTypes: {
1431
muiTheme: React.PropTypes.object,
@@ -26,6 +43,8 @@ const CalendarToolbar = React.createClass({
2643
},
2744

2845
propTypes: {
46+
DateTimeFormat: React.PropTypes.func.isRequired,
47+
locale: React.PropTypes.string.isRequired,
2948
displayDate: React.PropTypes.object.isRequired,
3049
nextMonth: React.PropTypes.bool,
3150
onMonthChange: React.PropTypes.func,
@@ -62,31 +81,17 @@ const CalendarToolbar = React.createClass({
6281
}
6382
},
6483

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-
8684
render() {
87-
let month = DateTime.getFullMonth(this.props.displayDate);
88-
let year = this.props.displayDate.getFullYear();
89-
let styles = this._styles();
85+
const {
86+
DateTimeFormat,
87+
locale,
88+
displayDate,
89+
} = this.props
90+
91+
const dateTimeFormatted = new DateTimeFormat(locale, {
92+
month: 'long',
93+
year: 'numeric',
94+
}).format(displayDate);
9095

9196
const nextButtonIcon = this.state.muiTheme.isRtl ? <NavigationChevronRight /> : <NavigationChevronLeft />;
9297
const prevButtonIcon = this.state.muiTheme.isRtl ? <NavigationChevronLeft /> : <NavigationChevronRight />;
@@ -96,7 +101,7 @@ const CalendarToolbar = React.createClass({
96101
<SlideInTransitionGroup
97102
style={styles.title}
98103
direction={this.state.transitionDirection}>
99-
<div key={month + '_' + year}>{month} {year}</div>
104+
<div key={dateTimeFormatted}>{dateTimeFormatted}</div>
100105
</SlideInTransitionGroup>
101106

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

‎src/date-picker/calendar.jsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ const Calendar = React.createClass({
3434
},
3535

3636
propTypes: {
37+
DateTimeFormat: React.PropTypes.func.isRequired,
38+
locale: React.PropTypes.string.isRequired,
3739
disableYearSelection: React.PropTypes.bool,
3840
initialDate: React.PropTypes.object,
3941
isActive: React.PropTypes.bool,
@@ -133,10 +135,16 @@ const Calendar = React.createClass({
133135
};
134136

135137
const weekTitleDayStyle = this.prepareStyles(styles.weekTitleDay);
138+
const {
139+
DateTimeFormat,
140+
locale,
141+
} = this.props;
136142

137143
return (
138144
<ClearFix style={this.mergeStyles(styles.root)}>
139145
<DateDisplay
146+
DateTimeFormat={DateTimeFormat}
147+
locale={locale}
140148
disableYearSelection={this.props.disableYearSelection}
141149
style={styles.dateDisplay}
142150
selectedDate={this.state.selectedDate}
@@ -148,6 +156,8 @@ const Calendar = React.createClass({
148156
{this.state.displayMonthDay &&
149157
<div style={this.prepareStyles(styles.calendarContainer)}>
150158
<CalendarToolbar
159+
DateTimeFormat={DateTimeFormat}
160+
locale={locale}
151161
displayDate={this.state.displayDate}
152162
onMonthChange={this._handleMonthChange}
153163
prevMonth={toolbarInteractions.prevMonth}

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

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
const React = require('react');
22
const StylePropable = require('../mixins/style-propable');
3-
const DateTime = require('../utils/date-time');
43
const Transitions = require('../styles/transitions');
5-
const AutoPrefix = require('../styles/auto-prefix');
64
const SlideInTransitionGroup = require('../transition-groups/slide-in');
75
const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme');
86
const ThemeManager = require('../styles/theme-manager');
@@ -16,6 +14,8 @@ const DateDisplay = React.createClass({
1614
},
1715

1816
propTypes: {
17+
DateTimeFormat: React.PropTypes.func.isRequired,
18+
locale: React.PropTypes.string.isRequired,
1919
disableYearSelection: React.PropTypes.bool,
2020
monthDaySelected: React.PropTypes.bool,
2121
selectedDate: React.PropTypes.object.isRequired,
@@ -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',
@@ -131,15 +125,20 @@ const DateDisplay = React.createClass({
131125

132126
render() {
133127
let {
128+
DateTimeFormat,
129+
locale,
134130
selectedDate,
135131
style,
136132
...other,
137133
} = 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();
134+
const year = this.props.selectedDate.getFullYear();
135+
const styles = this.getStyles();
136+
137+
const dateTimeFormatted = new DateTimeFormat(locale, {
138+
month: 'short',
139+
weekday: 'short',
140+
day: '2-digit',
141+
}).format(this.props.selectedDate);
143142

144143
return (
145144
<div {...other} style={this.prepareStyles(styles.root, this.props.style)}>
@@ -153,11 +152,10 @@ const DateDisplay = React.createClass({
153152
style={styles.monthDay.root}
154153
direction={this.state.transitionDirection}>
155154
<div
156-
key={dayOfWeek + month + day}
155+
key={dateTimeFormatted}
157156
style={styles.monthDay.title}
158157
onTouchTap={this._handleMonthDayClick}>
159-
<span>{dayOfWeek},</span>
160-
<span style={styles.month}>{month} {day}</span>
158+
{dateTimeFormatted}
161159
</div>
162160
</SlideInTransitionGroup>
163161
</div>

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

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const Dialog = require('../dialog');
1010
const FlatButton = require('../flat-button');
1111
const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme');
1212
const ThemeManager = require('../styles/theme-manager');
13+
const DateTime = require('../utils/date-time');
1314

1415
const DatePickerDialog = React.createClass({
1516

@@ -38,6 +39,9 @@ const DatePickerDialog = React.createClass({
3839
},
3940

4041
propTypes: {
42+
DateTimeFormat: React.PropTypes.func,
43+
locale: React.PropTypes.string,
44+
wordings: React.PropTypes.object,
4145
disableYearSelection: React.PropTypes.bool,
4246
initialDate: React.PropTypes.object,
4347
maxDate: React.PropTypes.object,
@@ -61,6 +65,17 @@ const DatePickerDialog = React.createClass({
6165
};
6266
},
6367

68+
getDefaultProps: function() {
69+
return {
70+
DateTimeFormat: DateTime.DateTimeFormat,
71+
locale: 'en-US',
72+
wordings: {
73+
ok: 'OK',
74+
cancel: 'Cancel',
75+
},
76+
};
77+
},
78+
6479
windowListeners: {
6580
keyup: '_handleWindowKeyUp',
6681
},
@@ -81,6 +96,9 @@ const DatePickerDialog = React.createClass({
8196

8297
render() {
8398
let {
99+
DateTimeFormat,
100+
locale,
101+
wordings,
84102
initialDate,
85103
onAccept,
86104
style,
@@ -113,7 +131,7 @@ const DatePickerDialog = React.createClass({
113131
let actions = [
114132
<FlatButton
115133
key={0}
116-
label="Cancel"
134+
label={wordings.cancel}
117135
secondary={true}
118136
style={styles.actions}
119137
onTouchTap={this._handleCancelTouchTap} />,
@@ -123,7 +141,7 @@ const DatePickerDialog = React.createClass({
123141
actions.push(
124142
<FlatButton
125143
key={1}
126-
label="OK"
144+
label={wordings.ok}
127145
secondary={true}
128146
disabled={this.refs.calendar !== undefined && this.refs.calendar.isSelectedDateDisabled()}
129147
style={styles.actions}
@@ -143,6 +161,8 @@ const DatePickerDialog = React.createClass({
143161
onClickAway={this._handleDialogClickAway}
144162
repositionOnUpdate={false}>
145163
<Calendar
164+
DateTimeFormat={DateTimeFormat}
165+
locale={locale}
146166
ref="calendar"
147167
onDayTouchTap={this._onDayTouchTap}
148168
initialDate={this.props.initialDate}

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ const DatePicker = React.createClass({
2828
},
2929

3030
propTypes: {
31+
DateTimeFormat: React.PropTypes.func,
32+
locale: React.PropTypes.string,
33+
wordings: React.PropTypes.object,
3134
autoOk: React.PropTypes.bool,
3235
defaultDate: React.PropTypes.object,
3336
formatDate: React.PropTypes.func,
@@ -80,6 +83,9 @@ const DatePicker = React.createClass({
8083

8184
render() {
8285
let {
86+
DateTimeFormat,
87+
locale,
88+
wordings,
8389
autoOk,
8490
defaultDate,
8591
formatDate,
@@ -108,6 +114,9 @@ const DatePicker = React.createClass({
108114
onTouchTap={this._handleInputTouchTap}/>
109115
<DatePickerDialog
110116
ref="dialogWindow"
117+
DateTimeFormat={DateTimeFormat}
118+
locale={locale}
119+
wordings={wordings}
111120
mode={mode}
112121
initialDate={this.state.dialogDate}
113122
onAccept={this._handleDialogAccept}

0 commit comments

Comments
 (0)