web: Fix DateInput component stories

web/ASC.Web.Components/example/stories/input/date/README.md

@@ -14,4 +14,16 @@ import { DateInput } from 'asc-web-components';
 
 #### Properties
 
-See InputText properties + https://reactdatepicker.com/
+https://reactdatepicker.com/
+
+| Props        | Type     | Required | Values | Default | Description                             |
+| ------------ | -------- | :------: | ------ | ------- | --------------------------------------- |
+| `id`         | `string` |    -     | -      | -       | Used as HTML `id` property              |
+| `name`       | `string` |    -     | -      | -       | Used as HTML `name` property            |
+| `disabled`   | `bool`   |    -     | -      | -       | Used as HTML `disabled` property        |
+| `readOnly`   | `bool`   |    -     | -      | -       | Used as HTML `readOnly` property        |
+| `selected`   | `date`   |    -     | -      | -       | Selected date value                     |
+| `onChange`   | `func`   |    -     | -      | -       | OnChange event                          |
+| `dateFormat` | `string` |    -     | -      | -       | Date format string                      |
+| `hasError`   | `bool`   |    -     | -      | -       | Indicates the input field has an error  |
+| `hasWarning` | `bool`   |    -     | -      | -       | Indicates the input field has a warning |

web/ASC.Web.Components/example/stories/input/date/index.stories.js

@@ -2,24 +2,32 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { DateValue } from 'react-values'
+import { withKnobs, boolean, text } from '@storybook/addon-knobs/react';
 import withReadme from 'storybook-readme/with-readme';
 import Readme from './README.md';
 import { DateInput } from 'asc-web-components';
 import Section from '../../../.storybook/decorators/section';
 
 storiesOf('Components|Input', module)
+  .addDecorator(withKnobs)
   .addDecorator(withReadme(Readme))
   .add('date', () => (
     <Section>
       <DateValue>
         {({ value, set }) => (
           <DateInput
+            id={text('id', '')}
+            name={text('name', '')}  
+            disabled={boolean('disabled', false)}
+            readOnly={boolean('readOnly', false)}
             selected={value}
-            dateFormat="dd.MM.yyyy"
             onChange={date => {
               action('onChange')(date);
               set(date);
             }}
+            dateFormat={text('dateFormat', 'dd.MM.yyyy')}
+            hasError={boolean('hasError', false)}
+            hasWarning={boolean('hasWarning', false)}
           />
         )}
       </DateValue>

web/ASC.Web.Components/src/components/date-input/index.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import styled from 'styled-components';
 import TextInput from '../text-input'
 import DatePicker from "react-datepicker";
@@ -25,7 +26,7 @@ class CustomInput extends React.Component {
   render () {
     return (
       <StyledOuter onClick={this.props.onClick}>
-        <StyledTextInput type="text" {...this.props}/>
+        <StyledTextInput type="text" autoComplete="off" maxLength={10} {...this.props}/>
         <StyledIcon size="medium"/>
       </StyledOuter>
     )
@@ -35,12 +36,36 @@ class CustomInput extends React.Component {
 const DateInput = props => {
   return (
     <DatePicker
-      customInput={<CustomInput/>}
-      selected={props.selected}
-      onChange={props.onChange}
+      customInput={
+        <CustomInput
+          id={props.id}
+          name={props.name}
+          isDisabled={props.disabled}
+          isReadOnly={props.readOnly}
+          hasError={props.hasError}
+          hasWarning={props.hasWarning}
+        />
+      }
       {...props}
     />
   );
 }
 
+DateInput.propTypes = {
+  id: PropTypes.string,
+  name: PropTypes.string,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  selected: PropTypes.instanceOf(Date),
+  onChange: PropTypes.func,
+  dateFormat: PropTypes.string,
+  hasError: PropTypes.bool,
+  hasWarning: PropTypes.bool
+}
+
+DateInput.defaultProps = {
+  selected: null,
+  dateFormat: "dd.MM.yyyy"
+}
+
 export default DateInput