Datepicker
To select or input a date.
Installation (Not necessary on iOS)
expo install @react-native-community/datetimepicker
NOTE:
if not is Expo project, please complete the installation here
When To Use
By clicking the input box, you can select a date from a popup calendar.
import { DatePicker } from '@redshank/native';
Examples
Default
Default datepicker element.
Picker modes
Picker default modes element.
Calendar (iOS only)
Calendar mode only iOS in Android default.
Format
Custom format date.
Locales
Change locale api.
APIs
DatePicker Props
Api props extends from react-native-modal-datetime-picker
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| background | ThemeColor | ThemeColor | Background color of the element | inputColor |
| borderInputColor | ThemeColor | ThemeColor | Select border color | border |
| color | ThemeColor | ThemeColor | Text color | accents2 |
| defaultValue | Date string | Date Text | Default date in date instance or string with some format that format prop | - |
| display | Enum | spinner default inline | How the modal is displayed | spinner |
| error | boolean | true false | Show error variant | - |
| format | string | Text | Date format for show in input and format default and value prop when is string | - |
| onChange | function | (date: Date, dateText: string) => void | On change function, pass to Date object and date text format | - |
| placeholder | string | Text | Placeholder prop | - |
| prefix | ReactNode | Icon | Prop for render element to start | - |
| size | SizeType | small middle large | Size element | middle |
| suffix | ReactNode | Icon | Prop for render element to end | - |
| textError | string | Text | Message of the error, set with error prop in true | - |
| value | string Date | Text Date | Value prop for controlled element, if the value is string apply format prop | - |
| style | object | StyleProp<ViewStyle> | Style for the wrapper element | - |
Community:
We're excited to see the community adopt @redshank/native, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!
DiscordGithubContributing:
PR's on @redshank/native are always welcome, please see our contribution guidelines to learn how you can contribute to this project.