I’m experiencing an issue with time zone conversion in my JavaScript code. I have manually set my Mac to BST and configured the time zone in my code to recognize this fact. However, when I choose 6:00 AM as the time to schedule a job, it should convert it to 12:00 AM CST. Instead, it appears to convert the time first, set it as local, and then use the local time as the converted time.

function handleStartDateChange(newValue) {
  if (newValue) {
    // Parse the input date as BST (Europe/London)
    const localZone = "Europe/London";
    const localDateTime = DateTime.fromISO(newValue.toISOString(), { zone: localZone });
    console.log("User selected time (local time zone - Europe/London):", localDateTime.toString());

    // Convert to Central Time (America/Chicago)
    const centralTimeStartDate = localDateTime.setZone("America/Chicago");
    setStartDate(centralTimeStartDate);
    console.log("Converted to Central Time (America/Chicago):", centralTimeStartDate.toString());
  } else {
    console.error("newValue is undefined or invalid");
  }
}

These are the logs I receive:

User selected time (local time zone - Europe/London): 2024-07-08T12:00:05.594+01:00
WASDeploymentPage.js:2814 Converted to Central Time (America/Chicago): 2024-07-08T06:00:05.594-05:00
WASDeploymentPage.js:2826 Start date before conversion: DateTime {ts: 1720436405594, _zone: IANAZone, loc: Locale, invalid: null, weekData: null, …}
WASDeploymentPage.js:2830 Central Time start date: DateTime {ts: 1720436405594, _zone: IANAZone, loc: Locale, invalid: null, weekData: null, …}
WASDeploymentPage.js:2865 New scheduled job data: {wasDeploymentId: '6682ccb4910b52a381df59e6', workflow: 'patch', state: 'PATCHING', docId: '2024-6-1-16-35-15-171', cellId: 'jq-cell90-dv002', …}
WASDeploymentPage.js:2888 Update scheduled job data: {docId: '2024-6-1-16-35-15-171', cellId: 'jq-cell90-dv002', createdBy: 'hahmi', scheduledStartTime: '2024-07-08T06:00:05.594-05:00'}
WASDeploymentPage.js:2903 Update scheduled job data received: {docId: '2024-6-1-16-35-15-171', cellId: 'jq-cell90-dv002', createdBy: 'hahmi', scheduledStartTime: '2024-07-08T06:00:05.594-05:00'}
WASDeploymentPage.js:2911 Scheduled start time (Central Time): DateTime {ts: 1720436405594, _zone: IANAZone, loc: Locale, invalid: null, weekData: null, …}
WASDeploymentPage.js:2941 Scheduled job updated successfully in the database.

It seems that the time conversion process is not functioning as expected. Specifically, I expect the 6:00 AM BST to convert to 12:00 AM CST, but it doesn’t.

Could someone help me identify what might be going wrong or how I can correctly convert the time from BST to CST?

I have tested this in CST (that is my actual local timezone) and everything works correctly.

Additionally, here’s the part of the code where the date picker is used:

<Container>
  <LocalizationProvider dateAdapter={AdapterDayjs}>
    <DesktopDateTimePicker
      label="Start Date"
      views={['year', 'day', 'hours', 'minutes']}
      slotProps={{
        textField: { variant: "standard" },
      }}
      value={startDate ? dayjs(startDate.toDate ? startDate.toDate() : new Date(startDate)) : null}
      maxDate={lastCalendarDay}
      minDate={firstCalendarDay}
      timeSteps={{ minutes: 15 }}
      onChange={(newValue) => handleStartDateChange(newValue, setStartDate)}
      renderInput={(params) => <TextField {...params} />}
      sx={{
        backgroundColor: "white",
        zIndex: "9999",
        top: "10px",
        marginLeft: "0px",
        marginRight: "0px",
      }}
    />
  </LocalizationProvider>
</Container>