'use strict';
|
|
var React = require('react'),
|
createClass = require('create-react-class'),
|
onClickOutside = require('react-onclickoutside').default;
|
|
var DateTimePickerMonths = onClickOutside(
|
createClass({
|
render: function() {
|
return React.createElement('div', { className: 'rdtMonths' }, [
|
React.createElement(
|
'table',
|
{ key: 'a' },
|
React.createElement(
|
'thead',
|
{},
|
React.createElement('tr', {}, [
|
React.createElement(
|
'th',
|
{
|
key: 'prev',
|
className: 'rdtPrev',
|
onClick: this.props.subtractTime(1, 'years')
|
},
|
React.createElement('span', {}, '‹')
|
),
|
React.createElement(
|
'th',
|
{
|
key: 'year',
|
className: 'rdtSwitch',
|
onClick: this.props.showView('years'),
|
colSpan: 2,
|
'data-value': this.props.viewDate.year()
|
},
|
this.props.viewDate.year()
|
),
|
React.createElement(
|
'th',
|
{
|
key: 'next',
|
className: 'rdtNext',
|
onClick: this.props.addTime(1, 'years')
|
},
|
React.createElement('span', {}, '›')
|
)
|
])
|
)
|
),
|
React.createElement(
|
'table',
|
{ key: 'months' },
|
React.createElement('tbody', { key: 'b' }, this.renderMonths())
|
)
|
]);
|
},
|
|
renderMonths: function() {
|
var date = this.props.selectedDate,
|
month = this.props.viewDate.month(),
|
year = this.props.viewDate.year(),
|
rows = [],
|
i = 0,
|
months = [],
|
renderer = this.props.renderMonth || this.renderMonth,
|
isValid = this.props.isValidDate || this.alwaysValidDate,
|
classes,
|
props,
|
currentMonth,
|
isDisabled,
|
noOfDaysInMonth,
|
daysInMonth,
|
validDay,
|
// Date is irrelevant because we're only interested in month
|
irrelevantDate = 1;
|
|
while (i < 12) {
|
classes = 'rdtMonth';
|
currentMonth = this.props.viewDate
|
.clone()
|
.set({ year: year, month: i, date: irrelevantDate });
|
|
noOfDaysInMonth = currentMonth.endOf('month').format('D');
|
daysInMonth = Array.from({ length: noOfDaysInMonth }, function(e, i) {
|
return i + 1;
|
});
|
|
validDay = daysInMonth.find(function(d) {
|
var day = currentMonth.clone().set('date', d);
|
return isValid(day);
|
});
|
|
isDisabled = validDay === undefined;
|
|
if (isDisabled) classes += ' rdtDisabled';
|
|
if (date && i === date.month() && year === date.year())
|
classes += ' rdtActive';
|
|
props = {
|
key: i,
|
'data-value': i,
|
className: classes
|
};
|
|
if (!isDisabled)
|
props.onClick =
|
this.props.updateOn === 'months'
|
? this.updateSelectedMonth
|
: this.props.setDate('month');
|
|
months.push(renderer(props, i, year, date && date.clone()));
|
|
if (months.length === 4) {
|
rows.push(
|
React.createElement(
|
'tr',
|
{ key: month + '_' + rows.length },
|
months
|
)
|
);
|
months = [];
|
}
|
|
i++;
|
}
|
|
return rows;
|
},
|
|
updateSelectedMonth: function(event) {
|
this.props.updateSelectedDate(event);
|
},
|
|
renderMonth: function(props, month) {
|
var localMoment = this.props.viewDate;
|
var monthStr = localMoment
|
.localeData()
|
.monthsShort(localMoment.month(month));
|
var strLength = 3;
|
// Because some months are up to 5 characters long, we want to
|
// use a fixed string length for consistency
|
var monthStrFixedLength = monthStr.substring(0, strLength);
|
return React.createElement('td', props, capitalize(monthStrFixedLength));
|
},
|
|
alwaysValidDate: function() {
|
return 1;
|
},
|
|
handleClickOutside: function() {
|
this.props.handleClickOutside();
|
}
|
})
|
);
|
|
function capitalize(str) {
|
return str.charAt(0).toUpperCase() + str.slice(1);
|
}
|
|
module.exports = DateTimePickerMonths;
|
