Option props not being set properly on render

[codyhatch]

I want to have the week start on Monday, so I'm rendering the daterpicker like so:

                <DateRangePicker onEvent={this.changeValue} startDate={start} endDate={end}
                                 opens="left" ranges={ranges} format="DD/MM/YYYY" locale={{firstDay: 1}}>
                    <div className="button selected-date-range-btn">
                        <i className="fa fa-calendar pull-left" />
                        <span className="pull-left">{label}</span>
                        <i className="fa fa-caret-down pull-right" />
                    </div>
                </DateRangePicker>

In 0.2.6, this works fine. However in 0.2.7 and all later version, it does not, because of the change to setOptionsFromProps(). The constructor for the underlying widget does some smart merging of the options object with defaults; when the constructor finishes this.locale ends up looking like this:

{
   "format":"MM/DD/YYYY",
   "separator":" - ",
   "applyLabel":"Apply",
   "cancelLabel":"Cancel",
   "weekLabel":"W",
   "customRangeLabel":"Custom Range",
   "daysOfWeek":["Mo","Tu","We","Th","Fr","Sa","Su"],
   "monthNames":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
   "firstDay":1
}

Then I click on the element, which calls render(), which in turns calls setOptionsFromProps(), and it stomps all over the locale and turns it into {"firstDay":1}, which in turn causes errors in the underlying plugin because it expects to find keys on the locale object which no longer exist. If I don't try and configure the locale, everything works.

I'm not sure what the answer is here, but this is really not working. Is there another way to set the first day of the week?

[skratchdot]

Thanks for the detailed explanation. I'll try to take a look at this.

[Adeher]

I can confirm something is wrong (v1.0.6) with locale.
If you only change a few elements (like format), the first render is ok, but as soon as you pick a range and want to show the datepicker again, you get an error.

I tried overriding all the local object

const locale = {
  format: "DD/MM/YYYY",
  separator: "à",
  applyLabel: "Appliquer",
  cancelLabel: "Annuler",
  fromLabel: "de",
  toLabel: "à",
  customRangeLabel: "Personnalisé",
  daysOfWeek: ["di", "lu", "ma", "me", "je", "ven", "sa"],
  monthNames: [
    "Janvier",
    "Février",
    "Mars",
    "Avril",
    "Mai",
    "Juin",
    "Juillet",
    "Août",
    "Septembre",
    "Octobre",
    "Novembre",
    "Décembre"
  ],
  firstDay: 1
};

But on the second render (again, after choosing a range), the firstDay isn't working anymore, thus creating a shift with day labels (December 2 becomes a Tuesday instead of a Wednesday).

I hope someone can figure it out

[homax]

HI, I have the same problem, could you fix this issue? It would be great, thanks

[hevamb]

Hello, I have had the same problem also. For anyone else having this issue I found making the change as described here #53 i.e. removing setOptionsFromProps from render seemed to fix it for me.

[MarcAtrapalo]

Hi, great library here, @skratchdot.

I just opened a PR fixing the problem for this issue in the case of locale.daysOfWeek breaking. We didn't find any misbehaviors with the rest of the option props, but this fix should only affect the week days names.

It would be great if you could check it! Thank you.

[skratchdot]

closing this due to inactivity. please re-open if this is still an issue in v6.0.0 or greater