@touchblack/date-time-picker

A customizable React Native date and time picker component with a sleek dark theme design.

Installation

npm install @touchblack/date-time-picker

Peer Dependencies

This package requires the following peer dependencies:

npm install react react-native moment

Features

• DatePicker: A customizable date picker with day, month, and year selection
• CustomHourPicker: A time picker specifically designed for hour selection
• Modern UI with smooth animations and visual feedback
• Customizable button text and labels
• Dark theme support
• FlatList-based implementation for optimal performance

Components

DatePicker

A three-column date picker that allows users to select day, month, and year.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | { date: string; month: string; year: string } | - | The currently selected date (optional) | | onSelect | (selected: { date: string; month: string; monthName: string; year: string }) => void | - | Callback fired when user confirms a selection | | successText | string | "Set" | Text for the confirmation button | | dismissText | string | "Cancel" | Text for the cancel button | | onDismiss | () => void | - | Callback fired when user cancels | | maxElementsAtATime | number | - | Maximum number of elements to display at once (optional) |

Example

import { DatePicker } from '@touchblack/date-time-picker';
import { useState } from 'react';

function MyComponent() {
  const [selectedDate, setSelectedDate] = useState(null);

  const handleDateSelect = (date) => {
    setSelectedDate(date);
    console.log(`Selected: ${date.date}-${date.month}-${date.year}`);
  };

  return (
    <DatePicker
      value={selectedDate}
      onSelect={handleDateSelect}
      onDismiss={() => console.log('Date selection canceled')}
      successText="Confirm"
      dismissText="Cancel"
    />
  );
}

CustomHourPicker

A time picker focused on hour selection with a clean interface.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | - | Current hour value (optional) | | label | string | "Hour" | Label displayed above the picker | | onSelect | (selected: { hour: string }) => void | - | Callback fired when user confirms a selection | | min | number | 0 | Minimum hour value | | max | number | 24 | Maximum hour value | | successText | string | "Set" | Text for the confirmation button | | dismissText | string | "Cancel" | Text for the cancel button | | onDismiss | () => void | - | Callback fired when user cancels | | maxElementsAtATime | number | - | Maximum number of elements to display at once (optional) |

Example

import { CustomHourPicker } from '@touchblack/date-time-picker';
import { useState } from 'react';

function MyComponent() {
  const [selectedHour, setSelectedHour] = useState(null);

  const handleHourSelect = (time) => {
    setSelectedHour(time.hour);
    console.log(`Selected: ${time.hour}`);
  };

  return (
    <CustomHourPicker
      value={selectedHour}
      onSelect={handleHourSelect}
      onDismiss={() => console.log('Hour selection canceled')}
      min={9}  // Start from 9 AM
      max={18} // End at 6 PM
      label="Select Appointment Time"
    />
  );
}

Utility Functions

transform(value: string)

Transforms a date string in the format "YYYY-MM-DD" into an object with separate date, month, and year fields.

import { transform } from '@touchblack/date-time-picker';

const dateObject = transform('2024-04-04');
// Returns { date: '04', month: '04', year: '2024' }

Theme Integration

This package is designed to work with the @touchblack/ui theme system. It automatically uses the dark theme for a consistent look and feel. You can change it based on your preference.