Belle’s date picker component

Use in your code Learn more
bit import belle.react-components/components/date-picker

Belle’s date picker component

This implementation follows the recommendations proposed here

In addition to the props listed below, you can also use:

  • Properties for handling various events(focus, mouse events, touch events, change in selectedDate, month or year):tabIndex, onFocus, onBlur, onKeyDown, onMouseDown, onMouseUp, onTouchStart, onTouchEnd, onTouchCancel, onUpdate, onMonthUpdate.
  • … for adding attributes to specific coponents inside date picker:dayProps, navBarProps, prevMonthNavProps, prevMonthNavIconProps, nextMonthNavProps, nextMonthNavIconProps, monthLabelProps, dayLabelProps, weekHeaderProps, weekGridProps.
  • … for adding class to date picker wrapper:className.
  • … for adding styling to various parts of html structure of date picker: style, disabledStyle, readOnlyStyle, hoverStyle, activeStyle, focusStyle, disabledHoverStyle, navBarStyle, prevMonthNavStyle, prevMonthNavIconStyle, hoverPrevMonthNavStyle, activePrevMonthNavStyle, nextMonthNavStyle, nextMonthNavIconStyle, hoverNextMonthNavStyle, activeNextMonthNavStyle, weekHeaderStyle, monthLabelStyle, dayLabelStyle, disabledDayLabelStyle, weekendLabelStyle, dayStyle, disabledDayStyle, readOnlyDayStyle, activeDayStyle, focusDayStyle, disabledFocusDayStyle, todayStyle, selectedDayStyle, otherMonthDayStyle, weekendStyle.

 

More info

See live examples.

For extended info, go to Belle documentation.

 

Standard example

<DatePicker defaultValue={new Date(${TODAY.getFullYear()},  ${TODAY.getMonth()}, 15)} />

 

Internal HTML Structure

This should help developer to understand how the DatePicker is structured in order to use the API

<div style={ style }>
<div>
  <!-- this is navigation bar at the top -->
  <div style={ navBarStyle }>
    <span style={ prevMonthStyle }></span>
    <span style={ monthLabelStyle }></span>
    <span style={ nextMonthStyle }></span>
  </div>
  <!-- this is week header -->
  <div style={ weekHeaderStyle }>
    <span style={ dayLabelStyle }></span>
    <span style={ dayLabelStyle }></span>
    <span style={ dayLabelStyle }></span>
    <span style={ dayLabelStyle }></span>
    <span style={ dayLabelStyle }></span>
    <span style={ dayLabelStyle }></span>
    <span style={ dayLabelStyle }></span>
  </div>
  <!-- following is repeated for each week -->
  <div style={ dayStyle }></div>
  <div style={ dayStyle }></div>
  <div style={ dayStyle }></div>
  <div style={ dayStyle }></div>
  <div style={ dayStyle }></div>
  <div style={ dayStyle }></div>
  <div style={ dayStyle }></div>
</div>
</div>

 

DatePicker with other month days hidden but weekends styled differently

<DatePicker defaultValue={new Date(${TODAY.getFullYear()},  ${TODAY.getMonth()}, 15)}
            showOtherMonthDate={ false } />

 

DatePicker highlighting special day

<DatePicker readOnly
          renderDay={ this.renderDay }
          defaultMonth={ 12 } />

renderDay(day) {
if (day.getDate() === 25 && day.getMonth() === 11) {
  return (
    <div>
      <span style={{color: '#FFDA46'}}>✵</span>
      <span style={{color: 'red'}}>
        { day.getDate() }
      </span>
    </div>
  );
}
return (
  day.getDate()
);
}

 

Localization support in DatePicker

Belle has inbuilt support for following locales: Arabic, French, Hebrew, Dutch, Chinese. Adding support for a new locale is very easy, check Configuration.

<DatePicker defaultValue={new Date(${TODAY.getFullYear()},  ${TODAY.getMonth()}, 15)}
            locale={ this.state.selectedLocale } />

 

Controlled DatePicker component with onMonthUpdate callBack and reset option implemented

<DatePicker onMonthUpdate={ this.onMonthUpdate }
          defaultMonth={ this.state.selectedMonth }
          defaultYear={ this.state.selectedYear }
          valueLink={ this.linkState('selectedDate') } />

<div>
<div>Date: { this.state.selectedDate ?
             this.state.selectedDate.getMonth() + '/' +
             this.state.selectedDate.getDate() + '/' +
             this.state.selectedDate.getFullYear() : '-'}
</div>
<div>Month: {this.state.selectedMonth}</div>
<div>Year: {this.state.selectedYear}</div>
<div><a onClick={ this.resetDate }>Reset Date</a></div>
</div>

onMonthUpdate(month, year) {
this.setState({
  selectedMonth: month,
  selectedYear: year
});
}

resetDate() {
this.setState({
  selectedDate: undefined
});
}

 

Read only DatePicker

<DatePicker defaultValue={new Date(${TODAY.getFullYear()},  ${TODAY.getMonth()}, 15)}
            readOnly/>

Disabled DatePicker

<DatePicker defaultValue={new Date(${TODAY.getFullYear()},  ${TODAY.getMonth()}, 15)}
            disabled />

Properties

NameTypeDescription
defaultValueDate

(optional) Behaves like the defaultValue property of a native form components. The date can be manipulated through the user interface.

valueDate

(optional) Behaves like the value property of a native form components. The date can not be manipulated through the user interface.

valueLinkValueReference

(optional) Behaves like the valueLink property of a native form components. ValueLink allows to enable two-way data binding between a state property and the value in the user interface.

minDate

(optional) Sets the minimum date a user can select.

maxDate

(optional) Sets the maximum date a user can select.

localeString

(optional) Date picker will be rendered according to this locale.

defaultMonth

(optional) When initially rendered the date picker will be display with the provided month.

defaultYearInteger

(optional) When initially rendered the date picker will be display with the provided year.

showOtherMonthDateBoolean

(optional. default: true) This property can be used to show/hide the display of other month dates in date picker. Even if other month dates are displayed in date picker they will be disabled.

renderDayFunction

(optional) This function can be used to distinctly style some day(s).

disabledBoolean

(optional. default: false) When set to true the date picker will be displayed as disabled component. User can do no interaction with this component, it can not even be focused. Disabled date picker is styled differently.

readOnlyBoolean

(optional. default: false) When set to true the date picker will be displayed as read only component. User can focus to read only date picker, change month but will not be able to select some day. Different styling can also be applied to read only date picker.

preventFocusStyleForTouchAndClickBoolean

(optional. default: true) Prevents the focus style being applied to the date picker in case the it becomes focused by a click or touch.

onUpdateFunction

(optional) The function will be called when user selects some day.

onMonthUpdateFunction

(optional) The function will be called when user navigated to different month or year.

todayStylObject

(optional) The property can be used to add to / change the styling of current date.

selectedDayStyleObject

(optional) The property can be used to add to / change the styling of the selected date.

otherMonthDayStyleObject

(optional) The property can be used to add to / change the styling of other month day in date picker.

weekendStyleObject

(optional) The property can be used to add to/change the styling of weekend.

Test Summary

DatePicker should initialise props as expectedTests didn't run
DatePicker should have undefined date value if value is not passed in propsTests didn't run
DatePicker should change date when a day is focused and enter key is pressedTests didn't run
DatePicker should select / deselect date when space key is pressedTests didn't run
DatePicker should not change date when a day is focused and enter key is pressed if component is disabled or readOnlyTests didn't run
DatePicker should change focusedDateKey on mouse down + upTests didn't run
DatePicker should reduce focusedDateKey by 1 when arrowLeft is pressedTests didn't run
DatePicker should increase focusedDateKey by 1 when arrowLeft is pressed for arabic calendarTests didn't run
DatePicker should reduce focusedDateKey by 7 when arrowUp is pressedTests didn't run
DatePicker should increase focusedDateKey by 1 when arrowRight is pressedTests didn't run
DatePicker should reduce focusedDateKey by 1 when arrowRight is pressed for arabic calendarTests didn't run
DatePicker should increase focusedDateKey by 1 when arrowRight is pressedTests didn't run
DatePicker should show days in decreasing order if RTL for locale is trueTests didn't run
DatePicker should change selectedDate when a day receives mouseDown with button 0Tests didn't run
DatePicker should not change selectedDate in state if component uses value propertyTests didn't run
DatePicker should not change selectedDate in state if component uses valueLink propertyTests didn't run
DatePicker should call function removeAllStyles when component will unmountTests didn't run
DatePicker should update state.selectedDate when value is received in propsTests didn't run
DatePicker should update state.selectedDate when valueLink is received in propsTests didn't run
DatePicker should not update state.selectedDate when defaultValue is received in propsTests didn't run
DatePicker should set isFocused to true when wrapper receives focus and to false on blurTests didn't run
DatePicker should not set isFocused to true when wrapper receives focus btu component is disabledTests didn't run
DatePicker should not set isFocused to true when wrapper receives focus but is activeTests didn't run
DatePicker should not set isActive to true when touch starts and reset when touch endsTests didn't run
DatePicker should not focus day on disabled componentTests didn't run
DatePicker should focus readOnly componentTests didn't run
DatePicker should decrease month when prevMonthNav is clickedTests didn't run
DatePicker should increase month when nextMonthNav is clickedTests didn't run
DatePicker should set activeDay when touch starts on a day and reset when touch endsTests didn't run
DatePicker should apply activeDayStyle to day when touchStart but immediately after touchEnd should apply selectedDayStyleTests didn't run
DatePicker should not apply focusDayStyles for mouseUp wrapperTests didn't run
DatePicker should apply focusDayStyles for mouseUp by on dayTests didn't run
DatePicker injecting styles should inject styles for hover, active & foucsTests didn't run