Resetting the calendar

[shyam-infraon]

Hi, I am passsing the start and end time as props to the components, so when i give and option to change the zone, the start and end time changes, but the calendar shows the old time. So how do i re render or is there something else that i am missing.

[v0ltoz]

I am not fully understanding the question, can you please provide code examples? I don't fully understand what you mean by 'change the zone'.

[shyam-infraon]

If you see the start date and end date & the calendar selection, both are different.
I initialize the picker with local timezone, but have given an option to change the timezone of the location,due to which i try and rerender the calendar with the new time and date. Say a timezone of Auckland/New Zealand and America/Los_Angeles, might differ in dates at a particular time, so when i change the timezone , i pass the new start and end, the dates change but the selection in the calendar doesnt

Here is the code for the Calendar
`import React, { Component } from "react";
// import moment from "moment";
import moment from "moment-timezone";
import DateTimeRangeContainer from "react-advanced-datetimerange-picker";

class TimeRangeFilter extends Component {
constructor(props) {
super(props);
this.state = {};
}

render() {
const disabled = false;
let start = moment().tz(this.props.timezone).startOf("day");
let end = moment(start).tz(this.props.timezone).endOf("day");
const local = {
format: "DD-MM-YYYY HH:mm",
sundayFirst: false,
};
const ranges = {
Today: [moment(start), moment(end)],
Yesterday: [
moment(start).subtract(1, "days"),
moment(end).subtract(1, "days"),
],
"Last 7 Days": [moment(start).subtract(7, "days"), moment(end)],
"5 Days": [moment(start).subtract(5, "days"), moment(end)],
"1 Week": [moment(start).subtract(7, "days"), moment(end)],
"2 Weeks": [moment(start).subtract(14, "days"), moment(end)],
"1 Month": [moment(start).subtract(1, "months"), moment(end)],
"1 Year": [moment(start).subtract(1, "years"), moment(end)],
};
return (
<React.Fragment>
<DateTimeRangeContainer
ranges={ranges}
start={this.props.start}
end={this.props.end}
local={local}
leftMode={this.props.leftMode}
noMobileMode
smartMode
{...this.props}
>
<FormControl
id="calendarinput"
type="text"
label="Text"
placeholder="Enter text"
style={{
cursor: "pointer",
backgroundColor: "#41365d",
color: "#e1e8ef",
}}
disabled={disabled}
value={this.props.value}
/>

</React.Fragment>
);
}
}

export default TimeRangeFilter;
`

And this is how i trigger it
<TimeRangeFilter applyCallback={this.applyCallback} onChange={this.applyCallback} value={value} start={this.state.start} end={this.state.end} leftMode={true} timezone={this.props.timezone} />

Note: I am using moment-timezone