Date Picker

A control for selecting an absolute date.

import { Icon } from '@roninoss/icons';
import { Stack } from 'expo-router';
import * as React from 'react';
import { View, Text, ScrollView, Pressable } from 'react-native';

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

export default function DatePickerScreen() {
  const [date, setDate] = React.useState(new Date());
  const { colors } = useColorScheme();
  return (
    <>
      <Stack.Screen
        options={{
          title: 'NativeWindUI',
          headerSearchBarOptions: {
            hideWhenScrolling: false,
          },
          headerLargeTitle: true,
          headerRight() {
            return (
              <Pressable className="opacity-80 active:opacity-40">
                <View className="opacity-90">
                  <Icon name="cog-outline" color={colors.foreground} />
                </View>
              </Pressable>
            );
          },
        }}
      />
      <ScrollView contentInsetAdjustmentBehavior="automatic" className="p-4">
        <View className="border-border bg-card gap-4 rounded-xl border p-4 pb-6 shadow-sm shadow-black/10 dark:shadow-none">
          <Text className="text-foreground text-center text-sm font-medium tracking-wider opacity-60">
            Date Picker
          </Text>
          <View className="items-center">
            <DatePicker
              value={date}
              mode="datetime"
              onChange={(ev) => {
                setDate(new Date(ev.nativeEvent.timestamp));
              }}
            />
          </View>
        </View>
      </ScrollView>
    </>
  );
}

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:

~/components/nativewindui/DatePicker/DatePicker.tsx

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

export function DatePicker({
  materialDateClassName: _materialDateClassName,
  materialDateLabel: _materialDateLabel,
  materialDateLabelClassName: _materialDateLabelClassName,
  materialTimeClassName: _materialTimeClassName,
  materialTimeLabel: _materialTimeLabel,
  materialTimeLabelClassName: _materialTimeLabelClassName,
  ...props
}: React.ComponentProps<typeof DateTimePicker> & {
  mode: 'date' | 'time' | 'datetime';
} & {
  materialDateClassName?: string;
  materialDateLabel?: string;
  materialDateLabelClassName?: string;
  materialTimeClassName?: string;
  materialTimeLabel?: string;
  materialTimeLabelClassName?: string;
}) {
  return <DateTimePicker {...props} />;
}

🛸

Ship.

Usage

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

 const [date, setDate] = React.useState(new Date());
  return (
    <DatePicker
    value={date}
    mode="datetime"
    onChange={(ev) => {
        setDate(new Date(ev.nativeEvent.timestamp));
    }}
    />
  );

Props

DatePicker

Extends all of the @react-native-community/datetimepicker props

Prop	Type	Description
mode	'date' \| 'time' \| 'datetime'	Specifies the mode of the date picker, which can be "date", "time", or "datetime".
materialDateClassName	string	Class name for styling the date picker in Android design mode.
materialDateLabel	string	Label text for the date picker in Android design mode.
materialDateLabelClassName	string	Class name for styling the label of the date picker in Android design mode.
materialTimeClassName	string	Class name for styling the time picker in Android design mode.
materialTimeLabel	string	Label text for the time picker in Android design mode.
materialTimeLabelClassName	string	Class name for styling the label of the time picker in Android design mode.