calendar-2k 1.0.17 → 1.0.18

package/README.md

@@ -109,7 +109,7 @@ export default function App() {
 
 ---
 
-### Example 3 — Time Range Picker
+### Example 4 — Time Range Picker
 
 Select a start and end time, useful for timetable.
 
@@ -139,13 +139,19 @@ export default function App() {
 
 ## Props
 
-| Prop           | Type                             | Required | Description                                                              |
-| -------------- | -------------------------------- | -------- | ------------------------------------------------------------------------ |
-| `mode`         | `"date" \| "time" \| "datetime"` | ✅       | Picker mode                                                              |
-| `value`        | `DateValueType`                  | ✅       | Current selected value — a `Date` or `{ start: Date, end: Date }` object |
-| `onChangeDate` | `(value: DateValueType) => void` | ✅       | Callback fired when the user selects a date or range                     |
-| `color`        | `string`                         | ❌       | Accent color for the picker UI (any valid CSS/RN color)                  |
-| `disableDate`  | `(date: Date) => boolean`        | ❌       | Function to disable specific dates — return `true` to disable            |
+| 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` | `React.ReactNode`                | ❌       | Custom element to replace the default trigger button                                                      |
+| `disabled`      | `boolean`                        | ❌       | Disables the entire picker — the trigger becomes non-interactive                                          |
 
 ---
 
@@ -158,12 +164,47 @@ 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
+}
+```
+
+---
+
 ## Modes
 
 | Mode       | `value` type               | Description               |
 | ---------- | -------------------------- | ------------------------- |
-| `date`     | `Date`                     | Pick a single date        |
-| `time`     | `Date`                     | Pick a single time        |
+| `date`     | `Date` or `{ start, end }` | Pick a single date        |
+| `time`     | `Date` or `{ start, end }` | Pick a single time        |
 | `datetime` | `Date` or `{ start, end }` | Pick date+time or a range |
 
 ---
@@ -183,6 +224,17 @@ disableDate={(date) => date < new Date()}
 disableDate={(date) => date.toDateString() === new Date("2025-12-25").toDateString()}
 ```
 
+You can also use `min` and `max` for simpler range-based disabling:
+
+```tsx
+// Only allow dates in 2025
+<Calendar2kView
+  min={new Date("2025-01-01")}
+  max={new Date("2025-12-31")}
+  ...
+/>
+```
+
 ---
 
 ## Platform Support

package/build/Calendar2k.types.d.ts

@@ -15,6 +15,8 @@ export type Calendar2kViewProps = {
     max?: Date;
     disableDate?: (date: Date) => boolean;
     placeholder?: string;
+    customTrigger?: React.ReactNode;
+    disabled?: boolean;
 };
 export type DayColumnProps = {
     label: string;

package/build/Calendar2kView.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import { type Calendar2kViewProps, type DateValueType } from "./Calendar2k.types";
-export default function Calendar2kView({ onChangeDate, value, locales, color, min, max, disableDate, placeholder, mode, }: Calendar2kViewProps): React.JSX.Element;
-export type { DateValueType };
+export default function Calendar2kView({ onChangeDate, value, locales, color, min, max, disableDate, placeholder, customTrigger, mode, disabled, }: Calendar2kViewProps): React.JSX.Element;
+export type { Calendar2kViewProps, DateValueType };

package/build/Calendar2kView.js

@@ -104,7 +104,7 @@ var toHexColor_1 = require("./libs/toHexColor");
 var ui_1 = require("./ui");
 function Calendar2kView(_a) {
     var _this = this;
-    var onChangeDate = _a.onChangeDate, value = _a.value, locales = _a.locales, color = _a.color, min = _a.min, max = _a.max, disableDate = _a.disableDate, placeholder = _a.placeholder, _b = _a.mode, mode = _b === void 0 ? "datetime" : _b;
+    var onChangeDate = _a.onChangeDate, value = _a.value, locales = _a.locales, color = _a.color, min = _a.min, max = _a.max, disableDate = _a.disableDate, placeholder = _a.placeholder, customTrigger = _a.customTrigger, _b = _a.mode, mode = _b === void 0 ? "datetime" : _b, disabled = _a.disabled;
     color = (0, toHexColor_1.toHexColor)(color);
     var modeHasTime = mode === null || mode === void 0 ? void 0 : mode.includes("time");
     var modeHasDate = mode === null || mode === void 0 ? void 0 : mode.includes("date");
@@ -117,6 +117,8 @@ function Calendar2kView(_a) {
         return (0, format_1.getWeekDay)(new Date(2026, 4, 3 + i), locales);
     });
     var datetimeOuput = (0, react_1.useMemo)(function () {
+        if (customTrigger)
+            return "";
         if (!value) {
             if (placeholder)
                 return placeholder;
@@ -241,7 +243,7 @@ function Calendar2kView(_a) {
       </ui_1.KView>);
     }
     return (<>
-      <react_native_1.Pressable onPress={onToggle} style={{
+      <react_native_1.Pressable onPress={onToggle} disabled={disabled} style={{
             width: "100%",
             borderWidth: 1,
             borderColor: "#0003",
@@ -253,10 +255,12 @@ function Calendar2kView(_a) {
             gap: 10,
             alignItems: "center",
         }}>
-        <Icon_1.default mode={mode}/>
-        <ui_1.KText fontSize={16} color={value ? undefined : "#0007"}>
-          {datetimeOuput}
-        </ui_1.KText>
+        {customTrigger || (<>
+            <Icon_1.default mode={mode}/>
+            <ui_1.KText fontSize={16} color={value ? undefined : "#0007"}>
+              {datetimeOuput}
+            </ui_1.KText>
+          </>)}
       </react_native_1.Pressable>
       <react_native_1.Modal animationType="slide" visible={isOpen} transparent onRequestClose={onToggle}>
         <ui_1.KView flex={1} justifyContent="flex-end">

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "calendar-2k",
-    "version": "1.0.17",
+    "version": "1.0.18",
     "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",

package/src/Calendar2k.types.ts

@@ -18,6 +18,8 @@ export type Calendar2kViewProps = {
   max?: Date;
   disableDate?: (date: Date) => boolean;
   placeholder?: string;
+  customTrigger?: React.ReactNode;
+  disabled?: boolean;
 };
 
 export type DayColumnProps = {

package/src/Calendar2kView.tsx

@@ -33,7 +33,9 @@ export default function Calendar2kView({
   max,
   disableDate,
   placeholder,
+  customTrigger,
   mode = "datetime",
+  disabled,
 }: Calendar2kViewProps) {
   color = toHexColor(color);
 
@@ -60,6 +62,8 @@ export default function Calendar2kView({
   );
 
   const datetimeOuput = useMemo(() => {
+    if (customTrigger) return "";
+
     if (!value) {
       if (placeholder) return placeholder;
 
@@ -196,6 +200,7 @@ export default function Calendar2kView({
     <>
       <Pressable
         onPress={onToggle}
+        disabled={disabled}
         style={{
           width: "100%",
           borderWidth: 1,
@@ -209,10 +214,14 @@ export default function Calendar2kView({
           alignItems: "center",
         }}
       >
-        <Icon mode={mode} />
-        <KText fontSize={16} color={value ? undefined : "#0007"}>
-          {datetimeOuput}
-        </KText>
+        {customTrigger || (
+          <>
+            <Icon mode={mode} />
+            <KText fontSize={16} color={value ? undefined : "#0007"}>
+              {datetimeOuput}
+            </KText>
+          </>
+        )}
       </Pressable>
       <Modal
         animationType="slide"
@@ -350,4 +359,4 @@ export default function Calendar2kView({
   );
 }
 
-export type { DateValueType };
+export type { Calendar2kViewProps, DateValueType };