FIX | fix date_field valid

src/components/Fields/DateField.scss

@@ -65,10 +65,13 @@
 
 .ant-calendar-date:hover {
   background: none !important;
+  color: rgba(158, 39, 67, 1);
 }
 
 .ant-calendar-today .ant-calendar-date {
-  color: #fff;
+  border-radius: 50%;
+  border-color: rgba(158, 39, 67, 1);
+  // color: rgba(158, 39, 67, 1);
   font-weight: normal;
 }
 

src/components/Fields/DateField.tsx

@@ -1,12 +1,16 @@
 import React, { FC } from "react";
 import { DatePicker } from "antd";
 import moment from "moment";
-import ukUa from 'antd/lib/locale/uk_UA'
-import CalendarSVG from '@/assets/img/calendarIcon.svg'
-import 'moment/locale/uk'
-import './DateField.scss'
+import ukUa from "antd/lib/locale/uk_UA";
+import CalendarSVG from "@/assets/img/calendarIcon.svg";
+import "moment/locale/uk";
+import "./DateField.scss";
 
-moment.defineLocale('uk', { monthsShort: moment.months().map(month => month.charAt(0).toUpperCase() + month.slice(1)) })
+moment.defineLocale("uk", {
+  monthsShort: moment
+    .months()
+    .map((month) => month.charAt(0).toUpperCase() + month.slice(1)),
+});
 
 interface IProps {
   label: string;
@@ -14,8 +18,8 @@ interface IProps {
   placeholder?: string;
   meta?: { touched?: boolean; error?: string };
   onChange: (date: string) => void;
-  disabledDate?: () => boolean
-  onOpenChange?: (status: boolean) => void
+  disabledDate?: (current: any) => boolean;
+  onOpenChange?: (status: boolean) => void;
 }
 
 export const DateField: FC<IProps> = ({
@@ -25,7 +29,7 @@ export const DateField: FC<IProps> = ({
   placeholder,
   disabledDate,
   onChange,
-  onOpenChange
+  onOpenChange,
 }) => {
   return (
     <div className="profile__data_card">
@@ -35,17 +39,20 @@ export const DateField: FC<IProps> = ({
         allowClear={true}
         value={moment(value).isValid() ? moment(value) : null}
         disabledDate={disabledDate}
-        onOpenChange={onOpenChange ? onOpenChange : () => { }}
+        onOpenChange={onOpenChange ? onOpenChange : () => {}}
         locale={ukUa}
         placeholder={placeholder}
-        suffixIcon={<img src={CalendarSVG}/>}
+        suffixIcon={<img src={CalendarSVG} />}
         style={{ width: "100%" }}
-        onChange={(_, dateString) => onChange(dateString)}
+        // onChange={(_, dateString) => onChange(dateString)}
+        onChange={(date, _) => onChange(moment(date).format())}
         format="DD-MM-YYYY"
         showToday={false}
       />
 
-      {meta?.error && <span className="form__form-group-error">{meta?.error}</span>}
+      {meta?.error && (
+        <span className="form__form-group-error">{meta?.error}</span>
+      )}
     </div>
   );
 };

src/containers/Profile/components/form-user/form-user.component.tsx

@@ -11,6 +11,7 @@ import {
 } from "@/shared";
 import { useProfileForm } from "./hooks";
 import { GeneratePassword } from "../../atoms/generatePassword";
+import moment from "moment";
 
 interface IProps {
   profile: IUser;
@@ -36,6 +37,10 @@ export const FormUser: FC<IProps> = ({
   } = useProfileForm(profile);
   const [isFocus, setIsFocus] = useState(false);
 
+  const disabledBirthDates = (current) => {
+    return moment().add(0, "days") <= current;
+  };
+
   return (
     <form
       onClick={() => setIsFocus(false)}
@@ -85,6 +90,7 @@ export const FormUser: FC<IProps> = ({
               <DateField
                 label={"Дата народження"}
                 placeholder={"Дата народження"}
+                disabledDate={disabledBirthDates}
                 onChange={onChange}
                 value={value}
               />