Releases: farhoudshapouran/react-native-ui-datepicker
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
Contributors
Assets 2
v3.0.3
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
v2.0.10
v2.0.8
v2.0.7
v2.0.6
Bug Fixes
Fixed time picker issue on android
v2.0.5
Bug Fixes
Fixed time picker initial value issue
Fixed locale change
Improvements
Refactored components for better performance