4
4
[ ![ Dependency Status] ( https://david-dm.org/skratchdot/react-bootstrap-daterangepicker.svg )] ( https://david-dm.org/skratchdot/react-bootstrap-daterangepicker )
5
5
[ ![ devDependency Status] ( https://david-dm.org/skratchdot/react-bootstrap-daterangepicker/dev-status.svg )] ( https://david-dm.org/skratchdot/react-bootstrap-daterangepicker#info=devDependencies )
6
6
7
-
8
7
## Description
9
8
10
9
A date/time picker for react (using bootstrap). This is a react wrapper around
11
10
an existing jQuery/bootstrap library (it is not a pure react port):
12
11
13
12
[ bootstrap-daterangepicker] ( https://github.com/dangrossman/bootstrap-daterangepicker )
14
13
15
-
16
14
## Getting Started
17
15
18
- 1 ) Install the module with: ` npm install --save react-bootstrap-daterangepicker `
16
+ 1 . Install the module with: ` npm install --save react-bootstrap-daterangepicker `
19
17
20
- 2 ) Install the needed peer dependencies: ` npm install --save react react-dom jquery create-react-class prop-types `
18
+ 2 . Install the needed peer dependencies: ` npm install --save react react-dom jquery create-react-class prop-types `
21
19
22
- 3 ) Create your module (you need to use something like browserify to build)
20
+ 3 . Create your module (you need to use something like browserify to build)
23
21
24
22
``` javascript
25
23
var React = require (' react' );
26
24
var moment = require (' moment' );
27
25
var DateRangePicker = require (' react-bootstrap-daterangepicker' );
28
26
var someReactComponent = React .createClass ({
29
- render : function () {
30
- return (
31
- < DateRangePicker startDate= {moment (' 1/1/2014' )} endDate= {moment (' 3/1/2014' )}>
32
- < div> Click Me To Open Picker! < / div>
33
- < / DateRangePicker>
34
- );
35
- }
27
+ render : function () {
28
+ return (
29
+ < DateRangePicker
30
+ startDate= {moment (' 1/1/2014' )}
31
+ endDate= {moment (' 3/1/2014' )}
32
+ >
33
+ < div> Click Me To Open Picker! < / div>
34
+ < / DateRangePicker>
35
+ );
36
+ }
36
37
});
37
38
```
38
39
39
- 4 ) Include the daterangepicker CSS in your project somewhere. The CSS file is here: [ daterangepicker.css] ( https://raw.githubusercontent.com/skratchdot/react-bootstrap-daterangepicker/master/css/daterangepicker.css ) (don't hotlink- download and host your own copy)
40
+ 4 . Include the daterangepicker CSS in your project somewhere. The CSS file is here: [ daterangepicker.css] ( https://raw.githubusercontent.com/skratchdot/react-bootstrap-daterangepicker/master/css/daterangepicker.css ) (don't hotlink- download and host your own copy)
40
41
41
42
``` html
42
43
<link rel =" stylesheet" href =" daterangepicker.css" type =" text/css" />
@@ -49,7 +50,7 @@ For in depth documentation, see the original
49
50
50
51
You can pass all the same props as the original plugin:
51
52
52
- - ** < ; input> ; , alwaysShowCalendars, applyClass, autoApply, autoUpdateInput,
53
+ * ** < ; input> ; , alwaysShowCalendars, applyClass, autoApply, autoUpdateInput,
53
54
buttonClasses, cancelClass, dateLimit, drops, endDate, isCustomDate,
54
55
isInvalidDate, linkedCalendars, locale, maxDate, minDate, opens, parentEl,
55
56
ranges, showCustomRangeLabel, showDropdowns, showISOWeekNumbers,
@@ -58,56 +59,51 @@ You can pass all the same props as the original plugin:
58
59
59
60
You can listen to the following 7 events:
60
61
61
- - ** onShow** : thrown when the widget is shown
62
- - ** onHide** : thrown when the widget is hidden
63
- - ** onShowCalendar** : thrown when the calendar is shown
64
- - ** onHideCalendar** : thrown when the calendar is hidden
65
- - ** onApply** : thrown when the apply button is clicked
66
- - ** onCancel** : thrown when the cancel button is clicked
67
- - ** onEvent** : thrown when any of the 4 events above are triggered
62
+ * ** onShow** : thrown when the widget is shown
63
+ * ** onHide** : thrown when the widget is hidden
64
+ * ** onShowCalendar** : thrown when the calendar is shown
65
+ * ** onHideCalendar** : thrown when the calendar is hidden
66
+ * ** onApply** : thrown when the apply button is clicked
67
+ * ** onCancel** : thrown when the cancel button is clicked
68
+ * ** onEvent** : thrown when any of the 4 events above are triggered
68
69
69
70
All 7 of the events above should take a handler that is passed 2 arguments: ** event** and ** picker**
70
71
71
72
#### Example event handler:
72
73
73
74
``` javascript
74
75
var someReactComponent = React .createClass ({
75
- handleEvent : function (event , picker ) {
76
- console .log (picker .startDate );
77
- },
78
- render : function () {
79
- return (
80
- < DateRangePicker onEvent= {this .handleEvent } / >
81
- );
82
- }
76
+ handleEvent : function (event , picker ) {
77
+ console .log (picker .startDate );
78
+ },
79
+ render : function () {
80
+ return < DateRangePicker onEvent= {this .handleEvent } / > ;
81
+ }
83
82
});
84
83
```
85
84
86
-
87
85
## Release Notes
88
86
89
87
Release notes can be found in the
90
88
[ Changelog] ( https://github.com/skratchdot/react-bootstrap-daterangepicker/blob/master/CHANGELOG.md ) .
91
89
92
90
We will try to release a new version of this project with each new
93
91
[ React] ( http://facebook.github.io/react/index.html )
94
- release. We will bump the major version with each React release. If you are using
92
+ release. We will bump the major version with each React release. If you are using
95
93
a specific version of ` react ` or ` react-bootstrap ` , make sure you specify the correct
96
94
version of ` react-bootstrap-daterangepicker ` in your package.json file.
97
95
98
- - React 15: react-bootstrap-daterangepicker v3.x.x
99
- - React 14: react-bootstrap-daterangepicker v1.x.x
100
- - React 13: react-bootstrap-daterangepicker v0.x.x
101
- - React 14/15 Experimental: react-bootstrap-daterangepicker v2.x.x (do not use)
102
-
96
+ * React 15: react-bootstrap-daterangepicker v3.x.x
97
+ * React 14: react-bootstrap-daterangepicker v1.x.x
98
+ * React 13: react-bootstrap-daterangepicker v0.x.x
99
+ * React 14/15 Experimental: react-bootstrap-daterangepicker v2.x.x (do not use)
103
100
104
101
## Links
105
102
106
- - [ Source Code] ( https://github.com/skratchdot/react-bootstrap-daterangepicker )
107
- - [ Changelog] ( https://github.com/skratchdot/react-bootstrap-daterangepicker/blob/master/CHANGELOG.md )
108
- - [ Live Demo] ( http://projects.skratchdot.com/react-bootstrap-daterangepicker/ )
109
- - [ Original Plugin] ( https://github.com/dangrossman/bootstrap-daterangepicker )
110
-
103
+ * [ Source Code] ( https://github.com/skratchdot/react-bootstrap-daterangepicker )
104
+ * [ Changelog] ( https://github.com/skratchdot/react-bootstrap-daterangepicker/blob/master/CHANGELOG.md )
105
+ * [ Live Demo] ( http://projects.skratchdot.com/react-bootstrap-daterangepicker/ )
106
+ * [ Original Plugin] ( https://github.com/dangrossman/bootstrap-daterangepicker )
111
107
112
108
## License
113
109
0 commit comments