this.setState({ isTouchDevice: (0, _isTouchDevice2['default'])() });
this.setCalendarMonthWeeks(currentMonth);
return componentDidMount;
key: 'componentWillReceiveProps',
function componentWillReceiveProps(nextProps) {
var hidden = nextProps.hidden,
isFocused = nextProps.isFocused,
showKeyboardShortcuts = nextProps.showKeyboardShortcuts,
onBlur = nextProps.onBlur,
renderMonthText = nextProps.renderMonthText,
horizontalMonthPadding = nextProps.horizontalMonthPadding;
var currentMonth = this.state.currentMonth;
if (!this.hasSetInitialVisibleMonth) {
this.hasSetInitialVisibleMonth = true;
currentMonth: nextProps.initialVisibleMonth()
daySize = _props.daySize,
prevIsFocused = _props.isFocused,
prevRenderMonthText = _props.renderMonthText;
if (nextProps.daySize !== daySize) {
calendarMonthWidth: (0, _getCalendarMonthWidth2['default'])(nextProps.daySize, horizontalMonthPadding)
if (isFocused !== prevIsFocused) {
var focusedDate = this.getFocusedDay(currentMonth);
var onKeyboardShortcutsPanelClose = this.state.onKeyboardShortcutsPanelClose;
if (nextProps.showKeyboardShortcuts) {
// the ? shortcut came from the input and we should return input there once it is close
onKeyboardShortcutsPanelClose = onBlur;
showKeyboardShortcuts: showKeyboardShortcuts,
onKeyboardShortcutsPanelClose: onKeyboardShortcutsPanelClose,
focusedDate: focusedDate,
withMouseInteractions: false
this.setState({ focusedDate: null });
if (renderMonthText !== prevRenderMonthText) {
return componentWillReceiveProps;
key: 'shouldComponentUpdate',
function shouldComponentUpdate(nextProps, nextState) {
return (0, _reactAddonsShallowCompare2['default'])(this, nextProps, nextState);
return shouldComponentUpdate;
key: 'componentWillUpdate',
function componentWillUpdate() {
var transitionDuration = this.props.transitionDuration;
// Calculating the dimensions trigger a DOM repaint which
// breaks the CSS transition.
// The setTimeout will wait until the transition ends.
this.setCalendarInfoWidthTimeout = setTimeout(function () {
var calendarInfoWidth = _this2.state.calendarInfoWidth;
var calendarInfoPanelWidth = (0, _calculateDimension2['default'])(_this2.calendarInfo, 'width', true, true);
if (calendarInfoWidth !== calendarInfoPanelWidth) {
calendarInfoWidth: calendarInfoPanelWidth
return componentWillUpdate;
key: 'componentDidUpdate',
function componentDidUpdate(prevProps) {
var _props2 = this.props,
orientation = _props2.orientation,
daySize = _props2.daySize,
isFocused = _props2.isFocused,
numberOfMonths = _props2.numberOfMonths;
focusedDate = _state.focusedDate,
monthTitleHeight = _state.monthTitleHeight;
if (this.isHorizontal() && (orientation !== prevProps.orientation || daySize !== prevProps.daySize)) {
var visibleCalendarWeeks = this.calendarMonthWeeks.slice(1, numberOfMonths + 1);
var calendarMonthWeeksHeight = Math.max.apply(Math, [0].concat(_toConsumableArray(visibleCalendarWeeks))) * (daySize - 1);
var newMonthHeight = monthTitleHeight + calendarMonthWeeksHeight + 1;
this.adjustDayPickerHeight(newMonthHeight);
if (!prevProps.isFocused && isFocused && !focusedDate) {
return componentDidUpdate;
key: 'componentWillUnmount',
function componentWillUnmount() {
clearTimeout(this.setCalendarInfoWidthTimeout);
return componentWillUnmount;
if (!_constants.MODIFIER_KEY_NAMES.has(e.key)) {
this.throttledKeyDown(e);
function onFinalKeyDown(e) {
this.setState({ withMouseInteractions: false });
var _props3 = this.props,
var _state2 = this.state,
focusedDate = _state2.focusedDate,
showKeyboardShortcuts = _state2.showKeyboardShortcuts;
if (!focusedDate) return;
var newFocusedDate = focusedDate.clone();
var didTransitionMonth = false;
// focus might be anywhere when the keyboard shortcuts panel is opened so we want to
// return it to wherever it was before when the panel was opened
var activeElement = (0, _getActiveElement2['default'])();
var onKeyboardShortcutsPanelClose = function () {
function onKeyboardShortcutsPanelClose() {
if (activeElement) activeElement.focus();
return onKeyboardShortcutsPanelClose;
newFocusedDate.subtract(1, 'week');
didTransitionMonth = this.maybeTransitionPrevMonth(newFocusedDate);
newFocusedDate.add(1, 'day');
newFocusedDate.subtract(1, 'day');
didTransitionMonth = this.maybeTransitionPrevMonth(newFocusedDate);
newFocusedDate.startOf('week');
didTransitionMonth = this.maybeTransitionPrevMonth(newFocusedDate);
newFocusedDate.subtract(1, 'month');
didTransitionMonth = this.maybeTransitionPrevMonth(newFocusedDate);
newFocusedDate.add(1, 'week');
didTransitionMonth = this.maybeTransitionNextMonth(newFocusedDate);
newFocusedDate.subtract(1, 'day');
newFocusedDate.add(1, 'day');
didTransitionMonth = this.maybeTransitionNextMonth(newFocusedDate);
newFocusedDate.endOf('week');
didTransitionMonth = this.maybeTransitionNextMonth(newFocusedDate);
newFocusedDate.add(1, 'month');
didTransitionMonth = this.maybeTransitionNextMonth(newFocusedDate);
this.openKeyboardShortcutsPanel(onKeyboardShortcutsPanelClose);
if (showKeyboardShortcuts) {
this.closeKeyboardShortcutsPanel();
// If there was a month transition, do not update the focused date until the transition has
// completed. Otherwise, attempting to focus on a DOM node may interrupt the CSS animation. If
// didTransitionMonth is true, the focusedDate gets updated in #updateStateAfterMonthTransition
if (!didTransitionMonth) {
focusedDate: newFocusedDate
function onPrevMonthClick(nextFocusedDate, e) {
var _props4 = this.props,
daySize = _props4.daySize,
numberOfMonths = _props4.numberOfMonths;
var _state3 = this.state,
calendarMonthWidth = _state3.calendarMonthWidth,
monthTitleHeight = _state3.monthTitleHeight;
if (e) e.preventDefault();
var translationValue = void 0;
var calendarMonthWeeksHeight = this.calendarMonthWeeks[0] * (daySize - 1);
translationValue = monthTitleHeight + calendarMonthWeeksHeight + 1;
} else if (this.isHorizontal()) {
translationValue = calendarMonthWidth;
translationValue = -2 * calendarMonthWidth;
var visibleCalendarWeeks = this.calendarMonthWeeks.slice(0, numberOfMonths);
var _calendarMonthWeeksHeight = Math.max.apply(Math, [0].concat(_toConsumableArray(visibleCalendarWeeks))) * (daySize - 1);
var newMonthHeight = monthTitleHeight + _calendarMonthWeeksHeight + 1;
this.adjustDayPickerHeight(newMonthHeight);
monthTransition: PREV_TRANSITION,
translationValue: translationValue,
nextFocusedDate: nextFocusedDate
function onMonthChange(currentMonth) {
this.setCalendarMonthWeeks(currentMonth);
this.calculateAndSetDayPickerHeight();
// Translation value is a hack to force an invisible transition that
// properly rerenders the CalendarMonthGrid
monthTransition: MONTH_SELECTION_TRANSITION,
translationValue: 0.00001,
nextFocusedDate: currentMonth,
currentMonth: currentMonth
function onYearChange(currentMonth) {
this.setCalendarMonthWeeks(currentMonth);
this.calculateAndSetDayPickerHeight();
// Translation value is a hack to force an invisible transition that
// properly rerenders the CalendarMonthGrid
monthTransition: YEAR_SELECTION_TRANSITION,
translationValue: 0.0001,
nextFocusedDate: currentMonth,
currentMonth: currentMonth
function onNextMonthClick(nextFocusedDate, e) {
var _props5 = this.props,
numberOfMonths = _props5.numberOfMonths,
daySize = _props5.daySize;
var _state4 = this.state,
calendarMonthWidth = _state4.calendarMonthWidth,
monthTitleHeight = _state4.monthTitleHeight;
if (e) e.preventDefault();
var translationValue = void 0;
var firstVisibleMonthWeeks = this.calendarMonthWeeks[1];
var calendarMonthWeeksHeight = firstVisibleMonthWeeks * (daySize - 1);
translationValue = -(monthTitleHeight + calendarMonthWeeksHeight + 1);
if (this.isHorizontal()) {
translationValue = -calendarMonthWidth;
var visibleCalendarWeeks = this.calendarMonthWeeks.slice(2, numberOfMonths + 2);
var _calendarMonthWeeksHeight2 = Math.max.apply(Math, [0].concat(_toConsumableArray(visibleCalendarWeeks))) * (daySize - 1);
var newMonthHeight = monthTitleHeight + _calendarMonthWeeksHeight2 + 1;
this.adjustDayPickerHeight(newMonthHeight);
monthTransition: NEXT_TRANSITION,
translationValue: translationValue,
nextFocusedDate: nextFocusedDate
key: 'getFirstDayOfWeek',
function getFirstDayOfWeek() {
var firstDayOfWeek = this.props.firstDayOfWeek;
if (firstDayOfWeek == null) {
return _moment2['default'].localeData().firstDayOfWeek();
return getFirstDayOfWeek;
key: 'getFirstVisibleIndex',
function getFirstVisibleIndex() {
var orientation = this.props.orientation;
var monthTransition = this.state.monthTransition;
if (orientation === _constants.VERTICAL_SCROLLABLE) return 0;
var firstVisibleMonthIndex = 1;
if (monthTransition === PREV_TRANSITION) {
firstVisibleMonthIndex -= 1;
} else if (monthTransition === NEXT_TRANSITION) {
firstVisibleMonthIndex += 1;
return firstVisibleMonthIndex;
return getFirstVisibleIndex;
function getFocusedDay(newMonth) {
var _props6 = this.props,
getFirstFocusableDay = _props6.getFirstFocusableDay,
numberOfMonths = _props6.numberOfMonths;
var focusedDate = void 0;
if (getFirstFocusableDay) {
focusedDate = getFirstFocusableDay(newMonth);
if (newMonth && (!focusedDate || !(0, _isDayVisible2['default'])(focusedDate, newMonth, numberOfMonths))) {
focusedDate = newMonth.clone().startOf('month');
key: 'setMonthTitleHeight',
function setMonthTitleHeight(monthTitleHeight) {
monthTitleHeight: monthTitleHeight
_this3.calculateAndSetDayPickerHeight();
return setMonthTitleHeight;
key: 'setCalendarMonthWeeks',
function setCalendarMonthWeeks(currentMonth) {
var numberOfMonths = this.props.numberOfMonths;
this.calendarMonthWeeks = [];
var month = currentMonth.clone().subtract(1, 'months');
var firstDayOfWeek = this.getFirstDayOfWeek();
for (var i = 0; i < numberOfMonths + 2; i += 1) {
var numberOfWeeks = (0, _getNumberOfCalendarMonthWeeks2['default'])(month, firstDayOfWeek);
this.calendarMonthWeeks.push(numberOfWeeks);
month = month.add(1, 'months');
return setCalendarMonthWeeks;
function setContainerRef(ref) {
key: 'setCalendarInfoRef',