<date-field> · Hyperview

The <date-field> element renders a date picker. The value of the <date-field> gets serialized as form data when a <form> gets submitted. Example:

<form>
  <date-field
    field-style="Input"
    field-text-style="Input__Text"
    label-format="MMMM D, YYYY"
    modal-style="PickerModal"
    modal-overlay-style="PickerModal__overlay"
    modal-text-style="PickerModal__text"
    placeholder="Select date"
    placeholderTextColor="#8D9494"
  />
</form>

Structure

A <date-field> element can appear anywhere within a <form> element.

Attributes

name
label-format
mode
value
placeholder
min
max
field-style
field-text-style
modal-style
modal-overlay-style
modal-text-style
id
hide

Behavior attributes

A <date-field> element accepts the standard behavior attributes, including the following triggers:

`name`

Type	Required
string	Yes

The name of the field within a <form> element. This name will be used when serializing a form to form data that gets sent in a server request.

`label-format`

Type	Required
string	Yes

Desired format of the date for the label. This uses the formatter function passed to the root hyperview component in your app via the formatDate prop. For example, if you're using moment, you could pass the following values: MMMM D, YYYY, L, etc.

`mode`

Type	Required
string	No (defaults to `default`)

Sets the date picker mode for Android only. Possible values are calendar, spinner and default.

`value`

Type	Required
string	No (defaults to current date)

The value of the field in YYYY-MM-DD format.

`placeholder`

Type	Required
string	No

Shows a placeholder text in the date field when there is no selection.

`min`

Type	Required
string	No

Minimum value of the date allowed in selection in YYYY-MM-DD format.

`max`

Type	Required
string	No

Maximum value of the date allowed in selection in YYYY-MM-DD format.

`field-style`

Type	Required
string	No

A space-separated list of styles to apply to the date field input. See Styles.

`field-text-style`

Type	Required
string	No

A space-separated list of styles to apply to the date field input label. See Styles.

`modal-style`

Type	Required
string	No

A space-separated list of styles to apply to the date selection modal on IOS (Android uses a system style date picker). See Styles.

`modal-overlay-style`

Type	Required
string	No

A space-separated list of styles to apply to the overlay on date selection modal for IOS (Android uses a system style date picker). See Styles.

`modal-text-style`

Type	Required
string	No

A space-separated list of styles to apply to the text on date selection modal for IOS (Android uses a system style date picker). See Styles.

`modal-animation-duration`

Type	Required
number	No

The duration in milliseconds that the open and close animation (including the fading animation of the overlay) of the date selection modal for IOS takes. Defaults to 250ms.

`modal-overlay-animation-duration`

Type	Required
number	No

The duration in milliseconds that the open and close animation of the date selection modal overlay for IOS takes. Defaults to value of modal-animation-duration.

`modal-dismiss-animation-duration`

Type	Required
number	No

The duration in milliseconds that the close animation of the date selection modal for IOS takes. Defaults to value of modal-animation-duration.

`modal-dimiss-overlay-animation-duration`

Type	Required
number	No

The duration in milliseconds that the close animation of the date selection modal overlay for IOS takes. Defaults to value of modal-overlay-animation-duration.

`id`

Type	Required
string	No

A global attribute uniquely identifying the element in the whole document.

`hide`

Type	Required
false (default), true	No

If hide="true", the element will not be rendered on screen. If the element or any of the element's children have a behavior that triggers on "load" or "visible", those behaviors will not trigger while the element is hidden.