Web: People: fixed date-picker on "updateUserForm" page, added calendar header

products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/DateField.js

@@ -1,7 +1,13 @@
 import React from "react";
 import isEqual from "lodash/isEqual";
 import { FieldContainer, DatePicker } from "asc-web-components";
+import styled from "styled-components";
 
+const CalendarStyle = styled.div`
+  .calendar_day {
+    line-height: 2em;
+  }
+`;
 class DateField extends React.Component {
   shouldComponentUpdate(nextProps) {
     return !isEqual(this.props, nextProps);
@@ -9,11 +15,12 @@ class DateField extends React.Component {
 
   render() {
     console.log("DateField render");
-
+    
     const {
       isRequired,
       hasError,
       labelText,
+      calendarHeaderContent,
 
       inputName,
       inputValue,
@@ -21,21 +28,25 @@ class DateField extends React.Component {
       inputOnChange,
       inputTabIndex
     } = this.props;
-
+    
     return (
       <FieldContainer
         isRequired={isRequired}
         hasError={hasError}
         labelText={labelText}
       >
-        <DatePicker
-          name={inputName}
-          selectedDate={inputValue}
-          disabled={inputIsDisabled}
-          onChange={inputOnChange}
-          hasError={hasError}
-          tabIndex={inputTabIndex}
-        />
+        <CalendarStyle>
+          <DatePicker
+            name={inputName}
+            selectedDate={inputValue}
+            disabled={inputIsDisabled}
+            onChange={inputOnChange}
+            hasError={hasError}
+            tabIndex={inputTabIndex}
+            displayType="auto"
+            calendarHeaderContent={calendarHeaderContent}
+          />
+        </CalendarStyle>
       </FieldContainer>
     );
   }

products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/createUserForm.js

@@ -378,6 +378,7 @@ class CreateUserForm extends React.Component {
               passwordSettings={settings.passwordSettings}
             />
             <DateField
+              calendarHeaderContent="Select date"
               labelText={`${t("Birthdate")}:`}
               inputName="birthday"
               inputValue={profile.birthday ? new Date(profile.birthday) : undefined}
@@ -397,6 +398,7 @@ class CreateUserForm extends React.Component {
               radioOnChange={this.onInputChange}
             />
             <DateField
+              calendarHeaderContent="Select date"
               labelText={`${t("CustomEmployedSinceDate", { employedSinceDate })}:`}
               inputName="workFrom"
               inputValue={profile.workFrom ? new Date(profile.workFrom) : undefined}

products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/updateUserForm.js

@@ -494,6 +494,7 @@ class UpdateUserForm extends React.Component {
               inputTabIndex={5}
             />
             <DateField
+              calendarHeaderContent="Select date"
               labelText={`${t("Birthdate")}:`}
               inputName="birthday"
               inputValue={profile.birthday ? new Date(profile.birthday) : undefined}
@@ -524,6 +525,7 @@ class UpdateUserForm extends React.Component {
               radioOnChange={this.onUserTypeChange}
             />
             <DateField
+              calendarHeaderContent="Select date"
               labelText={`${t("CustomEmployedSinceDate", { employedSinceDate })}:`}
               inputName="workFrom"
               inputValue={profile.workFrom ? new Date(profile.workFrom) : undefined}