Default values.

Author: wehriam

README.md

@@ -84,6 +84,10 @@ DatePicker component. Renders as a [React-Bootstrap InputGroup](https://react-bo
     * **Optional**
     * **Type:** `string`
     * **Example:** `"2016-05-19T12:00:00.000Z"`
+  * `defaultValue` - ISO date string representing the default value. Cannot be set with 'value'.
+    * **Optional**
+    * **Type:** `string`
+    * **Example:** `"2016-05-19T12:00:00.000Z"`
   * `autoFocus` - Whether or not component starts with focus.
     * **Optional**
     * **Type:** `bool`

lib/index.js

@@ -94,7 +94,7 @@ var Calendar = _react2.default.createClass({
     var year = this.props.displayDate.getFullYear();
     var month = this.props.displayDate.getMonth();
     var firstDay = new Date(year, month, 1);
-    var startingDay = this.props.weekStartsOnMonday ? firstDay.getDay() - 1 : firstDay.getDay();
+    var startingDay = this.props.weekStartsOnMonday ? firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1 : firstDay.getDay();
     var monthLength = daysInMonth[month];
     if (month == 1) {
       if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {

package.json

@@ -11,7 +11,7 @@
     "picker"
   ],
   "main": "lib/index.js",
-  "version": "3.8.0",
+  "version": "3.8.1",
   "description": "React-Bootstrap based date picker.",
   "directories": {
     "test": "test"
@@ -41,6 +41,7 @@
     "karma-coverage": "*",
     "karma-coveralls": "*",
     "karma-firefox-launcher": "*",
+    "karma-safari-launcher": "*",
     "karma-mocha": "*",
     "karma-sourcemap-loader": "*",
     "karma-webpack": "*",

src/index.jsx

@@ -116,6 +116,7 @@ const Calendar = React.createClass({
 export default React.createClass({
   displayName: "DatePicker",
   propTypes: {
+    defaultValue: React.PropTypes.string,
     value: React.PropTypes.string,
     cellPadding: React.PropTypes.string,
     placeholder: React.PropTypes.string,
@@ -141,7 +142,6 @@ export default React.createClass({
     ]),
     calendarPlacement: React.PropTypes.string,
     dateFormat: React.PropTypes.string  // 'MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD', 'DD-MM-YYYY'
-
   },
   getDefaultProps() {
     const language = typeof window !== "undefined" && window.navigator ? (window.navigator.userLanguage || window.navigator.language || '').toLowerCase() : '';
@@ -163,7 +163,10 @@ export default React.createClass({
     }
   },
   getInitialState() {
-    var state = this.makeDateValues(this.props.value);
+    if(this.props.value && this.props.defaultValue) {
+      throw new Error("Conflicting DatePicker properties 'value' and 'defaultValue'");
+    }
+    var state = this.makeDateValues(this.props.value || this.props.defaultValue);
     if(this.props.weekStartsOnMonday) {
       state.dayLabels = this.props.dayLabels.slice(1).concat(this.props.dayLabels.slice(0,1))
     } else {

test/core.test.jsx

@@ -650,6 +650,7 @@ describe("Date Picker", function() {
         checkMonthAndYear(date.toISOString());
       }
     }
+    ReactDOM.unmountComponentAtNode(container);
   }));
   it("should display the correct day of the week in the calendar when starting on Monday.", co.wrap(function *(){
     const id = UUID.v4();
@@ -697,6 +698,52 @@ describe("Date Picker", function() {
         checkMonthAndYear(date.toISOString());
       }
     }
+    ReactDOM.unmountComponentAtNode(container);
+  }));
+  it("should set a default value", co.wrap(function *(){
+    const id = UUID.v4();
+    const defaultValue = new Date().toISOString();
+    let value = null;
+    let formattedValue = null;
+    const App = React.createClass({
+      handleChange: function(newValue, newFormattedValue){
+        value = newValue;
+        formattedValue = newFormattedValue;
+      },
+      render: function(){
+        return <div>
+          <DatePicker defaultValue={defaultValue} id={id} onChange={this.handleChange} />
+        </div>;
+      }
+    });
+    yield new Promise(function(resolve, reject){
+      ReactDOM.render(<App />, container, resolve);
+    });
+    const hiddenInputElement = document.getElementById(id);
+    assertIsoStringsHaveSameDate(hiddenInputElement.value, defaultValue);
+    assert.equal(value, null);
+    const inputElement = document.querySelector("input.form-control");
+    TestUtils.Simulate.change(inputElement);
+    assert.notEqual(value, null);
+    ReactDOM.unmountComponentAtNode(container);
+  }));
+  it("should error if value and default value are both set.", co.wrap(function *(){
+    const value = new Date().toISOString();
+    const App = React.createClass({
+      render: function(){
+        return <div>
+          <DatePicker value={value} defaultValue={value} />
+        </div>;
+      }
+    });
+    try {
+      yield new Promise(function(resolve, reject){
+        ReactDOM.render(<App />, container, resolve);
+      });      
+      throw new Error("Value and default value should not be set simultaneously");
+    } catch (e) {
+      assert(e.message.indexOf("Conflicting") !== -1)
+    }
+    ReactDOM.unmountComponentAtNode(container);
   }));
-
 });

test/karma.conf.js

@@ -9,6 +9,7 @@ module.exports = function (karma) {
     plugins: [
       'karma-firefox-launcher',
       'karma-chrome-launcher',
+      'karma-safari-launcher',
       'karma-mocha',
       'karma-coveralls',
       'karma-coverage',
@@ -127,7 +128,7 @@ module.exports = function (karma) {
       return key.indexOf("bs_") !== -1;
     });
   } else {
-    options.browsers = ['Chrome', 'Firefox'];
+    options.browsers = ['Chrome', 'Firefox', 'Safari'];
   }
   if(process.env.COVERALLS_REPO_TOKEN) {
     options.reporters.push('coveralls');