Skip to content

Commit 6fd129a

Browse files
DriesHmartijnrusschen
authored andcommitted
Added renderDayContents prop for custom day contents/day formatting (Hacker0x01#1356)
1 parent 626ca16 commit 6fd129a

File tree

9 files changed

+762
-476
lines changed

9 files changed

+762
-476
lines changed

README.md

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -23,18 +23,18 @@ npm install react-datepicker --save
2323
You’ll need to install React, PropTypes, and Moment.js separately since those dependencies aren’t included in the package. Below is a simple example of how to use the Datepicker in a React view. You will also need to require the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does).
2424

2525
```js
26-
import React from 'react';
27-
import DatePicker from 'react-datepicker';
28-
import moment from 'moment';
26+
import React from "react";
27+
import DatePicker from "react-datepicker";
28+
import moment from "moment";
2929

30-
import 'react-datepicker/dist/react-datepicker.css';
30+
import "react-datepicker/dist/react-datepicker.css";
3131

3232
// CSS Modules, react-datepicker-cssmodules.css
3333
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';
3434

3535
class Example extends React.Component {
36-
constructor (props) {
37-
super(props)
36+
constructor(props) {
37+
super(props);
3838
this.state = {
3939
startDate: moment()
4040
};
@@ -48,10 +48,12 @@ class Example extends React.Component {
4848
}
4949

5050
render() {
51-
return <DatePicker
51+
return (
52+
<DatePicker
5253
selected={this.state.startDate}
5354
onChange={this.handleChange}
54-
/>;
55+
/>
56+
);
5557
}
5658
}
5759
```
@@ -67,7 +69,8 @@ The most basic use of the DatePicker can be described with:
6769
You can use `onSelect` event handler which fires each time some calendar date has been selected
6870

6971
```js
70-
<DatePicker selected={this.state.date}
72+
<DatePicker
73+
selected={this.state.date}
7174
onSelect={this.handleSelect} //when day is clicked
7275
onChange={this.handleChange} //only when value has changed
7376
/>
@@ -86,7 +89,8 @@ You can also include a time picker by adding the showTimeSelect prop
8689
selected={this.state.date}
8790
onChange={this.handleChange}
8891
showTimeSelect
89-
dateFormat="LLL" />
92+
dateFormat="LLL"
93+
/>
9094
```
9195

9296
Times will be displayed at 30-minute intervals by default (default configurable via timeInterval prop)
@@ -97,8 +101,8 @@ More examples of how to use the time picker are given on the [main website](http
97101

98102
The date picker relies on [moment.js internationalization](http://momentjs.com/docs/#/i18n/) to localize its display components. By default, the date picker will use the locale globally set in moment, which is English. Locales can be changed in the following ways:
99103

100-
- **Globally** by calling `moment.locale(lang)`
101-
- **Picker-specific** by providing the `locale` prop
104+
* **Globally** by calling `moment.locale(lang)`
105+
* **Picker-specific** by providing the `locale` prop
102106

103107
Locales can be further configured in moment with various [customization options](http://momentjs.com/docs/#/customization/).
104108

@@ -111,40 +115,42 @@ _As of version 0.23, the `weekdays` and `weekStart` DatePicker props have been r
111115
We're always trying to stay compatible with the latest version of React. We can't support all older versions of React.
112116

113117
Latest compatible versions:
114-
- React 15.5 or newer: All above React-datepicker v.0.40.0
115-
- React 15.4.1: needs React-datepicker v0.40.0, newer won't work (due to react-onclickoutside dependencies)
116-
- React 0.14 or newer: All above React-datepicker v0.13.0
117-
- React 0.13: React-datepicker v0.13.0
118-
- pre React 0.13: React-datepicker v0.6.2
118+
119+
* React 15.5 or newer: All above React-datepicker v.0.40.0
120+
* React 15.4.1: needs React-datepicker v0.40.0, newer won't work (due to react-onclickoutside dependencies)
121+
* React 0.14 or newer: All above React-datepicker v0.13.0
122+
* React 0.13: React-datepicker v0.13.0
123+
* pre React 0.13: React-datepicker v0.6.2
119124

120125
### Browser Support
121126

122127
The date picker is compatible with the latest versions of Chrome, Firefox, and IE10+.
123128

124-
Unfortunately, it is difficult to support legacy browsers while maintaining our ability to develop new features in the future. For IE9 support, it is known that the [classlist polyfill](https://www.npmjs.com/package/classlist-polyfill) is needed, but this may change or break at any point in the future.
129+
Unfortunately, it is difficult to support legacy browsers while maintaining our ability to develop new features in the future. For IE9 support, it is known that the [classlist polyfill](https://www.npmjs.com/package/classlist-polyfill) is needed, but this may change or break at any point in the future.
125130

126131
## Local Development
127132

128133
The `master` branch contains the latest version of the Datepicker component. To start your example app, you can run `yarn start`. This starts a simple webserver on http://localhost:8080.
129134

130-
You can run `yarn test` to execute the test suite and linters. To help you develop the component we’ve set up some tests that cover the basic functionality (can be found in `/tests`). Even though we’re big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when you’re adding new functionality.
135+
You can run `yarn test` to execute the test suite and linters. To help you develop the component we’ve set up some tests that cover the basic functionality (can be found in `/tests`). Even though we’re big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when you’re adding new functionality.
131136

132137
### The examples
138+
133139
The examples are hosted within the docs folder and are ran in the simple app that loads the Datepicker. To extend the examples with a new example, you can simply duplicate one of the existing examples and change the unique properties of your example.
134140

135141
## Accessibility
136142

137143
### Keyboard support
138144

139-
* *Left*: Move to the previous day.
140-
* *Right*: Move to the next day.
141-
* *Up*: Move to the previous week.
142-
* *Down*: Move to the next week.
143-
* *PgUp*: Move to the previous month.
144-
* *PgDn*: Move to the next month.
145-
* *Home*: Move to the previous year.
146-
* *End*: Move to the next year.
147-
* *Enter/Esc/Tab*: close the calendar. (Enter & Esc calls preventDefault)
145+
* _Left_: Move to the previous day.
146+
* _Right_: Move to the next day.
147+
* _Up_: Move to the previous week.
148+
* _Down_: Move to the next week.
149+
* _PgUp_: Move to the previous month.
150+
* _PgDn_: Move to the next month.
151+
* _Home_: Move to the previous year.
152+
* _End_: Move to the next year.
153+
* _Enter/Esc/Tab_: close the calendar. (Enter & Esc calls preventDefault)
148154

149155
## License
150156

docs-site/bundle.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24384,7 +24384,8 @@
2438424384
},
2438524385
/* 416 */
2438624386
/***/ function(module, exports) {
24387-
module.exports = function(hljs) { // TODO support filter tags like :javascript, support inline HTML
24387+
module.exports = function(hljs) {
24388+
// TODO support filter tags like :javascript, support inline HTML
2438824389
return {
2438924390
case_insensitive: true,
2439024391
contains: [
@@ -30324,7 +30325,8 @@
3032430325
},
3032530326
/* 475 */
3032630327
/***/ function(module, exports) {
30327-
module.exports = function(hljs) { // Base deafult colors in PB IDE: background: #FFFFDF; foreground: #000000;
30328+
module.exports = function(hljs) {
30329+
// Base deafult colors in PB IDE: background: #FFFFDF; foreground: #000000;
3032830330
var STRINGS = {
3032930331
// PB IDE color: #0080FF (Azure Radiance)
3033030332
className: "string",
@@ -71454,8 +71456,7 @@
7145471456
});
7145571457

7145671458
for (
71457-
var es6Symbols = // 19.4.2.2, 19.4.2.3, 19.4.2.4, 19.4.2.6, 19.4.2.8, 19.4.2.9, 19.4.2.10, 19.4.2.11, 19.4.2.12, 19.4.2.13, 19.4.2.14
71458-
"hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(
71459+
var es6Symbols = "hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split( // 19.4.2.2, 19.4.2.3, 19.4.2.4, 19.4.2.6, 19.4.2.8, 19.4.2.9, 19.4.2.10, 19.4.2.11, 19.4.2.12, 19.4.2.13, 19.4.2.14
7145971460
","
7146071461
),
7146171462
j = 0;

0 commit comments

Comments
 (0)