[DatePicker] add example with fr

tyfoo · Oct 23, 2015 · 9c59bba · 9c59bba
1 parent 1db8cfc
commit 9c59bba
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 12 deletions.
diff --git a/docs/src/app/components/pages/components/date-picker.jsx b/docs/src/app/components/pages/components/date-picker.jsx
@@ -32,23 +32,23 @@ export default class DatePickerPage extends React.Component {
           {
             name: 'DateTimeFormat',
             type: 'func',
-            header: 'default: custom one that only support en-US locale',
+            header: 'default: custom function defined inside utils/date-time.js that only supports en-US locale',
             desc: 'Constructor for time formatting. Follow this specificaction: ' +
             'ECMAScript Internationalization API 1.0 (ECMA-402).',
           },
           {
             name: 'locale',
             type: 'string',
             header: 'default: en-US',
-            desc: 'Locale used for formating date. If you are not using the default value, ' +
-            'you have to provide a DateTimeFormat that support it. You can use Intl.DateTimeFormat' +
+            desc: 'Locale used for formatting date. If you are not using the default value, ' +
+            'you have to provide a DateTimeFormat that supports it. You can use Intl.DateTimeFormat' +
             ' if it\'s supported by your environment. https://github.com/andyearnshaw/Intl.js is a good polyfill.',
           },
           {
-            name: 'wording',
+            name: 'wordings',
             type: 'object',
             header: 'default: {ok: \'OK\', cancel: \'Cancel\' }',
-            desc: 'Wording used inside the button of the dialog.',
+            desc: 'Wordings used inside the button of the dialog.',
           },
           {
             name: 'autoOk',
@@ -216,6 +216,13 @@ export default class DatePickerPage extends React.Component {
             maxDate={this.state.maxDate}
             showYearSelector={this.state.showYearSelector} />
 
+          <DatePicker
+            hintText="fr version"
+            DateTimeFormat={Intl.DateTimeFormat}
+            // Intl is defined by the browser see http://caniuse.com/#search=intl
+            wordings={{ok: 'OK', cancel: 'Annuler'}}
+            locale="fr" />
+
           <div style={optionsStyle}>
             <TextField
               floatingLabelText="Min Date"

diff --git a/docs/src/app/components/raw-code/date-picker-code.txt b/docs/src/app/components/raw-code/date-picker-code.txt
@@ -16,3 +16,10 @@
   minDate={this.state.minDate}
   maxDate={this.state.maxDate}
   showYearSelector={this.state.showYearSelector} />
+
+<DatePicker
+  hintText="fr version"
+  // Intl is defined by the browser see http://caniuse.com/#search=intl
+  DateTimeFormat={Intl.DateTimeFormat}
+  wordings={{ok: 'OK', cancel: 'Annuler'}}
+  locale="fr" />
diff --git a/src/date-picker/calendar-toolbar.jsx b/src/date-picker/calendar-toolbar.jsx
@@ -88,7 +88,7 @@ const CalendarToolbar = React.createClass({
       displayDate,
     } = this.props
 
-    const dateTimeFormated = new DateTimeFormat(locale, {
+    const dateTimeFormatted = new DateTimeFormat(locale, {
       month: 'long',
       year: 'numeric',
     }).format(displayDate);
@@ -101,7 +101,7 @@ const CalendarToolbar = React.createClass({
         <SlideInTransitionGroup
           style={styles.title}
           direction={this.state.transitionDirection}>
-          <div key={dateTimeFormated}>{dateTimeFormated}</div>
+          <div key={dateTimeFormatted}>{dateTimeFormatted}</div>
         </SlideInTransitionGroup>
 
         <ToolbarGroup key={0} float="left">

diff --git a/src/date-picker/date-display.jsx b/src/date-picker/date-display.jsx
@@ -134,7 +134,7 @@ const DateDisplay = React.createClass({
     const year = this.props.selectedDate.getFullYear();
     const styles = this.getStyles();
 
-    const dateTimeFormated = new DateTimeFormat(locale, {
+    const dateTimeFormatted = new DateTimeFormat(locale, {
       month: 'short',
       weekday: 'short',
       day: '2-digit',
@@ -152,10 +152,10 @@ const DateDisplay = React.createClass({
           style={styles.monthDay.root}
           direction={this.state.transitionDirection}>
             <div
-              key={dateTimeFormated}
+              key={dateTimeFormatted}
               style={styles.monthDay.title}
               onTouchTap={this._handleMonthDayClick}>
-                {dateTimeFormated}
+                {dateTimeFormatted}
             </div>
         </SlideInTransitionGroup>
       </div>

diff --git a/src/utils/date-time.js b/src/utils/date-time.js
@@ -6,8 +6,6 @@ const monthLongList = ['January', 'February', 'March', 'April', 'May', 'June',
   'July', 'August', 'September', 'October', 'November', 'December'];
 
 function DateTimeFormat(locale, options) {
-  this.options = options;
-
   if (process.env.NODE_ENV !== 'production' && locale !== 'en-US') {
     console.warn('Wrong usage of DateTimeFormat. The ' + locale +' locale is not supported.');
   }

diff --git a/test/date-picker/calendar-spec.js b/test/date-picker/calendar-spec.js
@@ -7,6 +7,7 @@ import Calendar from 'date-picker/calendar';
 import CalendarToolbar from 'date-picker/calendar-toolbar';
 import IconButton from 'icon-button';
 import injectTheme from '../fixtures/inject-theme';
+import DateTime from 'utils/date-time';
 
 const TestUtils = React.addons.TestUtils;
 
@@ -25,6 +26,8 @@ describe(`Calendar`, () => {
             let render = TestUtils.renderIntoDocument(
                 <ThemedCalendar
                     initialDate={initialDate}
+                    DateTimeFormat={DateTime.DateTimeFormat}
+                    locale="en-US"
                     maxDate={maxDate}
                 />
             );
@@ -42,6 +45,8 @@ describe(`Calendar`, () => {
             let render = TestUtils.renderIntoDocument(
                 <ThemedCalendar
                     initialDate={initialDate}
+                    DateTimeFormat={DateTime.DateTimeFormat}
+                    locale="en-US"
                     maxDate={maxDate} />
             );
             let renderedCalendarToolbar =
@@ -58,6 +63,8 @@ describe(`Calendar`, () => {
             let render = TestUtils.renderIntoDocument(
                 <ThemedCalendar
                     initialDate={initialDate}
+                    DateTimeFormat={DateTime.DateTimeFormat}
+                    locale="en-US"
                     maxDate={maxDate} />
             );
 
@@ -74,6 +81,8 @@ describe(`Calendar`, () => {
             let render = TestUtils.renderIntoDocument(
                 <ThemedCalendar
                     initialDate={initialDate}
+                    DateTimeFormat={DateTime.DateTimeFormat}
+                    locale="en-US"
                     maxDate={maxDate} />
             );
             let prevMonthButton = ReactDOM.findDOMNode(
@@ -94,6 +103,8 @@ describe(`Calendar`, () => {
             let render = TestUtils.renderIntoDocument(
                 <ThemedCalendar
                     initialDate={initialDate}
+                    DateTimeFormat={DateTime.DateTimeFormat}
+                    locale="en-US"
                     maxDate={maxDate} />
             );
             let nextMonthButton = ReactDOM.findDOMNode(
@@ -115,6 +126,8 @@ describe(`Calendar`, () => {
             let render = TestUtils.renderIntoDocument(
                 <ThemedCalendar
                     initialDate={initialDate}
+                    DateTimeFormat={DateTime.DateTimeFormat}
+                    locale="en-US"
                     minDate={minDate}
                 />
             );
@@ -131,6 +144,8 @@ describe(`Calendar`, () => {
             let render = TestUtils.renderIntoDocument(
                 <ThemedCalendar
                     initialDate={initialDate}
+                    DateTimeFormat={DateTime.DateTimeFormat}
+                    locale="en-US"
                     minDate={minDate}
                 />
             );
@@ -147,6 +162,8 @@ describe(`Calendar`, () => {
             let render = TestUtils.renderIntoDocument(
                 <ThemedCalendar
                     initialDate={initialDate}
+                    DateTimeFormat={DateTime.DateTimeFormat}
+                    locale="en-US"
                     minDate={minDate}
                 />
             );
@@ -162,6 +179,8 @@ describe(`Calendar`, () => {
             let render = TestUtils.renderIntoDocument(
                 <ThemedCalendar
                     initialDate={initialDate}
+                    DateTimeFormat={DateTime.DateTimeFormat}
+                    locale="en-US"
                     minDate={minDate}
                 />
             );
@@ -181,6 +200,8 @@ describe(`Calendar`, () => {
             let render = TestUtils.renderIntoDocument(
                 <ThemedCalendar
                     initialDate={initialDate}
+                    DateTimeFormat={DateTime.DateTimeFormat}
+                    locale="en-US"
                     minDate={minDate}
                 />
             );