feat(DatePicker): add minDate and maxDate props for date range selection

Author: agjs

package.json

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

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

@@ -32,3 +32,26 @@ export const Default = () => {
     />
   );
 };
+
+export const WithMinAndMaxDate = () => {
+  const [date, setDate] = useState(new Date());
+
+  return (
+    <DatePicker
+      name='datetime'
+      minDate={new Date()}
+      maxDate={new Date(new Date().setDate(new Date().getDate() + 7))}
+      selected={date}
+      timeIntervals={60}
+      showTimeSelect
+      timeCaption='Time'
+      onChange={input => {
+        if (!input.datetime) {
+          return;
+        }
+
+        setDate(input.datetime);
+      }}
+    />
+  );
+};

src/Components/Inputs/DatePicker/index.tsx

@@ -15,7 +15,9 @@ const DatePicker: FC<IDatePickerProps> = props => {
     timeFormat = "HH:mm",
     timeCaption = "time",
     timeIntervals = 15,
-    dateFormat = "MMMM d, yyyy h:mm aa"
+    dateFormat = "MMMM d, yyyy h:mm aa",
+    minDate,
+    maxDate
   } = props;
 
   const handleChange = (date: Date | null) => {
@@ -42,6 +44,8 @@ const DatePicker: FC<IDatePickerProps> = props => {
         timeCaption={timeCaption}
         dateFormat={dateFormat}
         showPopperArrow={false}
+        minDate={minDate}
+        maxDate={maxDate}
       />
     </div>
   );

src/Components/Inputs/DatePicker/style.css

@@ -92,3 +92,7 @@ li.react-datepicker__time-list-item {
 .react-datepicker__input-container input {
   @apply yl-w-full yl-appearance-none yl-rounded-md yl-border-2 yl-border-primary-text-color yl-bg-transparent yl-p-2 yl-text-primary-text-color hover:yl-cursor-pointer hover:yl-border-primary focus:yl-border-primary focus:yl-outline-none focus:yl-ring-transparent !important;
 }
+
+.react-datepicker__day--disabled {
+  @apply yl-cursor-not-allowed yl-text-primary-text-color/40 !important;
+}

src/Components/Inputs/DatePicker/types.ts

@@ -8,4 +8,6 @@ export interface IDatePickerProps extends InputHeaderProps {
   timeCaption?: string;
   dateFormat?: string;
   showTimeSelect?: boolean;
+  minDate?: Date;
+  maxDate?: Date;
 }