Skip to content

Commit 9c59bba

Browse files
oliviertassinarioliviertassinari
committed
[DatePicker] add example with fr
1 parent 1db8cfc commit 9c59bba

File tree

6 files changed

+45
-12
lines changed

6 files changed

+45
-12
lines changed

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

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,23 +32,23 @@ export default class DatePickerPage extends React.Component {
3232
{
3333
name: 'DateTimeFormat',
3434
type: 'func',
35-
header: 'default: custom one that only support en-US locale',
35+
header: 'default: custom function defined inside utils/date-time.js that only supports en-US locale',
3636
desc: 'Constructor for time formatting. Follow this specificaction: ' +
3737
'ECMAScript Internationalization API 1.0 (ECMA-402).',
3838
},
3939
{
4040
name: 'locale',
4141
type: 'string',
4242
header: 'default: en-US',
43-
desc: 'Locale used for formating date. If you are not using the default value, ' +
44-
'you have to provide a DateTimeFormat that support it. You can use Intl.DateTimeFormat' +
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' +
4545
' if it\'s supported by your environment. https://github.com/andyearnshaw/Intl.js is a good polyfill.',
4646
},
4747
{
48-
name: 'wording',
48+
name: 'wordings',
4949
type: 'object',
5050
header: 'default: {ok: \'OK\', cancel: \'Cancel\' }',
51-
desc: 'Wording used inside the button of the dialog.',
51+
desc: 'Wordings used inside the button of the dialog.',
5252
},
5353
{
5454
name: 'autoOk',
@@ -216,6 +216,13 @@ export default class DatePickerPage extends React.Component {
216216
maxDate={this.state.maxDate}
217217
showYearSelector={this.state.showYearSelector} />
218218

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+
219226
<div style={optionsStyle}>
220227
<TextField
221228
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: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ const CalendarToolbar = React.createClass({
8888
displayDate,
8989
} = this.props
9090

91-
const dateTimeFormated = new DateTimeFormat(locale, {
91+
const dateTimeFormatted = new DateTimeFormat(locale, {
9292
month: 'long',
9393
year: 'numeric',
9494
}).format(displayDate);
@@ -101,7 +101,7 @@ const CalendarToolbar = React.createClass({
101101
<SlideInTransitionGroup
102102
style={styles.title}
103103
direction={this.state.transitionDirection}>
104-
<div key={dateTimeFormated}>{dateTimeFormated}</div>
104+
<div key={dateTimeFormatted}>{dateTimeFormatted}</div>
105105
</SlideInTransitionGroup>
106106

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

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ const DateDisplay = React.createClass({
134134
const year = this.props.selectedDate.getFullYear();
135135
const styles = this.getStyles();
136136

137-
const dateTimeFormated = new DateTimeFormat(locale, {
137+
const dateTimeFormatted = new DateTimeFormat(locale, {
138138
month: 'short',
139139
weekday: 'short',
140140
day: '2-digit',
@@ -152,10 +152,10 @@ const DateDisplay = React.createClass({
152152
style={styles.monthDay.root}
153153
direction={this.state.transitionDirection}>
154154
<div
155-
key={dateTimeFormated}
155+
key={dateTimeFormatted}
156156
style={styles.monthDay.title}
157157
onTouchTap={this._handleMonthDayClick}>
158-
{dateTimeFormated}
158+
{dateTimeFormatted}
159159
</div>
160160
</SlideInTransitionGroup>
161161
</div>

‎src/utils/date-time.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@ const monthLongList = ['January', 'February', 'March', 'April', 'May', 'June',
66
'July', 'August', 'September', 'October', 'November', 'December'];
77

88
function DateTimeFormat(locale, options) {
9-
this.options = options;
10-
119
if (process.env.NODE_ENV !== 'production' && locale !== 'en-US') {
1210
console.warn('Wrong usage of DateTimeFormat. The ' + locale +' locale is not supported.');
1311
}

‎test/date-picker/calendar-spec.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Calendar from 'date-picker/calendar';
77
import CalendarToolbar from 'date-picker/calendar-toolbar';
88
import IconButton from 'icon-button';
99
import injectTheme from '../fixtures/inject-theme';
10+
import DateTime from 'utils/date-time';
1011

1112
const TestUtils = React.addons.TestUtils;
1213

@@ -25,6 +26,8 @@ describe(`Calendar`, () => {
2526
let render = TestUtils.renderIntoDocument(
2627
<ThemedCalendar
2728
initialDate={initialDate}
29+
DateTimeFormat={DateTime.DateTimeFormat}
30+
locale="en-US"
2831
maxDate={maxDate}
2932
/>
3033
);
@@ -42,6 +45,8 @@ describe(`Calendar`, () => {
4245
let render = TestUtils.renderIntoDocument(
4346
<ThemedCalendar
4447
initialDate={initialDate}
48+
DateTimeFormat={DateTime.DateTimeFormat}
49+
locale="en-US"
4550
maxDate={maxDate} />
4651
);
4752
let renderedCalendarToolbar =
@@ -58,6 +63,8 @@ describe(`Calendar`, () => {
5863
let render = TestUtils.renderIntoDocument(
5964
<ThemedCalendar
6065
initialDate={initialDate}
66+
DateTimeFormat={DateTime.DateTimeFormat}
67+
locale="en-US"
6168
maxDate={maxDate} />
6269
);
6370

@@ -74,6 +81,8 @@ describe(`Calendar`, () => {
7481
let render = TestUtils.renderIntoDocument(
7582
<ThemedCalendar
7683
initialDate={initialDate}
84+
DateTimeFormat={DateTime.DateTimeFormat}
85+
locale="en-US"
7786
maxDate={maxDate} />
7887
);
7988
let prevMonthButton = ReactDOM.findDOMNode(
@@ -94,6 +103,8 @@ describe(`Calendar`, () => {
94103
let render = TestUtils.renderIntoDocument(
95104
<ThemedCalendar
96105
initialDate={initialDate}
106+
DateTimeFormat={DateTime.DateTimeFormat}
107+
locale="en-US"
97108
maxDate={maxDate} />
98109
);
99110
let nextMonthButton = ReactDOM.findDOMNode(
@@ -115,6 +126,8 @@ describe(`Calendar`, () => {
115126
let render = TestUtils.renderIntoDocument(
116127
<ThemedCalendar
117128
initialDate={initialDate}
129+
DateTimeFormat={DateTime.DateTimeFormat}
130+
locale="en-US"
118131
minDate={minDate}
119132
/>
120133
);
@@ -131,6 +144,8 @@ describe(`Calendar`, () => {
131144
let render = TestUtils.renderIntoDocument(
132145
<ThemedCalendar
133146
initialDate={initialDate}
147+
DateTimeFormat={DateTime.DateTimeFormat}
148+
locale="en-US"
134149
minDate={minDate}
135150
/>
136151
);
@@ -147,6 +162,8 @@ describe(`Calendar`, () => {
147162
let render = TestUtils.renderIntoDocument(
148163
<ThemedCalendar
149164
initialDate={initialDate}
165+
DateTimeFormat={DateTime.DateTimeFormat}
166+
locale="en-US"
150167
minDate={minDate}
151168
/>
152169
);
@@ -162,6 +179,8 @@ describe(`Calendar`, () => {
162179
let render = TestUtils.renderIntoDocument(
163180
<ThemedCalendar
164181
initialDate={initialDate}
182+
DateTimeFormat={DateTime.DateTimeFormat}
183+
locale="en-US"
165184
minDate={minDate}
166185
/>
167186
);
@@ -181,6 +200,8 @@ describe(`Calendar`, () => {
181200
let render = TestUtils.renderIntoDocument(
182201
<ThemedCalendar
183202
initialDate={initialDate}
203+
DateTimeFormat={DateTime.DateTimeFormat}
204+
locale="en-US"
184205
minDate={minDate}
185206
/>
186207
);

0 commit comments

Comments
 (0)