Dublicated startDate

[ozluy]

I implemented following function to set start date but React component renders two times and sets 2 different startDate. It sets both dates come from server and current date.

import React from 'React';
import DateRangePicker from 'react-bootstrap-daterangepicker';
import moment from 'moment';
export function renderSingleDateTime(field) {
    let fieldInputValue = field.input.value;
    let fieldInputFormattedValue = moment(fieldInputValue).format('DD.MM.YYYY');
    return (
        <div className={'col-md-' + field.colNo + ' new__form--element'} >
            <label>{field.label}</label>
            <DateRangePicker
                showDropdowns={true}
                opens="center"
                format="DD.MM.YYYY"
                startDate={fieldInputValue ? moment(fieldInputValue) : moment()} //This part sets double value
                onEvent={(event, picker) => { field.input.onChange(picker.startDate._d.toDateString()); } }
                singleDatePicker={true}>
                <div className="input-group col-md-12">
                    <input type="text" className="form-control" value={fieldInputValue === "" ? '' : fieldInputFormattedValue} onChange={val => { field.input.onChange(val); } } />
                    <span className="input-group-addon">
                        <span className="fa fa-calendar"></span>
                    </span>
                </div>
            </DateRangePicker>
        </div>
    );
}

[emckay]

I'm also having this problem. Did you ever find a solution?

[skratchdot]

I will try to look into this a bit this week (or perhaps weekend). I'll try to add some tests (server vs client, webpack vs browserify, etc).

[emckay]

Thanks :) Let me know if you have trouble replicating it. I'm also going to spend some time debugging this right now. I'll let you know if I find anything.

[emckay]

Ah I have figured out the issue. I'm trying to use the date picker to pick a single date, rather than a range, so I only provide a startDate prop. Behind the scenes, this sets the startDate and endDate options on the date selector. When the startDate is updated later, the endDate option stays the same. Depending on how you style the picker, it may look like there are two startDates.

To solve the problem, I changed my code from this:

<DateRangePicker
  startDate={this.state.datetime}
  singleDatePicker
  onApply={this.handlePickerChange}
>

to

<DateRangePicker
  startDate={this.state.datetime}
  endDate={this.state.datetime}
  singleDatePicker
  onApply={this.handlePickerChange}
>

I'm not 100% sure this is the problem that @ozluy had, but this solves the issue for me.

[skratchdot]

@emckay - thanks for this info!!! I'm wondering if I should ever try to do a real port of the bootstrap-daterangepicker project. This lib is really a dumb wrapper around the jQuery lib, and there's got to be a better way to manage it. I'll still try to add some tests this weekend which will hopefully catch cases like this (or at least give people more examples to look at).

[pointblack]

@emckay thanks man, the issue was indeed using singleDatePicker and only setting startDate

[andy9775]

I'm having a similar issue. Using a singleDatePicker with startDate (tried with endDate) and it's showing me a range (highlight on the calendar). The range starts at the start date but ends at today.

[skratchdot]

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