- In my React App i am using
DateRangePicker
from BluePrint Library DOCS, ik it's depreciated - I have set the
singleMonthOnly
prop to false, hence i can see 2 months current & previous month - I have set the
timePickerProps
precision toseconds
, which enables the timePicker Component beneath the Calendar's - 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
/>
❌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 ?