DatePicker

import { DatePicker } from '@mantine/dates';

function Demo() {
  return <DatePicker placeholder="Pick date" label="Event date" withAsterisk />;
}

import { useState } from 'react';
import { DateRangePicker, DateRangePickerValue } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<DateRangePickerValue>([
    new Date(2021, 11, 1),
    new Date(2021, 11, 5),
  ]);

  return (
    <DateRangePicker
      label="Book hotel"
      placeholder="Pick dates range"
      value={value}
      onChange={setValue}
    />
  );
}

import 'dayjs/locale/ru';
import { DatePicker } from '@mantine/dates';

function Demo() {
  return (
    <DatePicker
      locale="ru"
      placeholder="Выберите дату"
      label="Дата события"
      defaultValue={new Date()}
    />
  );
}

import { DatePicker } from '@mantine/dates';
import { Indicator } from '@mantine/core';

function Demo() {
  return (
    <DatePicker
      placeholder="Pick date"
      label="Event date"
      renderDay={(date) => {
        const day = date.getDate();
        return (
          <Indicator size={6} color="red" offset={8} disabled={day !== 16}>
            <div>{day}</div>
          </Indicator>
        );
      }}
    />
  );
}

import { DatePicker } from '@mantine/dates';

function Demo() {
  return <DatePicker allowLevelChange={false} placeholder="No level change" label="Event date" />;
}

import { DatePicker } from '@mantine/dates';

function Demo() {
  return (
    <DatePicker
      label="Sunday as first day of week"
      placeholder="Pick date"
      firstDayOfWeek="sunday"
    />
  );
}

import { DatePicker } from '@mantine/dates';

function Demo() {
  return <DatePicker dropdownType="modal" placeholder="Pick date" label="Event date" />;
}

import dayjs from 'dayjs';
import { DatePicker } from '@mantine/dates';

function Demo() {
  return (
    <DatePicker
      placeholder="Pick date"
      label="Event date"
      minDate={dayjs(new Date()).startOf('month').add(5, 'days').toDate()}
      maxDate={dayjs(new Date()).endOf('month').subtract(5, 'days').toDate()}
    />
  );
}

import { DatePicker } from '@mantine/dates';

function Demo() {
  return <DatePicker allowFreeInput placeholder="Pick date" label="Event date" withAsterisk />;
}

import { DatePicker } from '@mantine/dates';

function Demo() {
  return <DatePicker excludeDate={(date) => date.getDay() === 0 || date.getDay() === 6} />;
}

import { useMantineTheme } from '@mantine/core';
import { DatePicker } from '@mantine/dates';

function Demo() {
  const theme = useMantineTheme();

  return (
    <DatePicker
      placeholder="Pick date"
      label="Event date"
      dayStyle={(date) =>
        date.getDay() === 5 && date.getDate() === 13
          ? { backgroundColor: theme.colors.red[9], color: theme.white }
          : null
      }
    />
  );
}

import { createStyles } from '@mantine/core';
import { DatePicker } from '@mantine/dates';

const useStyles = createStyles((theme) => ({
  outside: {
    opacity: 0,
  },

  weekend: {
    color: `${theme.colors.blue[6]} !important`,
  },

  selected: {
    color: `${theme.white} !important`,
  },
}));

function Demo() {
  const { classes, cx } = useStyles();

  return (
    <DatePicker
      disableOutsideEvents
      placeholder="Pick date"
      label="Event date"
      dayClassName={(date, modifiers) =>
        cx({
          [classes.outside]: modifiers.outside,
          [classes.weekend]: modifiers.weekend,
          [classes.selected]: modifiers.selected,
        })
      }
    />
  );
}

import { DatePicker } from '@mantine/dates';

function Demo() {
  return (
    <DatePicker
      placeholder="Pick date"
      label="Event date"
      inputFormat="MM/DD/YYYY"
      labelFormat="MM/YYYY"
      defaultValue={new Date()}
    />
  );
}

import { DatePicker } from '@mantine/dates';

function Demo() {
  return <DatePicker clearable={false} placeholder="Pick date" label="Event date" />;
}

import { DatePicker } from '@mantine/dates';

function Demo() {
  return (
    <>
      <DatePicker amountOfMonths={2} label="2 months" />
      <DatePicker amountOfMonths={3} label="3 months" />
    </>
  );
}

import { DatePicker } from '@mantine/dates';
import { IconCalendar } from '@tabler/icons';

function Demo() {
  return (
    <DatePicker
      placeholder="Pick date"
      label="Event date"
      icon={<IconCalendar size={16} />}
    />
  );
}

// Error as boolean – red border color
<DatePicker error />

// Error as React node – red border color and message below input
<DatePicker error="You must be at least 18 to register" />

import { DatePicker } from '@mantine/dates';

function Demo() {
  return <DatePicker disabled />;
}