expo-2k-datetime-picker 1.0.0 → 1.0.1

package/README.md

@@ -26,6 +26,18 @@ npx expo install expo-2k-datetime-picker
 
 ---
 
+## Preview
+
+| Date                                | Time                                |
+| ----------------------------------- | ----------------------------------- |
+| ![Date Picker](src/assets/date.png) | ![Time Picker](src/assets/time.png) |
+
+| Datetime Range                                   | Time Range                               |
+| ------------------------------------------------ | ---------------------------------------- |
+| ![Datetime Range](src/assets/datetime-range.png) | ![Time Range](src/assets/time-range.png) |
+
+---
+
 ## Usage
 
 ### Example 1 — Date Picker
@@ -120,8 +132,8 @@ import { useState } from "react";
 
 export default function App() {
   const [date, setDate] = useState<DateValueType>({
-    start: new Date(),
-    end: new Date(),
+    start: "09:00:00",
+    end: "10:00:00",
   });
 
   return (
@@ -139,63 +151,19 @@ export default function App() {
 
 ## Props
 
-| Prop            | Type                                        | Required | Description                                                                                               |
-| --------------- | ------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------- |
-| `onChangeDate`  | `(value: DateValueType) => void`            | ❌       | Callback fired when the user selects a date or range                                                      |
-| `value`         | `DateValueType`                             | ❌       | Current selected value — a `Date` or `{ start: Date, end: Date }` object                                  |
-| `locales`       | `Intl.LocalesArgument`                      | ❌       | Locale for displaying month/day names and time format (e.g. `"fr"`, `"en-US"`). Defaults to device locale |
-| `mode`          | `"date" \| "time" \| "datetime"`            | ❌       | Picker mode                                                                                               |
-| `color`         | `string`                                    | ❌       | Accent color for the picker UI (any valid CSS/RN color)                                                   |
-| `min`           | `Date`                                      | ❌       | Earliest selectable date — all dates before this are automatically disabled                               |
-| `max`           | `Date`                                      | ❌       | Latest selectable date — all dates after this are automatically disabled                                  |
-| `disableDate`   | `(date: Date) => boolean`                   | ❌       | Function to disable specific dates — return `true` to disable                                             |
-| `placeholder`   | `string`                                    | ❌       | Text shown in the trigger button when no date is selected yet                                             |
-| `customTrigger` | `(onToggle: () => void) => React.ReactNode` | ❌       | Custom element to replace the default trigger button                                                      |
-| `disabled`      | `boolean`                                   | ❌       | Disables the entire picker — the trigger becomes non-interactive                                          |
-
----
-
-## Types
-
-```ts
-// Single date or datetime
-type DateValueType = Date | { start: Date; end: Date };
-```
-
----
-
-## Working with the Selected Value
-
-`DateValueType` is a standard JavaScript `Date` object (or a pair of them for ranges). Use the built-in `Date` methods to extract any part of the selected value:
-
-```tsx
-const date = new Date("2025-06-15T14:30:00");
-
-date.getFullYear(); // 2025
-date.getMonth(); // 5 (0-indexed, so 5 = June)
-date.getDate(); // 15
-date.getDay(); // 0–6 (day of the week, 0 = Sunday)
-date.getHours(); // 14
-date.getMinutes(); // 30
-date.getSeconds(); // 0
-date.toISOString(); // "2025-06-15T14:30:00.000Z"
-date.toLocaleDateString(); // "6/15/2025" (format depends on locale)
-date.toLocaleTimeString(); // "2:30:00 PM"
-```
-
-For range values, access each bound separately:
-
-```tsx
-const [date, setDate] = useState<DateValueType>({
-  start: new Date(),
-  end: new Date(),
-});
-
-if (date && "start" in date) {
-  date.start.getDate(); // start day
-  date.end.getFullYear(); // end year
-}
-```
+| Prop            | Type                                        | Required | Description                                                                                                                      |
+| --------------- | ------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `onChangeDate`  | `(value: DateValueType) => void`            | ❌       | Callback fired when the user selects a date or range                                                                             |
+| `value`         | `DateValueType`                             | ❌       | Current selected value — a `Date` or `{ start: Date, end: Date }` or HH:MM:SS or `{ start: 'HH:MM:SS', end: 'HH:MM:SS' }` object |
+| `locales`       | `Intl.LocalesArgument`                      | ❌       | Locale for displaying month/day names and time format (e.g. `"fr"`, `"en-US"`). Defaults to device locale                        |
+| `mode`          | `"date" \| "time" \| "datetime"`            | ❌       | Picker mode                                                                                                                      |
+| `color`         | `string`                                    | ❌       | Accent color for the picker UI (any valid CSS/RN color)                                                                          |
+| `min`           | `Date`                                      | ❌       | Earliest selectable date — all dates before this are automatically disabled                                                      |
+| `max`           | `Date`                                      | ❌       | Latest selectable date — all dates after this are automatically disabled                                                         |
+| `disableDate`   | `(date: Date) => boolean`                   | ❌       | Function to disable specific dates — return `true` to disable                                                                    |
+| `placeholder`   | `string`                                    | ❌       | Text shown in the trigger button when no date is selected yet                                                                    |
+| `customTrigger` | `(onToggle: () => void) => React.ReactNode` | ❌       | Custom element to replace the default trigger button                                                                             |
+| `disabled`      | `boolean`                                   | ❌       | Disables the entire picker — the trigger becomes non-interactive                                                                 |
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "expo-2k-datetime-picker",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "description": "The fastest fully customizable Expo date & time picker, written in TypeScript, supporting Expo Go, single date, time, date range, time range, datetime range selection, flexible date disabling, and dynamic color theming for iOS and Android.",
     "main": "build/Calendar2kView.js",
     "types": "build/Calendar2k.types.d.ts",
@@ -50,4 +50,4 @@
         "expo-go-compatible"
     ],
     "license": "MIT"
-}
+}