v0ltoz / react-datetimepicker

MIT License
91 stars 69 forks source link

Resetting the calendar #52

Open shyam-infraon opened 3 years ago

shyam-infraon commented 3 years ago

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. Screenshot_2020-09-22 Dashboard Infraon - Bot Manager

v0ltoz commented 3 years ago

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 commented 3 years ago

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 (

); } } export default TimeRangeFilter; ` And this is how i trigger it `` Note: I am using moment-timezone