From 9c59bba6a7fb2357dd77ec60235b57e91e4edc8d Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 16 Sep 2015 19:43:27 +0100 Subject: [PATCH] [DatePicker] add example with fr --- .../pages/components/date-picker.jsx | 17 ++++++++++----- .../components/raw-code/date-picker-code.txt | 7 +++++++ src/date-picker/calendar-toolbar.jsx | 4 ++-- src/date-picker/date-display.jsx | 6 +++--- src/utils/date-time.js | 2 -- test/date-picker/calendar-spec.js | 21 +++++++++++++++++++ 6 files changed, 45 insertions(+), 12 deletions(-) diff --git a/docs/src/app/components/pages/components/date-picker.jsx b/docs/src/app/components/pages/components/date-picker.jsx index abf7f4384d233a..bab5121b19ad12 100644 --- a/docs/src/app/components/pages/components/date-picker.jsx +++ b/docs/src/app/components/pages/components/date-picker.jsx @@ -32,7 +32,7 @@ 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).', }, @@ -40,15 +40,15 @@ export default class DatePickerPage extends React.Component { 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} /> + +
+ + diff --git a/src/date-picker/calendar-toolbar.jsx b/src/date-picker/calendar-toolbar.jsx index 4c77da739a1b3b..5756a2381c43aa 100644 --- 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({ -
{dateTimeFormated}
+
{dateTimeFormatted}
 diff --git a/src/date-picker/date-display.jsx b/src/date-picker/date-display.jsx index 6fbb075a13b37d..275450ba977599 100644 --- 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}>
- {dateTimeFormated} + {dateTimeFormatted}
diff --git a/src/utils/date-time.js b/src/utils/date-time.js index e714f65dd04265..6359e6e7518cd1 100644 --- 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 index caaa03c74bfd1b..d1e5fc372ec48c 100644 --- 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( ); @@ -42,6 +45,8 @@ describe(`Calendar`, () => { let render = TestUtils.renderIntoDocument( ); let renderedCalendarToolbar = @@ -58,6 +63,8 @@ describe(`Calendar`, () => { let render = TestUtils.renderIntoDocument( ); @@ -74,6 +81,8 @@ describe(`Calendar`, () => { let render = TestUtils.renderIntoDocument( ); let prevMonthButton = ReactDOM.findDOMNode( @@ -94,6 +103,8 @@ describe(`Calendar`, () => { let render = TestUtils.renderIntoDocument( ); let nextMonthButton = ReactDOM.findDOMNode( @@ -115,6 +126,8 @@ describe(`Calendar`, () => { let render = TestUtils.renderIntoDocument( ); @@ -131,6 +144,8 @@ describe(`Calendar`, () => { let render = TestUtils.renderIntoDocument( ); @@ -147,6 +162,8 @@ describe(`Calendar`, () => { let render = TestUtils.renderIntoDocument( ); @@ -162,6 +179,8 @@ describe(`Calendar`, () => { let render = TestUtils.renderIntoDocument( ); @@ -181,6 +200,8 @@ describe(`Calendar`, () => { let render = TestUtils.renderIntoDocument( );