Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork1.7k
An easily internationalizable, mobile-friendly datepicker library for the web
License
react-dates/react-dates
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
An easily internationalizable, accessible, mobile-friendly datepicker library for the web.
For examples of the datepicker in action, go toreact-dates.github.io.
OR
To run that demo on your own computer:
- Clone this repository
npm installnpm run storybook- Visithttp://localhost:6006/
Ensure packages are installed with correct version numbers by running (from your command line):
(export PKG=react-dates; npm info"$PKG" peerDependencies --json|command sed's/[\{\},]//g ; s/: /@/g; s/ *//g'| xargs npm install --save"$PKG")
Which produces and runs a command like:
npm install --save react-dates moment@>=#.## react@>=#.## react-dom@>=#.##
If you are running Windows, that command will not work, but if you are running npm 5 or higher, you can run
npx install-peerdeps react-dateson any platform
import'react-dates/initialize';
As of v13.0.0 ofreact-dates, this project relies onreact-with-styles. If you want to continue using CSS stylesheets and classes, there is a little bit of extra set-up required to get things going. As such, you need to importreact-dates/initialize to set up class names on our components. This import should go at the top of your application as you won't be able to import anyreact-dates components without it.
Note: This component assumesbox-sizing: border-box is set globally in your page's CSS.
import{DateRangePicker,SingleDatePicker,DayPickerRangeController}from'react-dates';
Using Webpack with CSS loader, add the following import to your app:
import'react-dates/lib/css/_datepicker.css';
Create a CSS file with the contents ofrequire.resolve('react-dates/lib/css/_datepicker.css') and include it in your html<head> section.
To see this in action, you can check outhttps://github.com/majapw/react-dates-demo which addsreact-dates on top of a simplecreate-react-app setup.
By defaultreact-dates will usePureComponent conditionally if it is available. However, it is possible to override this setting and useComponent andshouldComponentUpdate instead. It is also possible to override the logic inbuild/util/baseClass if you know that you are using a React version withPureComponent.
importReactfrom'react';exportdefaultReact.PureComponent;exportconstpureComponentAvailable=true;
Right now, the easiest way to tweakreact-dates to your heart's content is to create another stylesheet to override the default react-dates styles. For example, you could create a file namedreact_dates_overrides.css with the following contents (Make sure when you import said file to yourapp.js, you import it after thereact-dates styles):
// NOTE: the order of these styles DO matter// Will edit everything selected including everything between a range of dates.CalendarDay__selected_span {background:#82e0aa; //backgroundcolor: white; //textborder:1px solid $light-red; //default styles include a border}// Will edit selected date or the endpoints of a range of dates.CalendarDay__selected {background: $dark-red; color: white;}// Will edit when hovered over. _span style also has this property.CalendarDay__selected:hover {background: orange;color: white;}// Will edit when the second date (end date) in a range of dates// is not yet selected. Edits the dates between your mouse and said date.CalendarDay__hovered_span:hover,.CalendarDay__hovered_span {background: brown;}
This would override the background and text colors applied to highlighted calendar days. You can use this method with the default set-up to override any aspect of the calendar to have it better fit to your particular needs. If there are any styles that you need that aren't listed here, you can always check the source css of each element.
We provide a handful of components for your use. If you supply essential props to each component, you'll get a full featured interactive date picker. With additional optional props, you can customize the look and feel of the inputs, calendar, etc. You can see what each of the props do in thelive demo or explorehow to properly wrap the pickers in theexamples folder.
TheDateRangePicker is a fully controlled component that allows users to select a date range. You can control the selecteddates using thestartDate,endDate, andonDatesChange props as shown below. TheDateRangePicker also manages internalstate for partial dates entered by typing (althoughonDatesChange will not trigger until a date has been enteredcompletely in that case). Similarly, you can control which input is focused as well as calendar visibility (the calendar isonly visible iffocusedInput is defined) with thefocusedInput andonFocusChange props as shown below.
Here is the minimumREQUIRED setup you need to get theDateRangePicker working:
<DateRangePickerstartDate={this.state.startDate}// momentPropTypes.momentObj or null,startDateId="your_unique_start_date_id"// PropTypes.string.isRequired,endDate={this.state.endDate}// momentPropTypes.momentObj or null,endDateId="your_unique_end_date_id"// PropTypes.string.isRequired,onDatesChange={({ startDate, endDate})=>this.setState({ startDate, endDate})}// PropTypes.func.isRequired,focusedInput={this.state.focusedInput}// PropTypes.oneOf([START_DATE, END_DATE]) or null,onFocusChange={focusedInput=>this.setState({ focusedInput})}// PropTypes.func.isRequired,/>
The following is a list of otherOPTIONAL props you may provide to theDateRangePicker to customize appearance and behavior to your heart's desire. All constants (indicated byALL_CAPS) are provided as named exports inreact-dates/constants. Please explore thestorybook for more information on what each of these props do.
// input related propsstartDatePlaceholderText:PropTypes.string,endDatePlaceholderText:PropTypes.string,startDateAriaLabel:PropTypes.string,endDateAriaLabel:PropTypes.string,startDateTitleText:PropTypes.string,endDateTitleText:PropTypes.string,disabled:PropTypes.oneOfType([PropTypes.bool,PropTypes.oneOf([START_DATE,END_DATE])]),required:PropTypes.bool,readOnly:PropTypes.bool,screenReaderInputMessage:PropTypes.string,showClearDates:PropTypes.bool,showDefaultInputIcon:PropTypes.bool,customInputIcon:PropTypes.node,customArrowIcon:PropTypes.node,customCloseIcon:PropTypes.node,inputIconPosition:PropTypes.oneOf([ICON_BEFORE_POSITION,ICON_AFTER_POSITION]),noBorder:PropTypes.bool,block:PropTypes.bool,small:PropTypes.bool,regular:PropTypes.bool,autoComplete:PropTypes.string,// calendar presentation and interaction related propsrenderMonthText:mutuallyExclusiveProps(PropTypes.func,'renderMonthText','renderMonthElement'),// (month) => PropTypes.string,orientation:PropTypes.oneOf([HORIZONTAL_ORIENTATION,VERTICAL_ORIENTATION]),anchorDirection:PropTypes.oneOf([ANCHOR_LEFT,ANCHOR_RIGHT]),openDirection:PropTypes.oneOf([OPEN_DOWN,OPEN_UP]),horizontalMargin:PropTypes.number,withPortal:PropTypes.bool,withFullScreenPortal:PropTypes.bool,appendToBody:PropTypes.bool,disableScroll:PropTypes.bool,daySize:nonNegativeInteger,isRTL:PropTypes.bool,initialVisibleMonth:PropTypes.func,firstDayOfWeek:PropTypes.oneOf([0,1,2,3,4,5,6]),numberOfMonths:PropTypes.number,keepOpenOnDateSelect:PropTypes.bool,reopenPickerOnClearDates:PropTypes.bool,renderCalendarInfo:PropTypes.func,renderMonthElement:mutuallyExclusiveProps(PropTypes.func,'renderMonthText','renderMonthElement'),PropTypes.func,// ({ month, onMonthSelect, onYearSelect, isVisible }) => PropTypes.node,hideKeyboardShortcutsPanel:PropTypes.bool,verticalSpacing:PropTypes.number,// navigation related propsnavPrev:PropTypes.node,navNext:PropTypes.node,onPrevMonthClick:PropTypes.func,onNextMonthClick:PropTypes.func,onClose:PropTypes.func,transitionDuration:nonNegativeInteger,// milliseconds// day presentation and interaction related propsrenderCalendarDay:PropTypes.func,renderDayContents:PropTypes.func,minimumNights:PropTypes.number,minDate:momentPropTypes.momentObj,maxDate:momentPropTypes.momentObj,enableOutsideDays:PropTypes.bool,isDayBlocked:PropTypes.func,isOutsideRange:PropTypes.func,isDayHighlighted:PropTypes.func,// internationalization propsdisplayFormat:PropTypes.oneOfType([PropTypes.string,PropTypes.func]),monthFormat:PropTypes.string,weekDayFormat:PropTypes.string,phrases:PropTypes.shape(getPhrasePropTypes(DateRangePickerPhrases)),dayAriaLabelFormat:PropTypes.string,
TheSingleDatePicker is a fully controlled component that allows users to select a single date. You can control the selecteddate using thedate andonDateChange props as shown below. TheSingleDatePicker also manages internalstate for partial dates entered by typing (althoughonDateChange will not trigger until a date has been enteredcompletely in that case). Similarly, you can control whether or not the input is focused (calendar visibility is alsocontrolled with the same props) with thefocused andonFocusChange props as shown below.
Here is the minimumREQUIRED setup you need to get theSingleDatePicker working:
<SingleDatePickerdate={this.state.date}// momentPropTypes.momentObj or nullonDateChange={date=>this.setState({ date})}// PropTypes.func.isRequiredfocused={this.state.focused}// PropTypes.boolonFocusChange={({ focused})=>this.setState({ focused})}// PropTypes.func.isRequiredid="your_unique_id"// PropTypes.string.isRequired,/>
The following is a list of otherOPTIONAL props you may provide to theSingleDatePicker to customize appearance and behavior to your heart's desire. All constants (indicated byALL_CAPS) are provided as named exports inreact-dates/constants. Please explore thestorybook for more information on what each of these props do.
// input related propsplaceholder:PropTypes.string,ariaLabel:PropTypes.string,titleText:PropTypes.string,disabled:PropTypes.bool,required:PropTypes.bool,readOnly:PropTypes.bool,screenReaderInputMessage:PropTypes.string,showClearDate:PropTypes.bool,customCloseIcon:PropTypes.node,showDefaultInputIcon:PropTypes.bool,customInputIcon:PropTypes.node,inputIconPosition:PropTypes.oneOf([ICON_BEFORE_POSITION,ICON_AFTER_POSITION]),noBorder:PropTypes.bool,block:PropTypes.bool,small:PropTypes.bool,regular:PropTypes.bool,autoComplete:PropTypes.string,// calendar presentation and interaction related propsrenderMonthText:mutuallyExclusiveProps(PropTypes.func,'renderMonthText','renderMonthElement'),// (month) => PropTypes.string,orientation:PropTypes.oneOf([HORIZONTAL_ORIENTATION,VERTICAL_ORIENTATION]),anchorDirection:PropTypes.oneOf([ANCHOR_LEFT,ANCHOR_RIGHT]),openDirection:PropTypes.oneOf([OPEN_DOWN,OPEN_UP]),horizontalMargin:PropTypes.number,withPortal:PropTypes.bool,withFullScreenPortal:PropTypes.bool,appendToBody:PropTypes.bool,disableScroll:PropTypes.bool,initialVisibleMonth:PropTypes.func,firstDayOfWeek:PropTypes.oneOf([0,1,2,3,4,5,6]),numberOfMonths:PropTypes.number,keepOpenOnDateSelect:PropTypes.bool,reopenPickerOnClearDate:PropTypes.bool,renderCalendarInfo:PropTypes.func,renderMonthElement:mutuallyExclusiveProps(PropTypes.func,'renderMonthText','renderMonthElement'),// ({ month, onMonthSelect, onYearSelect, isVisible }) => PropTypes.node,hideKeyboardShortcutsPanel:PropTypes.bool,daySize:nonNegativeInteger,isRTL:PropTypes.bool,verticalSpacing:PropTypes.number,// navigation related propsnavPrev:PropTypes.node,navNext:PropTypes.node,onPrevMonthClick:PropTypes.func,onNextMonthClick:PropTypes.func,onClose:PropTypes.func,transitionDuration:nonNegativeInteger,// milliseconds// day presentation and interaction related propsrenderCalendarDay:PropTypes.func,renderDayContents:PropTypes.func,enableOutsideDays:PropTypes.bool,isDayBlocked:PropTypes.func,isOutsideRange:PropTypes.func,isDayHighlighted:PropTypes.func,// internationalization propsdisplayFormat:PropTypes.oneOfType([PropTypes.string,PropTypes.func]),monthFormat:PropTypes.string,weekDayFormat:PropTypes.string,phrases:PropTypes.shape(getPhrasePropTypes(SingleDatePickerPhrases)),dayAriaLabelFormat:PropTypes.string,
TheDayPickerRangeController is a calendar-only version of theDateRangePicker. There are no inputs (which also meansthat currently, it is not keyboard accessible) and the calendar is always visible, but you can select a date range much in the same way you would with theDateRangePicker. You can control the selecteddates using thestartDate,endDate, andonDatesChange props as shown below. Similarly, you can control which input is focused with thefocusedInput andonFocusChange props as shown below. The user will only be able to select a date iffocusedInput is provided.
Here is the minimumREQUIRED setup you need to get theDayPickerRangeController working:
<DayPickerRangeControllerstartDate={this.state.startDate}// momentPropTypes.momentObj or null,endDate={this.state.endDate}// momentPropTypes.momentObj or null,onDatesChange={({ startDate, endDate})=>this.setState({ startDate, endDate})}// PropTypes.func.isRequired,focusedInput={this.state.focusedInput}// PropTypes.oneOf([START_DATE, END_DATE]) or null,onFocusChange={focusedInput=>this.setState({ focusedInput})}// PropTypes.func.isRequired,initialVisibleMonth={()=>moment().add(2,"M")}// PropTypes.func or null,/>
The following is a list of otherOPTIONAL props you may provide to theDayPickerRangeController to customize appearance and behavior to your heart's desire. Again, please explore thestorybook for more information on what each of these props do.
// calendar presentation and interaction related propsenableOutsideDays:PropTypes.bool,numberOfMonths:PropTypes.number,orientation:ScrollableOrientationShape,withPortal:PropTypes.bool,initialVisibleMonth:PropTypes.func,renderCalendarInfo:PropTypes.func,renderMonthElement:mutuallyExclusiveProps(PropTypes.func,'renderMonthText','renderMonthElement'),// ({ month, onMonthSelect, onYearSelect, isVisible }) => PropTypes.node,onOutsideClick:PropTypes.func,keepOpenOnDateSelect:PropTypes.bool,noBorder:PropTypes.bool,// navigation related propsnavPrev:PropTypes.node,navNext:PropTypes.node,onPrevMonthClick:PropTypes.func,onNextMonthClick:PropTypes.func,transitionDuration:nonNegativeInteger,// milliseconds// day presentation and interaction related propsrenderCalendarDay:PropTypes.func,renderDayContents:PropTypes.func,minimumNights:PropTypes.number,isOutsideRange:PropTypes.func,isDayBlocked:PropTypes.func,isDayHighlighted:PropTypes.func,// internationalization propsmonthFormat:PropTypes.string,weekDayFormat:PropTypes.string,phrases:PropTypes.shape(getPhrasePropTypes(DayPickerPhrases)),dayAriaLabelFormat:PropTypes.string,/>
Moment.js is a peer dependency ofreact-dates. The latter then uses a single instance ofmoment which is imported in one’s project. Loading a locale is done by callingmoment.locale(..) in the component wheremoment is imported, with thelocale key of choice. For instance:
moment.locale('pl');// Polish
However, this only solves date localization. For complete internationalization of the components,react-dates defines a certain amount ofuser interface strings in English which can be changed through thephrases prop (explore thestorybook for examples). For accessibility and usability concerns,all these UI elements should be translated.
react-dates no longer relies strictly on CSS, but rather relies onreact-with-styles as an abstraction layer between how styles are applied and how they are written. The instructions above will get the project working out of the box, but there's a lot more customization that can be done.
Thereact-dates/initialize script actually relies onreact-with-styles-interface-css under the hood. If you are interested in a different solution for styling in your project, you can do your own initialization of a anotherinterface. At Airbnb, for instance, we rely onAphrodite under the hood and therefore use the Aphrodite interface forreact-with-styles. If you want to do the same, you would use the following pattern:
importThemedStyleSheetfrom'react-with-styles/lib/ThemedStyleSheet';importaphroditeInterfacefrom'react-with-styles-interface-aphrodite';importDefaultThemefrom'react-dates/lib/theme/DefaultTheme';ThemedStyleSheet.registerInterface(aphroditeInterface);ThemedStyleSheet.registerTheme(DefaultTheme);
The above code has to be run before anyreact-dates component is imported. Otherwise, you will get an error. Also note that if you register any custom interface manually, youmust also manually register a theme.
react-dates also now supports a different way to theme. You can see the default theme values inthis file and you would override them in the following manner:
importThemedStyleSheetfrom'react-with-styles/lib/ThemedStyleSheet';importaphroditeInterfacefrom'react-with-styles-interface-aphrodite';importDefaultThemefrom'react-dates/lib/theme/DefaultTheme';ThemedStyleSheet.registerInterface(aphroditeInterface);ThemedStyleSheet.registerTheme({reactDates:{ ...DefaultTheme.reactDates,color:{ ...DefaultTheme.reactDates.color,highlighted:{backgroundColor:'#82E0AA',backgroundColor_active:'#58D68D',backgroundColor_hover:'#58D68D',color:'#186A3B',color_active:'#186A3B',color_hover:'#186A3B',},},},});
The above code would use shades of green instead of shades of yellow for the highlight color onCalendarDay components. Note that youmust register an interface if you manually register a theme. One will not work without the other.
The default interface thatreact-dates ships with is theCSS interface. If you want to use this interface along with the theme registration method, you will need to rebuild the core_datepicker.css file. We do not currently expose a utility method to build this file, but you can follow along with the code inhttps://github.com/react-dates/react-dates/blob/HEAD/scripts/buildCSS.js to build your own custom themed CSS file.
About
An easily internationalizable, mobile-friendly datepicker library for the web
Topics
Resources
License
Security policy
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.