Adding new property todayDate

.gitignore

@@ -28,4 +28,6 @@ node_modules
 
 run-browserstack-tests.sh
 
-bundle.js
+bundle.js
+.github
+package-lock.json

README.md

@@ -198,6 +198,10 @@ DatePicker component. Renders as a [React-Bootstrap InputGroup](https://react-bo
     * **Optional**
     * **Type:** `React.Component`
     * **Example:** `<CustomControl />`
+  * `todayDate` - Change today's date to a past or future date
+    * **Optional**
+    * **Type:** `string`
+    * **Example:** `"MM/DD/YYYY"`, `"YYYY/MM/DD"`, `"MM-DD-YYYY"`, or `"DD MM YYYY"`
 
 * **Methods:**
 

example/app.jsx

@@ -26,6 +26,7 @@ const App = createReactClass({
       minDate: null,
       maxDate: null,
       focused: false,
+      todayDate: new Date('2017', '0', '1').toISOString(),
       invalid: false
     };
   },
@@ -79,7 +80,6 @@ const App = createReactClass({
     }));
   },
   render() {
-    const LabelISOString = new Date().toISOString();
     return <Grid>
       <Row>
         <Col xs={12}>
@@ -227,15 +227,15 @@ const App = createReactClass({
           <FormGroup>
             <ControlLabel>Min</ControlLabel>
             <DatePicker onChange={this.handleMinChange} value={this.state.minDate} />
-            <HelpBlock>{`Configure Example minDate`}</HelpBlock>
+            <HelpBlock>Configure Example minDate</HelpBlock>
             <HelpBlock>{`value: ${this.state.minDate}`}</HelpBlock>
           </FormGroup>
         </Col>
         <Col sm={3}>
           <FormGroup>
             <ControlLabel>Max</ControlLabel>
             <DatePicker onChange={this.handleMaxChange} value={this.state.maxDate} />
-            <HelpBlock>{`Configure Example maxDate`}</HelpBlock>
+            <HelpBlock>Configure Example maxDate</HelpBlock>
             <HelpBlock>{`value: ${this.state.maxDate}`}</HelpBlock>
           </FormGroup>
         </Col>
@@ -356,12 +356,19 @@ const App = createReactClass({
             <DatePicker weekStartsOn={4} />
           </FormGroup>
         </Col>
-        <Col sm={6}>
+        <Col sm={3}>
           <FormGroup>
             <ControlLabel>Control Element</ControlLabel>
             <DatePicker customControl={<CustomControl />} />
           </FormGroup>
         </Col>
+        <Col sm={3}>
+          <FormGroup>
+            <ControlLabel>Today Date</ControlLabel>
+            <DatePicker showTodayButton todayDate={this.state.todayDate} />
+            <HelpBlock>Today's date is set to 01/01/2017</HelpBlock>
+          </FormGroup>
+        </Col>
       </Row>
       <Row>
         <Col xs={12}>
@@ -498,7 +505,10 @@ const App = createReactClass({
 
 const CustomControl = createReactClass({
   displayName: 'CustomControl',
-
+  propTypes: {
+    value: React.PropTypes.string,
+    placeholder: React.PropTypes.string
+  },
   render() {
     const {
       value,

lib/index.js

@@ -125,6 +125,7 @@ var Calendar = (0, _createReactClass2.default)({
     showTodayButton: _propTypes2.default.bool,
     todayButtonLabel: _propTypes2.default.string,
     roundedCorners: _propTypes2.default.bool,
+    todayDate: _propTypes2.default.string,
     showWeeks: _propTypes2.default.bool
   },
 
@@ -135,7 +136,7 @@ var Calendar = (0, _createReactClass2.default)({
     this.props.onChange(newSelectedDate);
   },
   handleClickToday: function handleClickToday() {
-    var newSelectedDate = this.setTimeToNoon(new Date());
+    var newSelectedDate = this.setTimeToNoon(this.props.todayDate ? new Date(this.props.todayDate) : new Date());
     this.props.onChange(newSelectedDate);
   },
   setTimeToNoon: function setTimeToNoon(date) {
@@ -730,6 +731,7 @@ exports.default = (0, _createReactClass2.default)({
             minDate: this.props.minDate,
             maxDate: this.props.maxDate,
             roundedCorners: this.props.roundedCorners,
+            todayDate: this.props.todayDate,
             showWeeks: this.props.showWeeks
           })
         )
@@ -751,4 +753,4 @@ exports.default = (0, _createReactClass2.default)({
     );
   }
 });
-module.exports = exports['default'];
+module.exports = exports['default'];

src/index.jsx

@@ -91,6 +91,7 @@ const Calendar = createReactClass({
     showTodayButton: PropTypes.bool,
     todayButtonLabel: PropTypes.string,
     roundedCorners: PropTypes.bool,
+    todayDate: PropTypes.string,
     showWeeks: PropTypes.bool
   },
 
@@ -102,7 +103,7 @@ const Calendar = createReactClass({
   },
 
   handleClickToday() {
-    const newSelectedDate = this.setTimeToNoon(new Date());
+    const newSelectedDate = this.setTimeToNoon(this.props.todayDate ? new Date(this.props.todayDate) : new Date());
     this.props.onChange(newSelectedDate);
   },
 
@@ -307,6 +308,7 @@ export default createReactClass({
       PropTypes.node
 
     ]),
+    todayDate: React.PropTypes.string,
     onInvalid: PropTypes.func,
     noValidate: PropTypes.bool
   },
@@ -372,7 +374,8 @@ export default createReactClass({
     if (selectedDate) {
       displayDate = new Date(selectedDate);
     } else {
-      const today = new Date(`${(new Date().toISOString().slice(0,10))}T12:00:00.000Z`);
+      const today = this.props.todayDate ? new Date(`${this.props.todayDate.slice(0,10)}T12:00:00.000Z`)
+      : new Date(`${(new Date().toISOString().slice(0,10))}T12:00:00.000Z`);
       if (minDate && Date.parse(minDate) >= Date.parse(today)){
         displayDate = minDate;
       } else if (maxDate && Date.parse(maxDate) <= Date.parse(today)){
@@ -703,6 +706,7 @@ export default createReactClass({
             minDate={this.props.minDate}
             maxDate={this.props.maxDate}
             roundedCorners={this.props.roundedCorners}
+            todayDate={this.props.todayDate}
             showWeeks={this.props.showWeeks}
            />
         </Popover>

test/core.test.jsx

@@ -56,17 +56,19 @@ describe("Date Picker", function() {
   it("should render a date picker with a value.", co.wrap(function *(){
     const id = UUID.v4();
     const value = `${new Date().toISOString().slice(0,10)}T12:00:00.000Z`;
+    console.log(value)
     const App = createReactClass({
       render: function(){
         return <div>
-          <DatePicker id={id} value={value} />
+          <DatePicker id={id} value={value} dateFormat="MM/DD/YYYY" />
         </div>;
       }
     });
     yield new Promise(function(resolve, reject){
       ReactDOM.render(<App />, container, resolve);
     });
     const hiddenInputElement = document.getElementById(id);
+    console.log(hiddenInputElement.value)
     assertIsoStringsHaveSameDate(hiddenInputElement.value, value);
     assert.equal(hiddenInputElement.getAttribute('data-formattedvalue'), `${value.slice(5,7)}/${value.slice(8,10)}/${value.slice(0,4)}`);
     ReactDOM.unmountComponentAtNode(container);
@@ -1101,4 +1103,25 @@ describe("Date Picker", function() {
     assert.notEqual(popover, null);
     ReactDOM.unmountComponentAtNode(container);
   }));
+  it("should allow for a function to determine calendar placement", co.wrap(function *(){
+    const id = UUID.v4();
+    const App = createReactClass({
+      handlePlacement(){
+        return "top";
+      },
+      render: function(){
+        return <div>
+          <DatePicker id={id} calendarPlacement={this.handlePlacement} />
+        </div>;
+      }
+    });
+    yield new Promise(function(resolve, reject){
+      ReactDOM.render(<App />, container, resolve);
+    });
+    const inputElement = document.querySelector("input.form-control");
+    TestUtils.Simulate.focus(inputElement);
+    const popover = document.querySelector(".date-picker-popover.top");
+    assert.notEqual(popover, null);
+    ReactDOM.unmountComponentAtNode(container);
+  }));
 });