Date Picker

A control for selecting an absolute date.

Installation

Run the following command:

npx nwui-cli@latest add date-picker

🚀

Ship.

Add the following dependencies to your project:

npx expo install @react-native-community/datetimepicker

Text

Copy/paste the following code to the specified file paths:

Folder Collapsed

~/components/nativewindui/DatePicker/DatePicker.tsx

import DateTimePicker from '@react-native-community/datetimepicker';
import * as React from 'react';

export function DatePicker(
  props: React.ComponentProps<typeof DateTimePicker> & {
    mode: 'date' | 'time' | 'datetime';
  }
) {
  return <DateTimePicker {...props} />;
}

🚢

Ship.

Usage

index.tsx

Download

import * as React from 'react';
import { View } from 'react-native';

import { DatePicker } from '~/components/nativewindui/DatePicker';

function DatePickerExample() {
  const [date, setDate] = React.useState(new Date());
  return (
    <View className='items-center'>
      <DatePicker
        value={date}
        mode='datetime'
        onChange={(ev) => {
          setDate(new Date(ev.nativeEvent.timestamp));
        }}
      />
    </View>
  );
}

Date Picker

Installation

Usage

NativeWindUI