diff --git a/web/ASC.Web.Components/src/components/date-input/index.js b/web/ASC.Web.Components/src/components/date-input/index.js
index f67f276cee..5bdc904848 100644
--- a/web/ASC.Web.Components/src/components/date-input/index.js
+++ b/web/ASC.Web.Components/src/components/date-input/index.js
@@ -1,53 +1,40 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components';
-import TextInput from '../text-input'
 import DatePicker from "react-datepicker";
-import { Icons } from '../icons'
+import InputBlock from '../input-block';
 import "react-datepicker/dist/react-datepicker.css";
 
-const StyledOuter = styled.div`
-  position: relative;
-  display: inline-block;
+const StyledDatePicker = styled.div`
+  width: 108px;
 `;
 
-const StyledTextInput = styled(TextInput)`
-  padding-right: 32px;
-  width: 106px;
-`;
-
-const StyledIcon = styled(Icons.CalendarEmptyIcon)`
-  position: absolute;
-  top: 6px;
-  right: 6px;
-`;
-
-class CustomInput extends React.Component {
-  render () {
-    return (
-      <StyledOuter onClick={this.props.onClick}>
-        <StyledTextInput type="text" autoComplete="off" maxLength={10} {...this.props}/>
-        <StyledIcon size="medium"/>
-      </StyledOuter>
-    )
-  }
-}
-
 const DateInput = props => {
+  const iconClick = function(){
+    this.onClick();
+  };
   return (
-    <DatePicker
-      customInput={
-        <CustomInput
-          id={props.id}
-          name={props.name}
-          isDisabled={props.disabled}
-          isReadOnly={props.readOnly}
-          hasError={props.hasError}
-          hasWarning={props.hasWarning}
-        />
-      }
-      {...props}
-    />
+    <StyledDatePicker>
+      <DatePicker
+        customInput={
+          <InputBlock 
+            id={props.id}
+            name={props.name}
+            isDisabled={props.disabled}
+            isReadOnly={props.readOnly}
+            hasError={props.hasError}
+            hasWarning={props.hasWarning}
+            iconName={"CalendarEmptyIcon"}
+            isIconFill={true}
+            iconColor={"#A3A9AE"}
+            onIconClick={iconClick}
+            scale={true}
+          />
+        }
+        {...props}
+      />
+    </StyledDatePicker>
+
   );
 }
 
diff --git a/web/ASC.Web.Components/src/components/input-block/index.js b/web/ASC.Web.Components/src/components/input-block/index.js
index 95df84f1c9..70d11e8128 100644
--- a/web/ASC.Web.Components/src/components/input-block/index.js
+++ b/web/ASC.Web.Components/src/components/input-block/index.js
@@ -47,7 +47,7 @@ const StyledInputGroup = styled(CustomInputGroup)`
   }
 `;
 
-const InputBlock = props => {
+const InputBlock = React.forwardRef((props, ref) => {
   const {onChange, value, children, size } = props;
   let iconButtonSize = 0;
 
@@ -107,7 +107,7 @@ const InputBlock = props => {
         }
     </StyledInputGroup>
   );
-}
+});
 
 InputBlock.propTypes = {
 
@@ -132,7 +132,7 @@ InputBlock.propTypes = {
   hasWarning: PropTypes.bool,
   autoComplete: PropTypes.string,
 
-  value: PropTypes.string.isRequired,
+  value: PropTypes.string,
   iconName: PropTypes.string,
   iconColor: PropTypes.string,
   isIconFill: PropTypes.bool,