DatePicker

A date picker implemented with Airbnb's react-dates library. Any props available in the react-dates library are available in our wrapped component.

Import Syntax

xxxxxxxxxx
 
import DatePicker, { DateRangePicker } from 'calcite-react/DatePicker'

Basic Usage

Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.

 
() => {
  class DatePickerExample extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        date: null,
        datePickerFocused: false,
      }
      this.onDateChange = this.onDateChange.bind(this)
      this.onFocusChange = this.onFocusChange.bind(this)
    }
​
    onDateChange(date) {
      this.setState({
        date,
      })
    }
​
    onFocusChange({ focused }) {
      this.setState({
        datePickerFocused: focused,
      })
    }
​
    render() {
      return (
        <DatePicker
          id="basicDatePicker"
          date={this.state.date}
          onDateChange={this.onDateChange}
          focused={this.state.datePickerFocused}
          onFocusChange={this.onFocusChange}
          numberOfMonths={1}
        />
      )
    }
  }
​
  return <DatePickerExample />
}

Basic Usage (with Formik)

Select your birthday:

Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.

{
  "birthday": null
}

 
() => {
  class DatePickerExample extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        date: null,
        datePickerFocused: false,
      }
      this.formValues = {
        birthday: null,
      }
​
      this.onDateChange = this.onDateChange.bind(this)
      this.onFocusChange = this.onFocusChange.bind(this)
      this.onSubmit = this.onSubmit.bind(this)
      this.onValidate = this.onValidate.bind(this)
    }
​
    onDateChange(date) {
      this.setState({
        date,
      })
    }
​
    onFocusChange({ focused }) {
      this.setState({
        datePickerFocused: focused,
      })
    }
​
    onSubmit(values, actions) {
      setTimeout(() => {
        console.log(values)
        actions.setSubmitting(false)
      }, 1000)
    }
​
    onValidate(values) {
      const errors = {}
      if (!values.birthday) {
        errors.birthday = 'You must have a birthday 🤨'
      }
​
      return errors
    }
​
    render() {
      return (
        <Formik
          initialValues={this.formValues}
          validate={this.onValidate}
          onSubmit={this.onSubmit}
        >
          {({ values, errors, touched, handleSubmit, isSubmitting }) => (
            <Form onSubmit={handleSubmit}>
              {/* birthday */}
​
              <FormControl
                success={touched.birthday && !errors.birthday ? true : false}
                error={touched.birthday && errors.birthday ? true : false}
              >
                <FormControlLabel>Select your birthday:</FormControlLabel>
                <Field
                  component={DatePicker}
                  name="birthday"
                  id="basicFormikDatePicker"
                  date={this.state.date}
                  onDateChange={this.onDateChange}
                  focused={this.state.datePickerFocused}
                  onFocusChange={this.onFocusChange}
                />
                <FormHelperText>
                  {(touched.birthday && errors.birthday) || null}
                </FormHelperText>
              </FormControl>
​
              <FormControl>
                <Button type="submit" disabled={isSubmitting}>
                  {isSubmitting ? 'Submitting.......' : 'Submit'}
                </Button>
              </FormControl>
              <pre>{JSON.stringify(values, null, 2)}</pre>
            </Form>
          )}
        </Formik>
      )
    }
  }
  return <DatePickerExample />
}

Date Range

Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.

Navigate backward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.

 
() => {
  class DatePickerExample extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        startDate: null,
        endDate: null,
        focusedInput: null,
      }
      this.onDatesChange = this.onDatesChange.bind(this)
      this.onFocusChange = this.onFocusChange.bind(this)
    }
​
    onDatesChange({ startDate, endDate }) {
      this.setState({
        startDate,
        endDate,
      })
    }
​
    onFocusChange(focusedInput) {
      this.setState({
        focusedInput,
      })
    }
​
    render() {
      return (
        <div>
          <DateRangePicker
            startDate={this.state.startDate}
            startDateId="basicStartDate"
            endDate={this.state.endDate}
            endDateId="basicEndDate"
            onDatesChange={this.onDatesChange}
            focusedInput={this.state.focusedInput}
            onFocusChange={this.onFocusChange}
          />
        </div>
      )
    }
  }
​
  return <DatePickerExample />
}

Date Range (with Formik)

Booking Dates:

Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.

Navigate backward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.

{
  "booking": {
    "startDate": null,
    "endDate": null
  }
}

 
() => {
  class DatePickerExample extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        startDate: null,
        endDate: null,
        focusedInput: null,
      }
      this.formValues = {
        booking: { startDate: null, endDate: null },
      }
​
      this.onDatesChange = this.onDatesChange.bind(this)
      this.onFocusChange = this.onFocusChange.bind(this)
      this.onSubmit = this.onSubmit.bind(this)
      this.onValidate = this.onValidate.bind(this)
    }
​
    onDatesChange({ startDate, endDate }) {
      this.setState({
        startDate,
        endDate,
      })
    }
​
    onFocusChange(focusedInput) {
      this.setState({
        focusedInput,
      })
    }
​
    onSubmit(values, actions) {
      setTimeout(() => {
        console.log(values)
        actions.setSubmitting(false)
      }, 1000)
    }
​
    onValidate(values) {
      const errors = {}
      if (
        !values.booking ||
        !values.booking.startDate ||
        !values.booking.endDate
      ) {
        errors.booking = 'This is required!'
      }
​
      return errors
    }
​
    render() {
      return (
        <Formik
          initialValues={this.formValues}
          validate={this.onValidate}
          onSubmit={this.onSubmit}
        >
          {({ values, errors, touched, handleSubmit, isSubmitting }) => (
            <Form onSubmit={handleSubmit}>
              {/* booking */}
​
              <FormControl
                success={touched.booking && !errors.booking ? true : false}
                error={touched.booking && errors.booking ? true : false}
              >
                <FormControlLabel>Booking Dates:</FormControlLabel>
                <Field
                  component={DateRangePicker}
                  name="booking"
                  startDate={this.state.startDate}
                  startDateId="formikStartDate"
                  endDate={this.state.endDate}
                  endDateId="formikEndDate"
                  onDatesChange={this.onDatesChange}
                  focusedInput={this.state.focusedInput}
                  onFocusChange={this.onFocusChange}
                />
                <FormHelperText>
                  {(touched.booking && errors.booking) || null}
                </FormHelperText>
              </FormControl>
​
              <FormControl>
                <Button type="submit" disabled={isSubmitting}>
                  {isSubmitting ? 'Submitting.......' : 'Submit'}
                </Button>
              </FormControl>
              <pre>{JSON.stringify(values, null, 2)}</pre>
            </Form>
          )}
        </Formik>
      )
    }
  }
​
  return <DatePickerExample />
}

Append to Body

Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.

 
() => {
  class DatePickerExample extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        date: null,
        datePickerFocused: false,
      }
      this.onDateChange = this.onDateChange.bind(this)
      this.onFocusChange = this.onFocusChange.bind(this)
    }
​
    onDateChange(date) {
      this.setState({
        date,
      })
    }
​
    onFocusChange({ focused }) {
      this.setState({
        datePickerFocused: focused,
      })
    }
​
    render() {
      return (
        <div>
          <DatePicker
            id="appendToBodyDatePicker"
            date={this.state.date}
            onDateChange={this.onDateChange}
            focused={this.state.datePickerFocused}
            onFocusChange={this.onFocusChange}
            appendToBody
          />
        </div>
      )
    }
  }
​
  return <DatePickerExample />
}

Hidden Icon

 
() => {
  class DatePickerExample extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        date: null,
        monthPickerFocused: false,
        startDate: null,
        endDate: null,
        focusedInput: null,
      }
      this.onDateChange = this.onDateChange.bind(this)
      this.onMonthFocusChange = this.onMonthFocusChange.bind(this)
      this.onDatesChange = this.onDatesChange.bind(this)
      this.onFocusChange = this.onFocusChange.bind(this)
    }
​
    onDatesChange({ startDate, endDate }) {
      this.setState({
        startDate,
        endDate,
      })
    }
​
    onFocusChange(focusedInput) {
      this.setState({
        focusedInput,
      })
    }
​
    onDateChange(date) {
      this.setState({
        date,
      })
    }
​
    onMonthFocusChange({ focused }) {
      this.setState({
        monthPickerFocused: focused,
      })
    }
​
    render() {
      return (
        <Form horizontal>
          <FormControl>
            <DatePicker
              id="hiddenIconDatePicker"
              date={this.state.date}
              onDateChange={this.onDateChange}
              focused={this.state.monthPickerFocused}
              onFocusChange={this.onMonthFocusChange}
              hideInputIcon
            />
          </FormControl>
          <FormControl>
            <DateRangePicker
              startDate={this.state.startDate}
              startDateId="hiddenIconStartDate"
              endDate={this.state.endDate}
              endDateId="hiddenIconEndDate"
              onDatesChange={this.onDatesChange}
              focusedInput={this.state.focusedInput}
              onFocusChange={this.onFocusChange}
              hideInputIcon
            />
          </FormControl>
        </Form>
      )
    }
  }
​
  return <DatePickerExample />
}

Month and Year Select

 
() => {
  class DatePickerExample extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        date: null,
        monthPickerFocused: false,
        monthYearPickerFocused: false,
        startDate: null,
        endDate: null,
        focusedInput: null,
      }
      this.onDateChange = this.onDateChange.bind(this)
      this.onMonthFocusChange = this.onMonthFocusChange.bind(this)
      this.onMonthYearFocusChange = this.onMonthYearFocusChange.bind(this)
      this.onDatesChange = this.onDatesChange.bind(this)
      this.onFocusChange = this.onFocusChange.bind(this)
    }
​
    onDatesChange({ startDate, endDate }) {
      this.setState({
        startDate,
        endDate,
      })
    }
​
    onFocusChange(focusedInput) {
      this.setState({
        focusedInput,
      })
    }
​
    onDateChange(date) {
      this.setState({
        date,
      })
    }
​
    onMonthFocusChange({ focused }) {
      this.setState({
        monthPickerFocused: focused,
      })
    }
​
    onMonthYearFocusChange({ focused }) {
      this.setState({
        monthYearPickerFocused: focused,
      })
    }
​
    render() {
      return (
        <Form horizontal>
          <FormControl>
            <FormControlLabel>Month</FormControlLabel>
            <DatePicker
              id="monthDateSelector"
              date={this.state.date}
              onDateChange={this.onDateChange}
              focused={this.state.monthPickerFocused}
              onFocusChange={this.onMonthFocusChange}
              numberOfMonths={1}
              isOutsideRange={() => {}}
              monthYearSelectionMode="MONTH"
            />
          </FormControl>
          <FormControl>
            <FormControlLabel>Month & Year</FormControlLabel>
            <DatePicker
              id="monthYearDateSelector"
              date={this.state.date}
              onDateChange={this.onDateChange}
              focused={this.state.monthYearPickerFocused}
              onFocusChange={this.onMonthYearFocusChange}
              numberOfMonths={1}
              isOutsideRange={() => {}}
              monthYearSelectionMode="MONTH_YEAR"
            />
          </FormControl>
          <FormControl>
            <FormControlLabel>Date Range Month & Year</FormControlLabel>
            <DateRangePicker
              startDate={this.state.startDate}
              startDateId="monthYearStartDate"
              endDate={this.state.endDate}
              endDateId="monthYearEndDate"
              onDatesChange={this.onDatesChange}
              focusedInput={this.state.focusedInput}
              onFocusChange={this.onFocusChange}
              isOutsideRange={() => {}}
              monthYearSelectionMode="MONTH_YEAR"
            />
          </FormControl>
        </Form>
      )
    }
  }
​
  return <DatePickerExample />
}

Props

DatePicker `default`

Property	Type	Required	Default	Description
placeholder	String	false	Date	Placeholder text for the DatePicker text field.
monthYearSelectionMode	Enum	false	NONE	Determine if year and/or month dropdowns should be shown in the calendar popup
yearSelectDates	Shape	false	{ startYear: new moment().subtract(50, year).year(), endYear: new moment().year() }	The years that will be used to populate the year dropdown menu
numberOfMonths	Number	false	1	The number of months to show in the popup
date	Custom	false	-	The currently selected moment date object for the component.
onDateChange	Func	true	-	Callback function when the selected date is changed.
focused	Bool	false	-	Describe whether the DatePicker is currently focused; displays the calendar dropdown.
onFocusChange	Func	true	-	Callback function when the focus state of the DatePicker is changed.
id	String	true	-	An id supplied to the DatePicker.
hideInputIcon	Bool	false	-	Toggle visibility of the calendar icon in the input

DateRangePicker

Property	Type	Required	Default	Description
startDatePlaceholderText	String	false	Start Date	Placeholder text for the start date text field.
endDatePlaceholderText	String	false	End Date	Placeholder text for the end date text field.
monthYearSelectionMode	Enum	false	NONE	Determine if year and/or month dropdowns should be shown in the calendar popup
yearSelectDates	Shape	false	{ startYear: new moment().subtract(50, year).year(), endYear: new moment().year() }	The years that will be used to populate the year dropdown menu
startDate	Custom	false	-	The currently selected moment date object for the start date.
startDateId	String	true	-	Id provided to the start date text field.
endDate	Custom	false	-	The currently selected moment date object for the end date.
endDateId	String	true	-	Id provided to the end date text field.
onDatesChange	Func	true	-	Callback function when the start or end date is changed.
focusedInput	Enum	false	-	The name of the currently focused text field.
onFocusChange	Func	true	-	Callback function when the focused input is changed.
hideInputIcon	Bool	false	-	Toggle visibility of the calendar icon in the input

Calcite React

DatePicker

Import Syntax

Basic Usage

Basic Usage (with Formik)

Date Range

Date Range (with Formik)

Append to Body

Hidden Icon

Month and Year Select

Props

DatePicker default

DateRangePicker

DatePicker `default`