Issues with Date and Time Formatting in DateRangePicker for Azerbaijan Locale

[Hashim1995]

Hello everyone,

I'm encountering a couple of issues while working with the DateRangePicker component from @nextui-org/react. My requirements are to display dates in the dd.MM.yyyy format and ensure that the time is correctly set to the local time for the Azerbaijan timezone.

Here are the specific issues I'm facing:

Date Format: I need the date to be displayed in the dd.MM.yyyy format, but the component defaults to the MM.dd.yyyy format.
Local Time: The time is not correctly set. I need it to reflect the local time for the Azerbaijan timezone.
Here is a simplified version of my current code:

/* eslint-disable no-shadow /
/ eslint-disable no-unused-vars */
import React from 'react';
import { useForm } from 'react-hook-form';
import { Divider, DateRangePicker } from '@nextui-org/react';
import { ZonedDateTime } from '@internationalized/date';
import { toZonedTime } from 'date-fns-tz';

import AppHandledBorderedButton from '@/components/forms/button/app-handled-bordered-button';

interface FormValues {
startDate: any;
startTime: any;
endDate: any;
endTime: any;
}

function DateList(): React.ReactElement {
const timeZone = 'Asia/Baku';

const currentDate = toZonedTime(new Date(), timeZone);
const nextDayDate = toZonedTime(
new Date(new Date().setDate(new Date().getDate() + 1)),
timeZone
);

const formatZonedDateTime = (date: Date, timeZone: string): ZonedDateTime =>
new ZonedDateTime(
date.getFullYear(),
date.getMonth() + 1,
date.getDate(),
timeZone,
0,
date.getHours(),
date.getMinutes(),
date.getSeconds(),
date.getMilliseconds()
);

const startDateTime = formatZonedDateTime(currentDate, timeZone);
const endDateTime = formatZonedDateTime(nextDayDate, timeZone);

const {
control,
handleSubmit,
formState: { errors }
} = useForm({
defaultValues: {}
});

const onSubmit = (data: FormValues) => {
console.log('Form Data:', data);
};

return (

<DateRangePicker
defaultValue={{
start: startDateTime,
end: endDateTime
}}
label="Stay duration"
hourCycle={24}
labelPlacement="outside"
/>

Submit

);
}

export default DateList;

[wingkwong]

you may set the locale in your provider. See here