How to use the @instructure/ui-utils/lib/react/CustomPropTypes.iso8601 function in @instructure/ui-utils

*
     * See [List of tz database time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) for the list
     * of possible options.
     *
     * This property can also be set via a context property and if both are set then the component property takes
     * precedence over the context property.
     *
     * The web browser's timezone will be used if no value is set via a component property or a context
     * property.
     */
    timezone: PropTypes.string,
    /**
     * An ISO 8601 formatted date string representing the current selected value
     * (must be accompanied by an onChange prop).
     */
    value: CustomPropTypes.controllable(CustomPropTypes.iso8601),
    disabled: PropTypes.bool
  }
  /* eslint-enable react/require-default-props */

  static defaultProps = {
    defaultToFirstOption: false,
    format: 'LT',
    step: 30
  }

  static contextTypes = {
    locale: PropTypes.string,
    timezone: PropTypes.string
  }

  locale () {

---
category: components/forms
---
**/
@themeable(theme, styles)
class TimeInput extends Component {
  /* eslint-disable react/require-default-props */
  static propTypes = {
    /**
     * Whether to default to the first option when `defaultValue` hasn't been specified.
     */
    defaultToFirstOption: PropTypes.bool,
    /**
     * An ISO 8601 formatted date string to use if `value` isn't provided.
     */
    defaultValue: CustomPropTypes.iso8601,
    /**
     * The format to use when displaying the possible and currently selected options.
     *
     * See [moment.js formats](https://momentjs.com/docs/#/displaying/format/) for the list of available formats.
     */
    format: PropTypes.string,
    /**
     * The label associated with the underlying [TextInput](#TextInput).
     */
    label: PropTypes.node.isRequired,
    /**
     * A standard language identifier.
     *
     * See [moment.js i18n](https://momentjs.com/docs/#/i18n/) for more details.
     *
     * This property can also be set via a context property and if both are set then the component property takes

export default class DatePicker extends Component {
  /* eslint-disable react/require-default-props */
  static propTypes = {
    /**
      The label to put on the previous month button of the calendar.
    **/
    previousLabel: PropTypes.string.isRequired,
    /**
      The label to put on the next month button of the calendar.
    **/
    nextLabel: PropTypes.string.isRequired,

    /**
      An ISO 8601 formatted string. The selected value on initial render.
    **/
    defaultSelectedValue: CustomPropTypes.iso8601,
    /**
      An ISO 8601 formatted string. Must be accompanied by an onSelectedChange property.
      Defaults to today's date.
    **/
    selectedValue: CustomPropTypes.controllable(CustomPropTypes.iso8601,
      'onSelectedChange', 'defaultSelectedValue'),

    /**
      An ISO 8601 formatted string. The rendered value on initial render.
    **/
    defaultRenderedValue: CustomPropTypes.iso8601,

    /**
      An ISO 8601 formatted string. Must be accompanied by an onRenderedChange property.
      Defaults to today's date.
    **/

An ISO 8601 formatted string. Must be accompanied by an onSelectedChange property.
      Defaults to today's date.
    **/
    selectedValue: CustomPropTypes.controllable(CustomPropTypes.iso8601,
      'onSelectedChange', 'defaultSelectedValue'),

    /**
      An ISO 8601 formatted string. The rendered value on initial render.
    **/
    defaultRenderedValue: CustomPropTypes.iso8601,

    /**
      An ISO 8601 formatted string. Must be accompanied by an onRenderedChange property.
      Defaults to today's date.
    **/
    renderedValue: CustomPropTypes.controllable(CustomPropTypes.iso8601,
      'onRenderedChange', 'defaultRenderedValue'),

    /**
      An ISO 8601 formatted string. Defaults to the current date. DatePicker doesn't
      attempt to change this value. Defaults to today's date.
    **/
    todayValue: CustomPropTypes.iso8601,

    /**
      A standard language id
    **/
    locale: PropTypes.string,
    /**
      A timezone identifier in the format: Area/Location
    **/
    timezone: PropTypes.string,

**/
    previousLabel: PropTypes.string.isRequired,
    /**
      The label to put on the next month button of the calendar.
    **/
    nextLabel: PropTypes.string.isRequired,

    /**
      An ISO 8601 formatted string. The selected value on initial render.
    **/
    defaultSelectedValue: CustomPropTypes.iso8601,
    /**
      An ISO 8601 formatted string. Must be accompanied by an onSelectedChange property.
      Defaults to today's date.
    **/
    selectedValue: CustomPropTypes.controllable(CustomPropTypes.iso8601,
      'onSelectedChange', 'defaultSelectedValue'),

    /**
      An ISO 8601 formatted string. The rendered value on initial render.
    **/
    defaultRenderedValue: CustomPropTypes.iso8601,

    /**
      An ISO 8601 formatted string. Must be accompanied by an onRenderedChange property.
      Defaults to today's date.
    **/
    renderedValue: CustomPropTypes.controllable(CustomPropTypes.iso8601,
      'onRenderedChange', 'defaultRenderedValue'),

    /**
      An ISO 8601 formatted string. Defaults to the current date. DatePicker doesn't

An ISO 8601 formatted string. The initial date value to display on render.
      It should only be used when using this component as an uncontrolled input.
    **/
    defaultDateValue: CustomPropTypes.iso8601,

    /**
      Called when the date value of the input has changed.
      The parameters are the triggering event, new date value in ISO 8601 format,
      the raw user input, and if the conversion from raw to a date was succesful.
    **/
    onDateChange: PropTypes.func,

    /**
    * the selected value (must be accompanied by an `onDateChange` prop)
    */
    dateValue: CustomPropTypes.controllable(CustomPropTypes.iso8601, 'onDateChange', 'defaultDateValue'),

    /**
      Whether to display validation feedback while typing.
    **/
    validationFeedback: PropTypes.bool,

    datePickerRef: PropTypes.func,

    inputRef: PropTypes.func,

    /**
      An ISO 8601 formatted string. Defaults to the current date.
    **/
    todayValue: CustomPropTypes.iso8601,

    size: PropTypes.oneOf(['small', 'medium', 'large']),

An ISO 8601 formatted string. The rendered value on initial render.
    **/
    defaultRenderedValue: CustomPropTypes.iso8601,

    /**
      An ISO 8601 formatted string. Must be accompanied by an onRenderedChange property.
      Defaults to today's date.
    **/
    renderedValue: CustomPropTypes.controllable(CustomPropTypes.iso8601,
      'onRenderedChange', 'defaultRenderedValue'),

    /**
      An ISO 8601 formatted string. Defaults to the current date. DatePicker doesn't
      attempt to change this value. Defaults to today's date.
    **/
    todayValue: CustomPropTypes.iso8601,

    /**
      A standard language id
    **/
    locale: PropTypes.string,
    /**
      A timezone identifier in the format: Area/Location
    **/
    timezone: PropTypes.string,

    /**
      Called with the triggering event followed by an ISO 8601 formatted string.
    **/
    onSelectedChange: PropTypes.func,
    /**
      Called with the triggering event followed by an ISO 8601 formatted string.

*/
    dateValue: CustomPropTypes.controllable(CustomPropTypes.iso8601, 'onDateChange', 'defaultDateValue'),

    /**
      Whether to display validation feedback while typing.
    **/
    validationFeedback: PropTypes.bool,

    datePickerRef: PropTypes.func,

    inputRef: PropTypes.func,

    /**
      An ISO 8601 formatted string. Defaults to the current date.
    **/
    todayValue: CustomPropTypes.iso8601,

    size: PropTypes.oneOf(['small', 'medium', 'large']),
    layout: PropTypes.oneOf(['stacked', 'inline']),
    width: PropTypes.string,
    inline: PropTypes.bool,
    /**
    * Html placeholder text to display when the input has no value. This should be hint text, not a label
    * replacement.
    */
    placeholder: PropTypes.string,
    disabled: PropTypes.bool,
    required: PropTypes.bool
  }

  static defaultProps = {
    placement: 'bottom center',

/**
      An ISO 8601 formatted string. The selected value on initial render.
    **/
    defaultSelectedValue: CustomPropTypes.iso8601,
    /**
      An ISO 8601 formatted string. Must be accompanied by an onSelectedChange property.
      Defaults to today's date.
    **/
    selectedValue: CustomPropTypes.controllable(CustomPropTypes.iso8601,
      'onSelectedChange', 'defaultSelectedValue'),

    /**
      An ISO 8601 formatted string. The rendered value on initial render.
    **/
    defaultRenderedValue: CustomPropTypes.iso8601,

    /**
      An ISO 8601 formatted string. Must be accompanied by an onRenderedChange property.
      Defaults to today's date.
    **/
    renderedValue: CustomPropTypes.controllable(CustomPropTypes.iso8601,
      'onRenderedChange', 'defaultRenderedValue'),

    /**
      An ISO 8601 formatted string. Defaults to the current date. DatePicker doesn't
      attempt to change this value. Defaults to today's date.
    **/
    todayValue: CustomPropTypes.iso8601,

    /**
      A standard language id

*/
    messages: PropTypes.arrayOf(CustomPropTypes.message),
    /**
      A standard language id
    **/
    locale: PropTypes.string,
    /**
      A timezone identifier in the format: Area/Location
    **/
    timezone: PropTypes.string,

    /**
      An ISO 8601 formatted string. The initial date value to display on render.
      It should only be used when using this component as an uncontrolled input.
    **/
    defaultDateValue: CustomPropTypes.iso8601,

    /**
      Called when the date value of the input has changed.
      The parameters are the triggering event, new date value in ISO 8601 format,
      the raw user input, and if the conversion from raw to a date was succesful.
    **/
    onDateChange: PropTypes.func,

    /**
    * the selected value (must be accompanied by an `onDateChange` prop)
    */
    dateValue: CustomPropTypes.controllable(CustomPropTypes.iso8601, 'onDateChange', 'defaultDateValue'),

    /**
      Whether to display validation feedback while typing.
    **/