v3.1.2

This release fixes issues related to the TypeScript type declarations error.

What's Changed

fix: library TypeScript type declarations. by @farhoudshapouran in ea72883

v3.1.1

This release fixes issues related to the 'React doesn't exist' error.

What's Changed

fix: property 'React' doesn't exist error. by @farhoudshapouran in 9a00042

v3.1.0

This release introduces support for the Jalali (Persian Solar Hijri) calendar in the DateTimePicker, also addresses some styling issues with RTL direction, and fixes issue related with 'React is not defined' error.

What's Changed

feat: add Jalali calendar. by @farhoudshapouran in #177
fix: resolve the 'React is not defined' error. by @kingsley-eneris in #176

How It Works

The calendar prop is used to switch between the Gregorian and Jalali (Persian) calendars. Jalali calendar supports only en and fa locales. The default value of the calendar prop is gregory also it accepts jalali.

v3.0.7

This release introduces the enabledDates prop that takes precedence over disabledDates, also addresses some styling issues, you can now use button_next_image and button_prev_image styling props to change the default image icon style of prev and next buttons, it is useful for change the default tintColor of button images.

Functions getDefaultStyles() and getDefaultClassNames() renamed to useDefaultStyles() and useDefaultClassNames(). also you can pass the color scheme to the useDefaultStyles(scheme: "dark" | "light") function.

What's Changed

feat: add enabledDates prop. by @Cominis in #164
feat: add option to style next and prev buttons image icon. by @farhoudshapouran in #174
fix: renamed default styles and classNames as hooks. by @farhoudshapouran in #174
feat: allow picking the color scheme for the useDefaultStyles() function. by @farhoudshapouran in #174

Breaking Changes

function getDefaultStyles() renamed to useDefaultStyles().
function getDefaultClassNames() renamed to useDefaultClassNames().

v3.0.6

This release addresses styling inconsistencies when using multiRangeMode and prevents
visual glitches when selecting date ranges that include month boundaries, and fix the day cell width consistency to fit better in the days grid.

What's Changed

fix: resolve date range selection logic issues in multiple mode by @farhoudshapouran in #173
fix: day cell width consistency by @farhoudshapouran in #173

v3.0.5

This release introduces use12Hours prop to use a 12-hour format (AM/PM) in the time picker.

What's Changed

feat: enable 12 hour time format by @farhoudshapouran in #166

v3.0.4

This release introduces month and year disabling based on minDate and maxDate, improving the user experience, and fixing an issue about a semantically incorrect header tag with react-native-web.

What's Changed

feat: add new functionality for disabling unavailable months, year by @mystica2000 in #140
fix: remove accessibilityRole from header component #115 by @farhoudshapouran

v3.0.3

This release addresses some issues.

What's Changed

fix: /lib/commonjs/index not found error #154
fix: change return values of onChange to javascript Date object #91
fix: misspelled typo in props #81 #117

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}
    />
  );
}

v2.0.11

Bug fixes
fix disabled days style