Hyperview

Hyperview

  • Guides
  • Examples
  • Reference
  • Blog

›Input Elements

Reference

  • Index

Behaviors

  • Behavior Attributes
  • <behavior>
  • Alert
  • Share

Display Elements

  • <doc>
  • <screen>
  • <header>
  • <body>
  • <view>
  • <text>
  • <image>
  • <list>
  • <section-list>
  • <section>
  • <section-title>
  • <items>
  • <item>
  • <spinner>
  • <web-view>

Input Elements

  • <form>
  • <text-field>
  • <text-area>
  • <select-single>
  • <select-multiple>
  • <option>
  • <picker-field>
  • <picker-item>
  • <switch>
  • <date-field>

Style Elements

  • <styles>
  • <style>
  • <modifier>

Hyperview Client

  • Hyperview component
  • Custom elements
  • Custom behaviors

<date-field>

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-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-text-style
  • id
  • hide

name

TypeRequired
stringYes

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

TypeRequired
stringYes

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

TypeRequired
stringNo (defaults to default)

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

value

TypeRequired
stringNo (defaults to current date)

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

placeholder

TypeRequired
stringNo

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

min

TypeRequired
stringNo

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

max

TypeRequired
stringNo

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

field-style

TypeRequired
stringNo

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

field-text-style

TypeRequired
stringNo

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

modal-style

TypeRequired
stringNo

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-text-style

TypeRequired
stringNo

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.

id

TypeRequired
stringNo

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

hide

TypeRequired
false (default), trueNo

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.

← <switch><styles> →
  • Structure
  • Attributes
Hyperview
Docs
ExamplesHyperview Reference
More
BlogGitHubStar
Copyright © 2022 Instawork