DatesProvider

Usage

DatesProvider component lets you set various settings that are shared across all components exported from @mantine/dates package. DatesProvider supports the following settings:

• locale – dayjs locale, note that you also need to import corresponding locale module from dayjs. Default value is en.
• firstDayOfWeek – number from 0 to 6, where 0 is Sunday and 6 is Saturday. Default value is 1 – Monday.
• weekendDays – an array of numbers from 0 to 6, where 0 is Sunday and 6 is Saturday. Default value is [0, 6] – Saturday and Sunday.
• timezone – a textual representation of a time zone, for example, UTC.

import 'dayjs/locale/ru';
import { DatesProvider, MonthPickerInput, DatePickerInput } from '@mantine/dates';

function Demo() {
  return (
    <DatesProvider settings={{ locale: 'ru', firstDayOfWeek: 0, weekendDays: [0], timezone: 'UTC' }}>
      <MonthPickerInput label="Pick month" placeholder="Pick month" />
      <DatePickerInput mt="md" label="Pick date" placeholder="Pick date" />
    </DatesProvider>
  );
}

Timezone

When working with the DatesProvider, parsing the timezone parameter offers a valuable feature for controlling how dates and times are displayed within your application. By specifying a timezone of your choice, you can ensure that date information is presented in the desired timezone, rather than relying on the user's browser settings. If you don't provide a timezone parameter or explicitly set it to undefined, the application will default to using the user's browser timezone.

The timezone parameter sets the timezone context for all components integrated within the DatesProvider. This means that all date and time-related data displayed within your application will adhere to the specified timezone. This simplifies the process of maintaining consistency in how dates and times are presented to users across various parts of your application.

Accessing the timezone information

If you need to access the current timezone information from other parts of your application, you can leverage the getTimezone() function provided by the useDatesContext() hook. This function allows you to retrieve the active timezone setting and use it as needed.

Date format considerations

It's important to note that the DatesProvider system supports the provision of dates in the user's local timezone. However, many backend systems and data sources use Coordinated Universal Time (UTC) timestamps. In such cases, you can easily convert and parse UTC timestamps into the user's timezone using JavaScript, as demonstrated by the example: new Date('2000-10-03 02:10:00Z').

By effectively utilizing the timezone parameter and the provided functions, you can tailor the presentation of date and time data to meet the specific requirements of your application while maintaining compatibility with various data sources.

import { DatesProvider, DateTimePicker } from '@mantine/dates';

function Demo() {
  return (
    <DatesProvider settings={{ timezone: 'America/New_York' }}>
      <DateTimePicker label="Pick a Date" placeholder="Pick a Date" defaultValue={new Date('2000-10-03 02:10:00Z')} />
    </DatesProvider>
  );
}