rewrite datepicker, v0.1.18

src/components/DatePicker.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
         docs: {
             description: {
                 component:
-                    'Date selection field with InputField-compatible API, supporting date/time/datetime-local values, size/layout variants, and validation state.',
+                    'In-house date/time selection field with InputField-compatible API. Uses a custom popup (not native browser pickers) and supports date, time, and date-time modes.',
             },
         },
     },
@@ -27,10 +27,10 @@ const meta = {
             table: { type: { summary: 'string' } },
         },
         type: {
-            description: 'Native date input type.',
-            options: ['date', 'datetime-local', 'time'],
+            description: 'DatePicker mode.',
+            options: ['date', 'date-time', 'time'],
             control: 'inline-radio',
-            table: { type: { summary: "'date' | 'datetime-local' | 'time'" } },
+            table: { type: { summary: "'date' | 'date-time' | 'time'" } },
         },
         size: {
             description: 'Input size.',
@@ -55,6 +55,22 @@ const meta = {
             control: 'text',
             table: { type: { summary: 'string' } },
         },
+        format: {
+            description:
+                'Optional input/output format. Supported tokens: `dd`, `mm`, `yyyy`, `HH` (for example `dd/mm/yyyy HH:mm`).',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        min: {
+            description: 'Optional minimum value in the same format as `value`.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
+        max: {
+            description: 'Optional maximum value in the same format as `value`.',
+            control: 'text',
+            table: { type: { summary: 'string' } },
+        },
         name: {
             description: 'Native input `name` attribute.',
             control: 'text',
@@ -108,7 +124,7 @@ const meta = {
     },
     args: {
         label: 'Schedule at',
-        type: 'datetime-local',
+        type: 'date-time',
         value: '',
         size: 'md',
         width: 'md',
@@ -125,7 +141,7 @@ export const DateOnly: Story = {
         label: 'Publish date',
     },
     render: function DateOnlyRender(args) {
-        const [value, setValue] = useState('2031-05-20');
+        const [value, setValue] = useState('2031/05/20');
         return (
             <DatePicker
                 {...args}
@@ -141,11 +157,11 @@ export const DateOnly: Story = {
 
 export const DateTime: Story = {
     args: {
-        type: 'datetime-local',
+        type: 'date-time',
         label: 'Schedule at',
     },
     render: function DateTimeRender(args) {
-        const [value, setValue] = useState('2031-05-20T14:30');
+        const [value, setValue] = useState('2031/05/20 14:30');
         return (
             <DatePicker
                 {...args}
@@ -185,7 +201,7 @@ export const TimeOnlyInline: Story = {
 export const ErrorState: Story = {
     name: 'Error',
     args: {
-        type: 'datetime-local',
+        type: 'date-time',
         label: 'Schedule at',
         value: '',
         error: 'Pick a valid future date and time',
@@ -194,20 +210,20 @@ export const ErrorState: Story = {
 
 export const Disabled: Story = {
     args: {
-        type: 'datetime-local',
+        type: 'date-time',
         label: 'Published at',
-        value: '2031-05-20T14:30',
+        value: '2031/05/20 14:30',
         disabled: true,
     },
 };
 
 export const SizeMatrix: Story = {
     args: {
-        type: 'datetime-local',
+        type: 'date-time',
         label: 'Schedule at',
     },
     render: function SizeMatrixRender(args) {
-        const [value, setValue] = useState('2031-05-20T14:30');
+        const [value, setValue] = useState('2031/05/20 14:30');
         return (
             <div className="grid grid-cols-1 gap-3">
                 <DatePicker
@@ -239,3 +255,26 @@ export const SizeMatrix: Story = {
         );
     },
 };
+
+export const CustomFormatWithRange: Story = {
+    args: {
+        type: 'date-time',
+        label: 'Starts at',
+        format: 'dd/mm/yyyy HH:mm',
+        min: '10/03/2026 09:00',
+        max: '24/03/2026 18:30',
+    },
+    render: function CustomFormatWithRangeRender(args) {
+        const [value, setValue] = useState('22/03/2026 14:30');
+        return (
+            <DatePicker
+                {...args}
+                value={value}
+                onChange={(event) => {
+                    setValue(event.target.value);
+                    args.onChange?.(event);
+                }}
+            />
+        );
+    },
+};