@sauravluitel/date-time-picker-custom 1.0.1 β†’ 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +121 -42
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,56 +1,135 @@
1
- # Premium Date & Time Picker Custom
1
+ # @sauravluitel/date-time-picker-custom
2
2
 
3
- A high-performance, responsive React Date and Time picker project built with **Vite**, **Framer Motion**, and **Lucide React**.
3
+ [![npm version](https://img.shields.io/npm/v/@sauravluitel/date-time-picker-custom.svg)](https://www.npmjs.com/package/@sauravluitel/date-time-picker-custom)
4
+ [![license](https://img.shields.io/npm/l/@sauravluitel/date-time-picker-custom.svg)](https://github.com/Saurav-627/Custom-Date-Time-Picker)
5
+
6
+ A professional, high-performance, and responsive React Date and Time picker library. Built with **Vite**, **Framer Motion**, and **Lucide React**, it offers dedicated, premium UIs for both Desktop and Mobile devices.
7
+
8
+ ---
4
9
 
5
10
  ## ✨ Features
6
11
 
7
- - **πŸ“± Dedicated Mobile UI**:
8
- - **Date Picker**: Smooth wheel-like scroll select for Years, Months, and Days.
9
- - **Time Picker**: Interactive Visual Clock Faceβ€”ideal for illiterate users or quick selection.
10
- - **πŸ–₯️ Premium Desktop UI**:
11
- - **Date Picker**: Full-featured, elegant calendar grid.
12
- - **Time Picker**: Efficient grid-based select for Hours and Minutes.
13
- - **⌨️ Hybrid Input**: Support for both manual typing (with validation) and mouse/touch selection.
14
- - **🎨 Aesthetics**:
15
- - Glassmorphism design system.
16
- - Smooth micro-animations with Framer Motion.
17
- - Modern typography using the *Outfit* Google font.
18
- - Premium dark theme with vibrant blue accents.
19
-
20
- ## πŸš€ Getting Started
21
-
22
- 1. **Install dependencies**:
23
- ```bash
24
- npm install
25
- ```
26
-
27
- 2. **Run the development server**:
28
- ```bash
29
- npm run dev
30
- ```
31
-
32
- ## πŸ“¦ Project Structure
33
-
34
- - `src/components/DatePicker`: Contains the DatePicker logic and responsive views.
35
- - `src/components/TimePicker`: Contains the TimePicker logic and the Visual Clock Face.
36
- - `src/components/Shared`: Reusable components like the `SharedInput`.
37
- - `src/hooks`: Custom hooks like `useMediaQuery` for layout switching.
38
- - `src/index.css`: Core design system and theme variables.
12
+ - **πŸ“± Dedicated Mobile UI**:
13
+ - **Scroll-Wheel Select**: Smooth, iOS-style wheel selects for Years, Months, Days, and Time.
14
+ - **Touch Optimized**: Large tap targets and haptic-friendly scrolling.
15
+ - **πŸ–₯️ Premium Desktop UI**:
16
+ - **Elegant Calendar**: Full-featured grid with quick navigation between months and years.
17
+ - **Grid Time Select**: Fast and efficient grid selection for precision time setting.
18
+ - **πŸ”Œ Form Ready (NEW in v1.0.1)**:
19
+ - **Synthetic Events**: Emits standard `{ target: { name, value } }` objects.
20
+ - **Drop-in Support**: Seamlessly integrates with **React Hook Form**, **Formik**, and **Yup**.
21
+ - **Standard Formats**: Always returns standard strings (`YYYY-MM-DD` and `HH:mm`).
22
+ - **πŸ›‘οΈ Submission Protection**: All internal buttons are typed as `type="button"` to prevent accidental parent form submissions.
23
+ - **🎨 Glassmorphism Design**: Modern, sleek aesthetics with dark/light mode support and smooth micro-animations.
24
+
25
+ ---
26
+
27
+ ## πŸš€ Installation
28
+
29
+ ```bash
30
+ npm install @sauravluitel/date-time-picker-custom
31
+ # or
32
+ yarn add @sauravluitel/date-time-picker-custom
33
+ ```
34
+
35
+ ### ⚠️ Important: CSS Import
36
+ To use the premium styles, import the CSS file in your main entry file (e.g., `main.js` or `App.js`):
37
+
38
+ ```javascript
39
+ import '@sauravluitel/date-time-picker-custom/style.css';
40
+ ```
41
+
42
+ ---
39
43
 
40
44
  ## πŸ› οΈ Usage
41
45
 
46
+ ### Basic Example
47
+
42
48
  ```jsx
43
- import { DatePicker, TimePicker } from './components';
49
+ import React, { useState } from 'react';
50
+ import { DatePicker, TimePicker } from '@sauravluitel/date-time-picker-custom';
44
51
 
45
- function MyComponent() {
46
- const [date, setDate] = useState(new Date());
47
- const [time, setTime] = useState('12:00');
52
+ function App() {
53
+ const [date, setDate] = useState('2024-03-02');
54
+ const [time, setTime] = useState('14:30');
48
55
 
49
56
  return (
50
- <>
51
- <DatePicker value={date} onChange={setDate} />
52
- <TimePicker value={time} onChange={setTime} />
53
- </>
57
+ <div className="form-group">
58
+ <DatePicker
59
+ value={date}
60
+ onChange={(e) => setDate(e.target.value)}
61
+ />
62
+
63
+ <TimePicker
64
+ value={time}
65
+ onChange={(e) => setTime(e.target.value)}
66
+ use12h={true}
67
+ />
68
+ </div>
54
69
  );
55
70
  }
56
71
  ```
72
+
73
+ ---
74
+
75
+ ## πŸ“‹ Form Integration
76
+
77
+ ### React Hook Form
78
+
79
+ ```jsx
80
+ import { useForm, Controller } from "react-hook-form";
81
+ import { DatePicker } from "@sauravluitel/date-time-picker-custom";
82
+
83
+ function MyForm() {
84
+ const { control, handleSubmit } = useForm();
85
+
86
+ return (
87
+ <form onSubmit={handleSubmit(data => console.log(data))}>
88
+ <Controller
89
+ name="birthDate"
90
+ control={control}
91
+ render={({ field }) => (
92
+ <DatePicker
93
+ {...field}
94
+ placeholder="Select your birthday"
95
+ />
96
+ )}
97
+ />
98
+ <button type="submit">Submit</button>
99
+ </form>
100
+ );
101
+ }
102
+ ```
103
+
104
+ ---
105
+
106
+ ## βš™οΈ Props Reference
107
+
108
+ ### DatePicker
109
+ | Prop | Type | Default | Description |
110
+ | :--- | :--- | :--- | :--- |
111
+ | `value` | `string` | `""` | Date in `YYYY-MM-DD` format. |
112
+ | `onChange` | `function` | `-` | Returns standard synthetic event. |
113
+ | `placeholder` | `string` | `"YYYY/MM/DD"` | Placeholder for the input field. |
114
+ | `disabled` | `boolean` | `false` | Disables all interactions. |
115
+ | `name` | `string` | `-` | Name for form integration. |
116
+
117
+ ### TimePicker
118
+ | Prop | Type | Default | Description |
119
+ | :--- | :--- | :--- | :--- |
120
+ | `value` | `string` | `""` | Time in `HH:mm` (24h) format. |
121
+ | `onChange` | `function` | `-` | Returns standard synthetic event. |
122
+ | `use12h` | `boolean` | `true` | Show AM/PM selector. |
123
+ | `showSeconds`| `boolean` | `false` | Show seconds selector. |
124
+ | `disabled` | `boolean` | `false` | Disables all interactions. |
125
+
126
+ ---
127
+
128
+ ## πŸ’» Tech Stack
129
+ - **React** 18+
130
+ - **Framer Motion** (Animations)
131
+ - **Lucide React** (Icons)
132
+ - **date-fns** (Date logic)
133
+
134
+ ## πŸ“„ License
135
+ MIT Β© [Saurav Luitel](https://github.com/Saurav-627)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sauravluitel/date-time-picker-custom",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "Premium React Date and Time Pickers with dedicated Mobile and Desktop UI",
5
5
  "author": "Antigravity AI",
6
6
  "type": "module",