1. In my React App i am using DateRangePicker from BluePrint Library DOCS, ik it's depreciated
  2. I have set the singleMonthOnly prop to false, hence i can see 2 months current & previous month
  3. I have set the timePickerProps precision to seconds, which enables the timePicker Component beneath the Calendar's
  4. Because i have two calendar's displayed i also have two timePicker compoents displayed

Code for reference

<DateRangePicker
    className={Classes.ELEVATION_1}
    onChange={handleChange}
    allowSingleDayRange={true}
    singleMonthOnly={false}
    contiguousCalendarMonths={false}
    shortcuts={false}
    timePickerProps={{
        precision: 'second',
        selectAllOnFocus: true,
        value: new Date(),// <==================== Code Reference Point 1
        onChange: function (newTime) {
            console.log("Hello", newTime)// <<========= Code Reference Point 2
        }
    }}
    maxDate={new Date()}
    highlightCurrentDay
    defaultValue={[
        timeRangeParam && urlTimeRange && urlTimeRange.length > 0
            ? new Date(parseInt(urlTimeRange[0]))
            : null,
        timeRangeParam && urlTimeRange && urlTimeRange.length > 0
            ? new Date(parseInt(urlTimeRange[1]))
            : null,
    ]}
    value={dateRangePickerValue} // <================ Code Reference Point 3
/>

UI for reference enter image description here

Issue

When i change the value of the first timePicker the onChange is called and i can see the console.log(Code Reference Point 2) for hello as in code above and when i change the value of the second one i can see the same console.log for hello.

Also the value that is expected is a single Date Object(Code Reference Point 1) but it should be an Array like such [Date, Date] so that one can control the two timePickers Individually.

Thank Fully the interface for the value(Code Reference Point 3) taken by the parent DateRangePicker is a [Date, Date] range.DatePicker Interface

Main Question❓ How am i supposed to take control of the 2 timePicker Individually ? If i cannot access the onChange separately, how am i supposed to know which one to change ?

0

There are 0 answers