Top
DateInput API - API
DateInput API
Props (16)
Callback Props (4)
Styling Props (5)
Methods (3)
Most of the API props for the Calendar component are also valid for the <DateInput />, so please see the docs and Calendar API reference.
Bool|React.Node
default: true
If true, it renders an icon in DateInput input component.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import '@zippytech/react-toolkit/Calendar/index.css'

const clearIcon = <svg fill="#ff0000" height="18" viewBox="0 0 24 24" width="18">
  <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
  <path d="M0 0h24v24H0z" fill="none"/>
</svg>

export default () => <DateInput
  dateFormat="DD-MM-YYYY"
  clearIcon={clearIcon}
/>
Bool
default: true
Whether to collapse dropdown when a date is selected.
The dropdown will collapse only when the Enter key is pressed!
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/Calendar/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      collapseOnDateClick: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.collapseOnDateClick}
          onChange={(collapseOnDateClick) => this.setState({ collapseOnDateClick })}
        >
          Collapse on date click
        </CheckBox>
      </div>
      <DateInput
        dateFormat="DD-MM-YYYY"
        collapseOnDateClick={this.state.collapseOnDateClick}
      />
  </div>
  }
}

export default () => <App />
String|HTMLElement|Fn(node)
default: undefined
Specifies the constrain region for the calendar overlay.
The constrainTo can be a string CSS selector, an HTMLElement or a Function that is called with the DOM node of the <DateInput /> as the first argument. If it is a Function, it needs to return an HTMLElement.
When a string CSS selector is specified, the calendar is constrained to the first matching parent.
For constrainTo to has effect, relativeToViewport must be true.
The <DateInput /> overlay is smartly positioned to the top or to the bottom, depending on the constrain region and the available space.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      relativeToViewport: true,
      text: "25-10-2017"
    }
  }

  render() {
    return <div style={{ height: 1500 }}>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.relativeToViewport}
          onChange={(relativeToViewport) => this.setState({ relativeToViewport })}
        >
          Relative to viewport
        </CheckBox>
      </div>
      <p>
        Scroll the content to see the difference.
      </p>
      <div
        style={{
          width: '100%',
          height: 350,
          border: '1px dotted blue'
        }}
      >
        <DateInput
          dateFormat="DD-MM-YYYY"
          style={{
            position: 'absolute',
            top: 410,
            left: 50
          }}
          text={this.state.text}
          relativeToViewport={true}
          constrainTo={node => node.parentNode}
          onTextChange={(text) => this.setState({ text })}
          relativeToViewport={this.state.relativeToViewport}
        />
      </div>
    </div>
  }
}

export default () => <App />
String
default: "YYYY-MM-DD"
Specifies format for date text. For more information see moment format.
dateFormat prop is marked as required for DateInput!
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

const dataSource = ['YYYY-MM-DD', 'YYYY-DD-MM', 'DD-YYYY-MM', 'MM-YYYY-DD', 'DD-MM-YYYY', 'MM-DD-YYYY'].map((format) => {
  return {
    id: format,
    label: 'Format: ' + '"' + format + '"'
  }
})

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      date: null,
      dateFormat: 'DD-MM-YYYY'
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Date format: {' '}
        <ComboBox
          inlineFlex
          collapseOnSelect
          changeValueOnNavigation
          style={{ width: 220 }}
          dataSource={dataSource}
          value={this.state.dateFormat}
          onChange={(value) => this.setState({ dateFormat: value }) }
        />
      </div>
      <code>dateFormat={this.state.dateFormat}: {this.state.date}</code><br />
      <DateInput
        dateFormat={this.state.dateFormat}
        onChange={date => this.setState({ date })}
      />
    </div>
  }
}

export default () => <App />
Bool
default: false
Whether the DateInput dropdown its rendered expanded.
This is an uncontrolled prop!
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import '@zippytech/react-toolkit/Calendar/index.css'

export default () => <DateInput
  dateFormat="DD-MM-YYYY"
  defaultExpanded={true}
/>
Bool
default: false
Whether the DateInput dropdown is expanded.
This is a controlled prop! It should be used with onExpandChange.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import '@zippytech/react-toolkit/Calendar/index.css'

const expandedStyle = {
  fontWidth: 'bold',
  color: 'green'
}

const collapsedStyle = {
  fontWidth: 'bold',
  color: 'gray'
}

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      expanded: false
    }
  }

  render() {
    return <div>
      <p>
        The current state of dropdown is: {
          this.state.expanded ? <span style={expandedStyle}>expanded</span> :
          <span style={collapsedStyle}>collapsed</span>
        }.
      </p>
      <DateInput
        dateFormat="DD-MM-YYYY"
        expanded={this.state.expanded}
        onExpandChange={(expanded) => this.setState({ expanded })}
      />
  </div>
  }
}

export default () => <App />
Bool
default: true
Whether to expand dropdown list when it receives focus.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      expandOnFocus: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.expandOnFocus}
          onChange={(expandOnFocus) => this.setState({ expandOnFocus })}
        >
          Expand on focus
        </CheckBox>
      </div>
    <DateInput dateFormat="DD-MM-YYYY" expandOnFocus={this.state.expandOnFocus} />
  </div>
  }
}

export default () => <App />
Bool
default: false
If true, it renders an input field which validate dates. Which means that only dates that are conform to the dateFormat can be introduced into the input field.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      forceValidDate: false,
      text: "25-10-2017"
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.forceValidDate}
          onChange={(forceValidDate) => this.setState({ forceValidDate })}
        >
          Force valid date
        </CheckBox>
      </div>
    <DateInput
      dateFormat="DD-MM-YYYY"
      text={this.state.text}
      onTextChange={(text) => this.setState({ text })}
      forceValidDate={this.state.forceValidDate}
    />
  </div>
  }
}

export default () => <App />
Date|String|Number|Moment
default: undefined
Defines max allowed date. Asociated with minDate.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import '@zippytech/react-toolkit/Calendar/index.css'

const MINUTE = 1000 * 60
const DAY = MINUTE * 60 * 24
const TEN_DAYS = DAY * 10

const maxDate = new Date(Date.now() + TEN_DAYS)

export default () => <DateInput
  maxDate={maxDate}
/>
Date|String|Number|Moment
default: undefined
Defines min allowed date. Asociated with maxDate.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import '@zippytech/react-toolkit/Calendar/index.css'

const MINUTE = 1000 * 60
const DAY = MINUTE * 60 * 24
const TEN_DAYS = DAY * 10

const minDate = new Date(Date.now() - TEN_DAYS)

export default () => <DateInput
  minDate={minDate}
/>
    
String
default: undefined
Specifies a placeholder text for DateInput input component.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import '@zippytech/react-toolkit/Calendar/index.css'

export default () =>  <DateInput
  dateFormat="DD-MM-YYYY"
  placeholder="Please, select a date!"
/>
Bool
default: true
Whether <DateInput /> dropdown should have position fixed.
Useful when <DateInput /> is rendered inside a element with overflow hidden/scroll.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      relativeToViewport: true
    }
  }

  render() {
    return <div style={{ overflow: 'hidden' }}>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.relativeToViewport}
          onChange={(relativeToViewport) => this.setState({ relativeToViewport })}
        >
          Relative to viewport
        </CheckBox>
      </div>
    <DateInput
      dateFormat="DD-MM-YYYY"
      relativeToViewport={this.state.relativeToViewport}
    />
  </div>
  }
}

export default () => <App />
String
default: undefined
Specifies a text for DateInput input component.
This is a controlled prop! It should be used with onTextChange.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      text: 'Please, select a date!'
    }
  }

  render() {
    return <DateInput
      dateFormat="DD-MM-YYYY"
      text={this.state.text}
      onTextChange={(text) => this.setState({ text })}
    />
  }
}

export default () => <App />
Bool
default: true
Whether to change date when a day is clicked inside dropdown.
When false, it changes only when okButton is clicked.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      updateOnDateClick: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.updateOnDateClick}
          onChange={(updateOnDateClick) => this.setState({ updateOnDateClick })}
        >
          Update on date click
        </CheckBox>
      </div>
    <DateInput
      dateFormat="DD-MM-YYYY"
      updateOnDateClick={this.state.updateOnDateClick}
    />
  </div>
  }
}

export default () => <App />
bool
default: true
Whether to change the value from the clock input on mouse wheel.
This prop works with showClock set to true or the dateFormat includes 'hh:mm:ss' in its format date text. For more details, see Momentjs format.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      updateOnWheel: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.updateOnWheel}
          onChange={(updateOnWheel) => this.setState({ updateOnWheel })}
        >
          Update on wheel
        </CheckBox>
      </div>
    <DateInput
      showClock
      dateFormat="DD-MM-YYYY hh:mm:ss"
      updateOnWheel={this.state.updateOnWheel}
    />
  </div>
  }
}

export default () => <App />
Date|String|Number|Moment
default: undefined
Specifies the value of date.
This is a controlled prop, react will change this with onChange.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { value: null }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>Current value is: {this.state.value}.</div>
      <DateInput
        dateFormat="DD-MM-YYYY"
        onChange={(value) => {
          this.setState({ value })
        }}
        value={this.state.value}
      />
    </div>
  }
}

export default () => <App />
Most of the API props for the Calendar component are also valid for the <DateInput />, so please see the docs and Calendar API reference.
Fn()
default: undefined
Called when dropdown is collapsed.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import '@zippytech/react-toolkit/Calendar/index.css'

const expandedStyle = {
  fontWidth: 'bold',
  color: 'green'
}

const collapsedStyle = {
  fontWidth: 'bold',
  color: 'gray'
}

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      expanded: false
    }
  }

  render() {
    return <div>
      <p>
        The current state of dropdown is: {
          this.state.expanded ? <span style={expandedStyle}>expanded</span> :
          <span style={collapsedStyle}>collapsed</span>
        }.
      </p>
      <DateInput
        dateFormat="DD-MM-YYYY"
        onExpand={(expanded) => this.setState({ expanded: true })}
        onCollapse={(expanded) => this.setState({ expanded: false })}
      />
  </div>
  }
}

export default () => <App />
Fn()
default: undefined
Called when dropdown is expanded.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import '@zippytech/react-toolkit/Calendar/index.css'

const expandedStyle = {
  fontWidth: 'bold',
  color: 'green'
}

const collapsedStyle = {
  fontWidth: 'bold',
  color: 'gray'
}

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      expanded: false
    }
  }

  render() {
    return <div>
      <p>
        The current state of dropdown is: {
          this.state.expanded ? <span style={expandedStyle}>expanded</span> :
          <span style={collapsedStyle}>collapsed</span>
        }.
      </p>
      <DateInput
        dateFormat="DD-MM-YYYY"
        onExpand={(expanded) => this.setState({ expanded: true })}
        onCollapse={(expanded) => this.setState({ expanded: false })}
      />
  </div>
  }
}

export default () => <App />
Bool
default: false
Called when dropdown is expanded.
It should be used with expanded.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import '@zippytech/react-toolkit/Calendar/index.css'

const expandedStyle = {
  fontWidth: 'bold',
  color: 'green'
}

const collapsedStyle = {
  fontWidth: 'bold',
  color: 'gray'
}

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      expanded: false
    }
  }

  render() {
    return <div>
      <p>
        The current state of dropdown is: {
          this.state.expanded ? <span style={expandedStyle}>expanded</span> :
          <span style={collapsedStyle}>collapsed</span>
        }.
      </p>
      <DateInput
        dateFormat="DD-MM-YYYY"
        expanded={this.state.expanded}
        onExpandChange={(expanded) => this.setState({ expanded })}
      />
  </div>
  }
}

export default () => <App />
Fn()
default: undefined
Called when DateInput input text is changed.
It should be used with text prop.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      text: 'Please, select a date!'
    }
  }

  render() {
    return <DateInput
      dateFormat="DD-MM-YYYY"
      text={this.state.text}
      onTextChange={(text) => this.setState({ text })}
    />
  }
}

export default () => <App />
Most of the API props for the Calendar component are also valid for the <DateInput />, so please see the docs and Calendar API reference.
Object
default: undefined
Specifies a className for the DateInput component.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import '@zippytech/react-toolkit/Calendar/index.css'

export default () => <DateInput
  dateFormat="DD-MM-YYYY"
  className="date-input"
/>
Object
default: undefined
Specifies a className for the DateInput input component when its expanded.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import '@zippytech/react-toolkit/Calendar/index.css'

export default () => <DateInput
  dateFormat="DD-MM-YYYY"
  expandedClassName="date-input-expanded"
/>
Object
default: undefined
Specifies a className for the DateInput input component when its focused.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import '@zippytech/react-toolkit/Calendar/index.css'

export default () => <DateInput
  dateFormat="DD-MM-YYYY"
  focusedClassName="date-input-focus"
/>
Object
default: undefined
Specifies a className for the DateInput component when the date from input is invalid.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import '@zippytech/react-toolkit/Calendar/index.css'

export default () => <div>
  <p>If the input date is invalid, the border would be red.</p>
  <DateInput
    dateFormat="DD-MM-YYYY"
    invalidClassName="date-input-invalid"
  />
</div>
Object
default: undefined
Specifies a style for the DateInput component.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import '@zippytech/react-toolkit/Calendar/index.css'

export default () => <DateInput
  dateFormat="DD-MM-YYYY"
  style={{
    border: '1px solid green',
    borderRadius: 3
  }}
/>
Most of the API methods for the Calendar component are also valid for the <DateInput />, so please see the docs and Calendar API reference.
Fn()
undefined
When this method is called, it returns the current value of the DateInput input.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      value: null,
      valueToDisplay: null
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        For the value to be displayed, select a value and then press the{' '}
        <Button
          onClick={() => this.setState({ valueToDisplay: this.picker.getValue() })}
        >
          getValue
        </Button>{' '}
        button.
      </div>
      {this.state.valueToDisplay && <div>The current value is: {this.state.value}</div>}
    <DateInput
      ref={p => this.picker = p}
      dateFormat="DD-MM-YYYY"
      value={this.state.value}
      onChange={value => this.setState({ value })}
    />
  </div>
  }
}

export default () => <App />
When this method is called, it tells if the month-decade view is visible or not.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import Button from '@zippytech/react-toolkit/Button'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      visible: null,
      expanded: false
    }
  }

  render() {
    return <div>
      <p>
        Check if month-decade view is visible or not.{' '}
        <Button
          onClick={() => this.setState({ visible: this.picker.isMonthDecadeViewVisible() })}
        >
         Is month-decade view visible?
        </Button>
      </p>
      <p>
        The current state is: {this.state.visible ?
          <span style={{ fontWidth: 'bold', color: 'green' }}>visible</span> :
          <span style={{ fontWidth: 'bold', color: 'gray' }}>hidden</span>
        }.
      </p>
      <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.expanded}
          onChange={expanded => this.setState({ expanded })}
        >
          Expand the dropdown, toggle the navBar and then check the visibility of month-decade view.
        </CheckBox>
      </div>
      <DateInput
        ref={p => this.picker = p}
        dateFormat="DD-MM-YYYY"
        expanded={this.state.expanded}
      />
    </div>
  </div>
  }
}

export default () => <App />
Fn()
undefined
When this method is called, it tells if the date is valid or not.
import React from 'react'
import DateInput from '@zippytech/react-toolkit/DateInput'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      date: null,
      valid: null
    }
  }

  render() {
    return <div>
      <p>
        Check if it is valid or not.
      </p>
      <p>
        The current date is: {this.state.valid ?
          <span style={{ fontWidth: 'bold', color: 'green' }}>valid</span> :
          <span style={{ fontWidth: 'bold', color: 'gray' }}>invalid</span>
        }.
      </p>
      <div>
      <DateInput
        ref={p => this.picker = p}
        dateFormat="DD-MM-YYYY"
        date={this.state.date}
        onChange={(date) => this.setState({ date })}
      />{' '}
      <Button
        onClick={() => this.setState({ valid: this.picker.isValid() })}
      >
        Is valid?
      </Button>
    </div>
  </div>
  }
}

export default () => <App />