Update week starting Monday code.

Author: wehriam

example/app.jsx

@@ -78,7 +78,7 @@ const App = React.createClass({
         <Col sm={6}>
           <FormGroup>
             <ControlLabel>Week Starts on Monday</ControlLabel>
-            <DatePicker onChange={this.handleChange} weekStartsOnMonday placeholder="Placeholder" value={this.state.date} onFocus={() => {this.setState({focused: true})}} onBlur={() => {this.setState({focused: false})}} />
+            <DatePicker onChange={this.handleChange} weekStartsOnMonday placeholder="Placeholder" value={this.state.date} />
             <HelpBlock>Help</HelpBlock>
           </FormGroup>
         </Col>

lib/index.js

@@ -245,15 +245,18 @@ exports.default = _react2.default.createClass({
       this.props.onChange(null);
     }
   },
-  handleHide: function handleHide(e) {
+  handleHide: function handleHide() {
     if (this.state.inputFocused) {
       return;
     }
     this.setState({
       focused: false
     });
     if (this.props.onBlur) {
-      this.props.onBlur(e);
+      var event = document.createEvent('CustomEvent');
+      event.initEvent("Change Date", true, false);
+      _reactDom2.default.findDOMNode(this.refs.hiddenInput).dispatchEvent(event);
+      this.props.onBlur(event);
     }
   },
   handleKeyDown: function handleKeyDown(e) {
@@ -262,7 +265,10 @@ exports.default = _react2.default.createClass({
         focused: false
       });
       if (this.props.onBlur) {
-        this.props.onBlur(e);
+        var event = document.createEvent('CustomEvent');
+        event.initEvent("Change Date", true, false);
+        _reactDom2.default.findDOMNode(this.refs.hiddenInput).dispatchEvent(event);
+        this.props.onBlur(event);
       }
     }
   },
@@ -275,7 +281,10 @@ exports.default = _react2.default.createClass({
       focused: true
     });
     if (this.props.onFocus) {
-      this.props.onFocus(e);
+      var event = document.createEvent('CustomEvent');
+      event.initEvent("Change Date", true, false);
+      _reactDom2.default.findDOMNode(this.refs.hiddenInput).dispatchEvent(event);
+      this.props.onFocus(event);
     }
   },
   handleBlur: function handleBlur(e) {
@@ -400,6 +409,7 @@ exports.default = _react2.default.createClass({
     if (this.props.onBlur) {
       var event = document.createEvent('CustomEvent');
       event.initEvent("Change Date", true, false);
+      _reactDom2.default.findDOMNode(this.refs.hiddenInput).dispatchEvent(event);
       this.props.onBlur(event);
     }
     if (this.props.onChange) {
@@ -439,7 +449,7 @@ exports.default = _react2.default.createClass({
         )
       ),
       _react2.default.createElement('div', { ref: 'overlayContainer' }),
-      _react2.default.createElement('input', { type: 'hidden', id: this.props.id, name: this.props.name, value: this.state.value || '' }),
+      _react2.default.createElement('input', { ref: 'hiddenInput', type: 'hidden', id: this.props.id, name: this.props.name, value: this.state.value || '' }),
       _react2.default.createElement(_FormControl2.default, {
         onKeyDown: this.handleKeyDown,
         value: this.state.inputValue || '',

src/index.jsx

@@ -70,7 +70,7 @@ const Calendar = React.createClass({
     const year = this.props.displayDate.getFullYear();
     const month = this.props.displayDate.getMonth();
     const firstDay = new Date(year, month, 1);
-    const startingDay = this.props.weekStartsOnMonday ? (firstDay.getDay() + 1) : firstDay.getDay();
+    const startingDay = this.props.weekStartsOnMonday ? (firstDay.getDay() - 1) : firstDay.getDay();
     let monthLength = daysInMonth[month];
     if (month == 1) {
       if((year % 4 == 0 && year % 100 != 0) || year % 400 == 0){
@@ -142,10 +142,9 @@ export default React.createClass({
   getDefaultProps() {
     const language = typeof window !== "undefined" && window.navigator ? (window.navigator.userLanguage || window.navigator.language || '').toLowerCase() : '';
     const dateFormat = !language || language === "en-us" ? 'MM/DD/YYYY' : 'DD/MM/YYYY';
-    const dayLabels = this.props.weekStartsOnMonday ? ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
     return {
       cellPadding: "5px",
-      dayLabels,
+      dayLabels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
       monthLabels: ['January', 'February', 'March', 'April',
                     'May', 'June', 'July', 'August', 'September',
                     'October', 'November', 'December'],
@@ -158,6 +157,11 @@ export default React.createClass({
   },
   getInitialState() {
     var state = this.makeDateValues(this.props.value);
+    if(this.props.weekStartsOnMonday) {
+      state.dayLabels = this.props.dayLabels.slice(1).concat(this.props.dayLabels.slice(0,1))
+    } else {
+      state.dayLabels = this.props.dayLabels;
+    }
     state.focused = false;
     state.inputFocused = false;
     state.placeholder = this.props.placeholder || this.props.dateFormat;
@@ -382,7 +386,7 @@ export default React.createClass({
     return <InputGroup ref="inputGroup" bsClass={this.props.bsClass} bsSize={this.props.bsSize} id={this.props.id ? this.props.id + "_group" : null}>
       <Overlay rootClose={true} onHide={this.handleHide} show={this.state.focused} container={() => ReactDOM.findDOMNode(this.refs.overlayContainer)} target={() => ReactDOM.findDOMNode(this.refs.input)} placement={this.props.calendarPlacement} delayHide={200}>
         <Popover id="calendar" title={calendarHeader}>
-          <Calendar cellPadding={this.props.cellPadding} selectedDate={this.state.selectedDate} displayDate={this.state.displayDate} onChange={this.onChangeDate} dayLabels={this.props.dayLabels} weekStartsOnMonday={this.props.weekStartsOnMonday} />
+          <Calendar cellPadding={this.props.cellPadding} selectedDate={this.state.selectedDate} displayDate={this.state.displayDate} onChange={this.onChangeDate} dayLabels={this.state.dayLabels} weekStartsOnMonday={this.props.weekStartsOnMonday} />
         </Popover>
       </Overlay>
       <div ref="overlayContainer" />

test/core.test.jsx

@@ -401,6 +401,8 @@ describe("Date Picker", function() {
     yield new Promise(function(resolve, reject){
       ReactDOM.render(<App />, container, resolve);
     });
+    const inputElement = document.querySelector("input.form-control");
+    TestUtils.Simulate.focus(inputElement);
     assert.equal(document.querySelector("table thead tr:first-child td small").innerHTML, "Mon");
     ReactDOM.unmountComponentAtNode(container);
   }));