Skip to content

Commit

Permalink
[DatePicker] implement custom DateTimeFormat
Browse files Browse the repository at this point in the history
  • Loading branch information
@oliviertassinari
oliviertassinari committed Oct 23, 2015
1 parent 2c18cd7 commit ecab894
Show file tree
Hide file tree
Showing 3 changed files with 179 additions and 99 deletions.
48 changes: 23 additions & 25 deletions src/date-picker/calendar-toolbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 ? <NavigationChevronRight /> : <NavigationChevronLeft />;
const prevButtonIcon = this.state.muiTheme.isRtl ? <NavigationChevronLeft /> : <NavigationChevronRight />;
Expand All @@ -96,7 +94,7 @@ const CalendarToolbar = React.createClass({
<SlideInTransitionGroup
style={styles.title}
direction={this.state.transitionDirection}>
<div key={month + '_' + year}>{month} {year}</div>
<div key={dateTimeFormated}>{dateTimeFormated}</div>
</SlideInTransitionGroup>

<ToolbarGroup key={0} float="left">
Expand Down
24 changes: 10 additions & 14 deletions src/date-picker/date-display.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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 (
<div {...other} style={this.prepareStyles(styles.root, this.props.style)}>
Expand All @@ -153,11 +150,10 @@ const DateDisplay = React.createClass({
style={styles.monthDay.root}
direction={this.state.transitionDirection}>
<div
key={dayOfWeek + month + day}
key={dateTimeFormated}
style={styles.monthDay.title}
onTouchTap={this._handleMonthDayClick}>
<span>{dayOfWeek},</span>
<span style={styles.month}>{month} {day}</span>
{dateTimeFormated}
</div>
</SlideInTransitionGroup>
</div>
Expand Down
206 changes: 146 additions & 60 deletions src/utils/date-time.js
View file
Original file line number Diff line number Diff line change
@@ -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;
},
Expand All @@ -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;
},
Expand All @@ -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);
Expand Down Expand Up @@ -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;
},

Expand All @@ -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());
},
Expand Down

0 comments on commit ecab894

Please sign in to comment.