feat(DatePicker): update value prop and add error handling

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.198",
+  "version": "1.0.199",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {

src/Components/Inputs/Common/InputHeader/types.ts

@@ -1,6 +1,6 @@
 export interface InputHeaderProps {
   name?: string;
-  value?: string | number;
+  value?: string | number | Date;
   max?: number;
   label?: string;
   hint?: string | React.ReactNode;

src/Components/Inputs/DatePicker/DatePicker.stories.tsx

@@ -19,7 +19,7 @@ export const Default = () => {
   return (
     <DatePicker
       name='datetime'
-      selected={date}
+      value={date}
       showTimeSelect
       timeCaption='Time'
       onChange={input => {
@@ -41,7 +41,7 @@ export const WithMinAndMaxDate = () => {
       name='datetime'
       minDate={new Date()}
       maxDate={new Date(new Date().setDate(new Date().getDate() + 7))}
-      selected={date}
+      value={date}
       timeIntervals={60}
       showTimeSelect
       timeCaption='Time'
@@ -55,3 +55,29 @@ export const WithMinAndMaxDate = () => {
     />
   );
 };
+
+export const WithAHeaderAndError = () => {
+  const [date, setDate] = useState(new Date());
+
+  return (
+    <DatePicker
+      name='datetime'
+      label='Select a date and time'
+      required
+      minDate={new Date()}
+      maxDate={new Date(new Date().setDate(new Date().getDate() + 7))}
+      value={date}
+      timeIntervals={60}
+      showTimeSelect
+      timeCaption='Time'
+      error='Invalid date and time'
+      onChange={input => {
+        if (!input.datetime) {
+          return;
+        }
+
+        setDate(input.datetime);
+      }}
+    />
+  );
+};

src/Components/Inputs/DatePicker/index.tsx

@@ -2,13 +2,15 @@ import { FC } from "react";
 import BaseDatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 
+import InputError from "../Common/InputError";
 import InputHeader from "../Common/InputHeader";
 import "./style.css";
 import { IDatePickerProps } from "./types";
 
 const DatePicker: FC<IDatePickerProps> = props => {
   const {
-    selected = undefined,
+    value = undefined,
+    required,
     onChange,
     name,
     showTimeSelect,
@@ -17,7 +19,8 @@ const DatePicker: FC<IDatePickerProps> = props => {
     timeIntervals = 15,
     dateFormat = "MMMM d, yyyy h:mm aa",
     minDate,
-    maxDate
+    maxDate,
+    error
   } = props;
 
   const handleChange = (date: Date | null) => {
@@ -36,7 +39,8 @@ const DatePicker: FC<IDatePickerProps> = props => {
     <div className='yl-bg-primary-background-color'>
       <InputHeader {...props} />
       <BaseDatePicker
-        selected={selected}
+        selected={value}
+        required={required}
         onChange={handleChange}
         showTimeSelect={showTimeSelect}
         timeFormat={timeFormat}
@@ -47,6 +51,7 @@ const DatePicker: FC<IDatePickerProps> = props => {
         minDate={minDate}
         maxDate={maxDate}
       />
+      {error && <InputError error={error} />}
     </div>
   );
 };

src/Components/Inputs/DatePicker/types.ts

@@ -1,7 +1,9 @@
-import { InputHeaderProps } from "../Common/InputHeader/types";
-
-export interface IDatePickerProps extends InputHeaderProps {
-  selected?: Date;
+export interface IDatePickerProps {
+  name?: string;
+  label?: string;
+  value?: Date;
+  selected?: Date | null;
+  required?: boolean;
   onChange: (value: Record<string, Date | null>) => void;
   timeFormat?: string;
   timeIntervals?: number;
@@ -10,4 +12,5 @@ export interface IDatePickerProps extends InputHeaderProps {
   showTimeSelect?: boolean;
   minDate?: Date;
   maxDate?: Date;
+  error?: string | string[] | Record<string, string>;
 }