date-picker

Returns an object with properties that are relevant for the wrapping div of the date picker.

Returns an object with properties that are relevant for day span.

Returns an object with properties that are relevant for day span.

Returns an object with properties that are relevant for day span.

Injects pseudo classes for styles into the DOM.

DatePicker React Component.

This implementation follows the recommendations proposed here: http://www.w3.org/TR/wai-aria-practices/#datepicker

Generates the style-id based on React’s unique DOM node id. Calls function to inject the pseudo classes into the dom.

Function will update component state and styles as new props are received.

Removes pseudo classes from the DOM once component gets unmounted.

Callback is called when wrapper is focused, it will conditionally set isFocused.

In addition this.state.focusedDateKey will be set to current date of whichever month is displayed on date-picker (if this.state.focusedDateKey is undefined).

Callback is called when wrapper is blurred, it will reset isFocused, focusedDateKey.

Callback is called when wrapper receives mouseDown. Conditionally set isActive.

Callback is called when wrapper receives mouseUp. Reset isActive.

Callback is called when touch starts on wrapper. Conditionally sets isActive.

Callback is called when touch ends on wrapper. Reset isActive.

On keyDown on wrapper if date-picker is not disabled and some day is focused:

1. arrow keys will navigate calendar
2. enter key will set selectedDate of component
3. space key will set / unset selectedDate
4. props.onKeyDown will be called

Function will handle pageUp key down event.

Function will handle pageDown key down event.

Callback is called when some day receives mouseDown. It will conditionally set this.state.activeDay, this.state.focusedDateKey and call props.onDayMouseDown.

Note: mouseEvent.button is supported by all browsers are are targeting: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button

Callback is called when some day receives mouseUp. It will reset this.state.activeDay and call props.onDayMouseUp.

Callback is called when some day receives MouseEnter. It will conditionally set this.state.focusedDateKey.

Callback is called when some day receives MouseLeave. It will reset this.state.focusedDateKey.

Callback is called when some day receives touchStart. It will conditionally set this.state.activeDay and call props.onDayTouchStart.

Callback is called when some day receives touchEnd. It will reset this.state.activeDay and call props.onDayTouchEnd.

Depending on whether component is controlled or uncontrolled the function will update this.state.selectedDate. It will also call props.onUpdate.

Function will select / deselect date passed to it, it is used in case of ‘Space’ keyDown on a day.

The function is mainly used when some day is focused and Arrow keys are pressed to navigate to some other day. days is the number of days by which focused should be moved ahead or behind.

The function will decrease current month in state. It will also call props.onMonthUpdate.

The function will increase current month in state. It will also call props.onMonthUpdate.

Function will return jsx for rendering the nav bar for calendar. Depending on following rules it will apply styles to prevMonthNav and nextMonthNav:

1. If disabled hide navs
2. If active apply activeStyles

Function will return jsx for rendering the week header for calendar. Disabled styles will be applied for disabled date-picker. Day headers will be rendered using locale information.

Function will return jsx for rendering the a day. It will apply various styles in sequence as below (styles will be additive):

1. If component is readOnly apply readOnly styles
2. If component is disabled apply disabled styles
   • If component is disabled and hovered apply disableHover styles
3. If day is weekend apply weekendStyle
4. If its day in current month and component is not disabled or readOnly:
   • If its current day apply todayStyle
   • If this is selected day apply selectedDayStyle
   • If component is hovered apply hover styles
   • If component is hovered and active apply hoveredStyles + activeStyles
   • If component is hovered and not active but focused and preventFocusStyleForTouchAndClick apply focus styles
5. If current day represents other months day in calendar apply otherMonthDayStyle

Function will render:

• main calendar component
• call methods to render navBar and week header
• get array of weeks in a month and for each day in the week call method to render day

It will apply styles sequentially according to Wrapper according to following rules:

1. If component is readOnly apply readOnlyStyle
2. If component is disabled apply disabledStyle
   • If disabled component is hovered apply disabledHoverStyle
3. If component is not disabled:
   • If component is hovered apply hover style
   • If component is hovered and active apply hover + active styles
   • If component is hovered and focused but not active and preventFocusStyleForTouchAndClick is true apply focusStyles