From ecab894e92c7b01d6b0d224428081f5fa5c3de0c Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 15 Sep 2015 21:56:32 +0100 Subject: [PATCH] [DatePicker] implement custom DateTimeFormat --- src/date-picker/calendar-toolbar.jsx | 48 +++---- src/date-picker/date-display.jsx | 24 ++-- src/utils/date-time.js | 206 +++++++++++++++++++-------- 3 files changed, 179 insertions(+), 99 deletions(-) diff --git a/src/date-picker/calendar-toolbar.jsx b/src/date-picker/calendar-toolbar.jsx index 9a459d453fd31d..4c7edaec797342 100644 --- a/src/date-picker/calendar-toolbar.jsx +++ b/src/date-picker/calendar-toolbar.jsx @@ -9,6 +9,24 @@ const SlideInTransitionGroup = require('../transition-groups/slide-in'); const ThemeManager = require('../styles/theme-manager'); const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); +const styles = { + root: { + position: 'relative', + padding: 0, + backgroundColor: 'inherit', + }, + title: { + position: 'absolute', + top: 17, + lineHeight: '14px', + fontSize: 14, + height: 14, + width: '100%', + fontWeight: '500', + textAlign: 'center', + }, +}; + const CalendarToolbar = React.createClass({ contextTypes: { muiTheme: React.PropTypes.object, @@ -62,31 +80,11 @@ const CalendarToolbar = React.createClass({ } }, - _styles() { - return { - root: { - position: 'relative', - padding: 0, - backgroundColor: 'inherit', - }, - - title: { - position: 'absolute', - top: '17px', - lineHeight: '14px', - fontSize: '14px', - height: '14px', - width: '100%', - fontWeight: '500', - textAlign: 'center', - }, - }; - }, - render() { - let month = DateTime.getFullMonth(this.props.displayDate); - let year = this.props.displayDate.getFullYear(); - let styles = this._styles(); + const dateTimeFormated = new DateTime.DateTimeFormat('en-US', { + month: 'long', + year: 'numeric', + }).format(this.props.displayDate); const nextButtonIcon = this.state.muiTheme.isRtl ? : ; const prevButtonIcon = this.state.muiTheme.isRtl ? : ; @@ -96,7 +94,7 @@ const CalendarToolbar = React.createClass({ -
{month} {year}
+
{dateTimeFormated}
 diff --git a/src/date-picker/date-display.jsx b/src/date-picker/date-display.jsx index 53f335aa68f2ee..b8cca8748551d7 100644 --- a/src/date-picker/date-display.jsx +++ b/src/date-picker/date-display.jsx @@ -85,12 +85,6 @@ const DateDisplay = React.createClass({ padding: 20, }, - month: { - display: isLandscape ? 'block' : undefined, - marginLeft: isLandscape ? undefined : 8, - marginTop: isLandscape ? 5 : undefined, - }, - monthDay: { root: { display: 'inline-block', @@ -135,11 +129,14 @@ const DateDisplay = React.createClass({ style, ...other, } = this.props; - let dayOfWeek = DateTime.getDayOfWeek(this.props.selectedDate); - let month = DateTime.getShortMonth(this.props.selectedDate); - let day = this.props.selectedDate.getDate(); - let year = this.props.selectedDate.getFullYear(); - let styles = this.getStyles(); + const year = this.props.selectedDate.getFullYear(); + const styles = this.getStyles(); + + const dateTimeFormated = new DateTime.DateTimeFormat('en-US', { + month: 'short', + weekday: 'short', + day: '2-digit', + }).format(this.props.selectedDate); return (
@@ -153,11 +150,10 @@ const DateDisplay = React.createClass({ style={styles.monthDay.root} direction={this.state.transitionDirection}>
- {dayOfWeek}, - {month} {day} + {dateTimeFormated}
diff --git a/src/utils/date-time.js b/src/utils/date-time.js index 9554057523b1a1..303d0836b8a376 100644 --- a/src/utils/date-time.js +++ b/src/utils/date-time.js @@ -1,19 +1,154 @@ + +function DateTimeFormat(locale, options) { + this.options = options; + + if (process.env.NODE_ENV !== 'production' && locale !== 'en-US') { + console.warn('Wrong usage of DateTimeFormat'); + } + + this.format = function(date) { + let output; + + if (options.month === 'short' && + options.weekday === 'short' && + options.day === '2-digit') { + + const day = date.getDay(); + switch (day) { + case 0: + output = 'Sun'; + break; + case 1: + output = 'Mon'; + break; + case 2: + output = 'Tue'; + break; + case 3: + output = 'Wed'; + break; + case 4: + output = 'Thu'; + break; + case 5: + output = 'Fri'; + break; + case 6: + output = 'Sat'; + break; + } + + output += ', '; + + const month = date.getMonth(); + switch (month) { + case 0: + output += 'Jan'; + break; + case 1: + output += 'Feb'; + break; + case 2: + output += 'Mar'; + break; + case 3: + output += 'Apr'; + break; + case 4: + output += 'May'; + break; + case 5: + output += 'Jun'; + break; + case 6: + output += 'Jul'; + break; + case 7: + output += 'Aug'; + break; + case 8: + output += 'Sep'; + break; + case 9: + output += 'Oct'; + break; + case 10: + output += 'Nov'; + break; + case 11: + output += 'Dec'; + break; + } + + output += ' ' + date.getDate() + } else if (options.month === 'long' + && options.year === 'numeric') { + + switch (date.getMonth()) { + case 0: + output = 'January'; + break; + case 1: + output = 'February'; + break; + case 2: + output = 'March'; + break; + case 3: + output = 'April'; + break; + case 4: + output = 'May'; + break; + case 5: + output = 'June'; + break; + case 6: + output = 'July'; + break; + case 7: + output = 'August'; + break; + case 8: + output = 'September'; + break; + case 9: + output = 'October'; + break; + case 10: + output = 'November'; + break; + case 11: + output = 'December'; + break; + } + + output += ' ' + date.getFullYear(); + } else if (process.env.NODE_ENV !== 'production') { + console.warn('Wrong usage of DateTimeFormat'); + } + + return output; + }; +} + module.exports = { + DateTimeFormat: DateTimeFormat, addDays(d, days) { - let newDate = this.clone(d); + const newDate = this.clone(d); newDate.setDate(d.getDate() + days); return newDate; }, addMonths(d, months) { - let newDate = this.clone(d); + const newDate = this.clone(d); newDate.setMonth(d.getMonth() + months); return newDate; }, addYears(d, years) { - let newDate = this.clone(d); + const newDate = this.clone(d); newDate.setFullYear(d.getFullYear() + years); return newDate; }, @@ -23,7 +158,7 @@ module.exports = { }, cloneAsDate(d) { - let clonedDate = this.clone(d); + const clonedDate = this.clone(d); clonedDate.setHours(0, 0, 0, 0); return clonedDate; }, @@ -41,55 +176,6 @@ module.exports = { return new Date(d.getFullYear(), d.getMonth(), 1); }, - getFullMonth(d) { - let month = d.getMonth(); - switch (month) { - case 0: return 'January'; - case 1: return 'February'; - case 2: return 'March'; - case 3: return 'April'; - case 4: return 'May'; - case 5: return 'June'; - case 6: return 'July'; - case 7: return 'August'; - case 8: return 'September'; - case 9: return 'October'; - case 10: return 'November'; - case 11: return 'December'; - } - }, - - getShortMonth(d) { - let month = d.getMonth(); - switch (month) { - case 0: return 'Jan'; - case 1: return 'Feb'; - case 2: return 'Mar'; - case 3: return 'Apr'; - case 4: return 'May'; - case 5: return 'Jun'; - case 6: return 'Jul'; - case 7: return 'Aug'; - case 8: return 'Sep'; - case 9: return 'Oct'; - case 10: return 'Nov'; - case 11: return 'Dec'; - } - }, - - getDayOfWeek(d) { - let dow = d.getDay(); - switch (dow) { - case 0: return 'Sun'; - case 1: return 'Mon'; - case 2: return 'Tue'; - case 3: return 'Wed'; - case 4: return 'Thu'; - case 5: return 'Fri'; - case 6: return 'Sat'; - } - }, - getWeekArray(d) { let dayArray = []; let daysInMonth = this.getDaysInMonth(d); @@ -120,9 +206,9 @@ module.exports = { }, format(date) { - let m = date.getMonth() + 1; - let d = date.getDate(); - let y = date.getFullYear(); + const m = date.getMonth() + 1; + const d = date.getDate(); + const y = date.getFullYear(); return m + '/' + d + '/' + y; }, @@ -134,15 +220,15 @@ module.exports = { }, isBeforeDate(d1, d2) { - let date1 = this.cloneAsDate(d1); - let date2 = this.cloneAsDate(d2); + const date1 = this.cloneAsDate(d1); + const date2 = this.cloneAsDate(d2); return (date1.getTime() < date2.getTime()); }, isAfterDate(d1, d2) { - let date1 = this.cloneAsDate(d1); - let date2 = this.cloneAsDate(d2); + const date1 = this.cloneAsDate(d1); + const date2 = this.cloneAsDate(d2); return (date1.getTime() > date2.getTime()); },