ngx-daterangepicker-md shows incorrect endDate due to timezone issue (Asia/Kolkata)

[abi7244]

Versions

• Angular version: 17
• Ngx-daterangepicker-material:6.0.0

`Problem Statement:
We are usingAngular 17 and the ngx-daterangepicker-md library with Moment and Dayjs to configure a custom date range picker. However, we are observing incorrect rendering of endDate under certain timezone conditions (especially for Asia/Kolkata timezone which is UTC+5:30).
Test Steps to Reproduce the Issue:

• Step 1: Assume the current system date and time is 29-04-2025 03:45 PM (Asia/Kolkata).
• Step 2: Change system clock to 30-04-2025 between 12:01 AM and 05:30 AM.
• Step 3: On page load, the date picker shows correct values:
• startDate = 30-04-2025
• endDate = 30-04-2025
• Step 4: Now select predefined ranges like:
• "This Month"
• "Last 7 Days"
• "Last 30 Days"
• ❌ The issue:
• startDate renders correctly
• endDate renders as 29-04-2025, which is global UTC date, instead of local browser date (30-04-2025)
• Step 5: If you select "Today", it renders:
• startDate = 30-04-2025
• endDate = 29-04-2025 ❌
• Step 6: If the system time is after 05:31 AM, everything starts working as expected ✅

TS:

dashboardCurrentDate = {
start: moment().startOf('day'),
end: moment().startOf('day')
};

ranges: any = {
'Today': [moment().startOf('day'), moment().endOf('day')],
'Yesterday': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
'Last 7 Days': [moment().subtract(6, 'days').startOf('day'), moment().endOf('day')],
'Last 30 Days': [moment().subtract(29, 'days').startOf('day'), moment().endOf('day')],
'This Month': [moment().startOf('month').startOf('day'), moment().endOf('month').endOf('day')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month').endOf('day')],
};

invalidDates: moment.Moment[] = [
moment().add(1, 'days'),
moment().add(2, 'days'),
moment().add(3, 'days')
];

isInvalidDate = (m: moment.Moment) => {
const minDate = moment().subtract(90, 'days');
const maxDate = moment();

if (m.isBefore(minDate, 'day') || m.isAfter(maxDate, 'day')) {
return true;
}
if (m.isAfter(moment(), 'day')) {
return true;
}
return this.invalidDates.some(d => d.isSame(m, 'day'));
}

isInvalidDateDefault = (m: moment.Moment) => {
if (m.isAfter(moment(), 'day')) {
return true;
}
return this.invalidDates.some(d => d.isSame(m, 'day'));
}

customLocaleConfigDefault: any = {
format: 'YYYY-MM-DD',
displayFormat: 'YYYY-MM-DD',
separator: ' to ',
applyLabel: 'Apply',
cancelLabel: 'Cancel',
customRangeLabel: 'Custom Range',
firstDay: moment.localeData().firstDayOfWeek(),
maxDate: moment().toDate(),
startDate: moment().subtract(1, 'months').startOf('month').toDate(),
endDate: moment().startOf('month').toDate(),
utc: false // Tried setting this to false, still issue exists
};

HTML:

  < input class="form-control"
id = "dateRangePicker"
type = "text"
startKey = "start"
endKey = "end"
[isInvalidDate] = "isInvalidDateDefault"
ngxDaterangepickerMd
[ranges] = "ranges"
[autoApply] = "false"
[(ngModel)] = "dashboardCurrentDate"
[locale] = "customLocaleConfigDefault"
[maxDate] = "customLocaleConfigDefault.maxDate"
[alwaysShowCalendars] = "true"
  (datesUpdated) = "onDatesUpdated($event)"
name = "daterange" />

⚠️ Issue Summary:
Despite trying both Moment and Dayjs with .utc(false) and .tz("Asia/Kolkata"), the end date still resolves to the UTC current date, not the local browser system date (especially when testing between 12:00 AM to 5:30 AM in UTC+5:30 timezones).
❓ Questions:
How can we ensure that ngx-daterangepicker-md uses the local browser time, not UTC?
Is there a way to override or fix this behavior in the component or via configuration?