v3.0.2

This release introduces a new styling method, provides full support for NativeWind, adds a custom components prop, and addresses various bugs and improvements in localization.

What's Changed

fix: remove dayjs from peer dependency. you don't need to install it anymore if you don't need it.
feat: add className and classNames props to support styling with NativeWind.
feat: add style and styles props to allow styling with StyleSheet.
feat: add components prop to replace the default rendered elements.
feat: add numerals prop to specify the numeral system to use.
feat: add month and onMonthChange props to handle active month programmatically.
feat: add year and onYearChange props to handle active month programmatically.
feat: add min and max props to control minimum and maximum selectable dates in range and multiple modes.
feat: add multiRangeMode prop to display selecting multiple dates in a range row.
feat: add hideHeader, hideWeekdays, disableMonthPicker, and disableYearPicker props for better customization.
feat: add weekdaysFormat, monthsFormat, and monthCaptionFormat props to format displaying texts.
feat: add timeZone to define the timezone for the DateTimePicker.
fix: 'React is not defined' error in old React versions.
fix: time picker scroll issue in nested scroll views.
fix: minDate and maxDate issues when their values were changed after initialization.

Breaking Changes

prop displayFullDays renamed to showOutsideDays.
prop height renamed to containerHeight.
prop headerButtonsPosition renamed to navigationPosition.
all styling props in v2 removed.

Upgrading Guide

After importing the component you also need to import getDefaultStyles or getDefaultClassNames (if you prefer NativeWind) to pass to the component.

import { useState } from  'react';
import DateTimePicker, { DateType, getDefaultStyles } from 'react-native-ui-datepicker';

export function Calendar() {
  const defaultStyles = getDefaultStyles();
  const [selected, setSelected] = useState<DateType>();

  return (
    <DateTimePicker
      mode="single"
      date={selected}
      onChange={({ date }) =>  setSelected(date)}
      styles={defaultStyles}
    />
  );
}

If you're using NativeWind in your project, apply Tailwind CSS class names to style the calendar. Use the classNames prop to apply custom class names instead of the default ones.

import { useState } from  'react';
import DateTimePicker, { DateType, getDefaultClassNames } from 'react-native-ui-datepicker';

export function Calendar() {
  const defaultClassNames = getDefaultClassNames();
  const [selected, setSelected] = useState<DateType>();

  return (
    <DateTimePicker
      mode="single"
      date={selected}
      onChange={({ date }) =>  setSelected(date)}
      classNames={defaultClassNames}
    />
  );
}