> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aseeflow.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Date Inputs

Date input is supported using an `<input type="text">` control.

## Binding to a Process Variable

To bind the input field to a Java `Date` variable, the directive
`cam-variable-type="Date"` must be used.

Example:

```html theme={null}
<input type="text"
       cam-variable-name="CONTRACT_START_DATE"
       cam-variable-type="Date" />
```

## Date Format

Currently only the ISO Date Format `yyyy-MM-dd'T'HH:mm:ss` is supported.
Example value: `2013-01-23T13:42:42`

## Using a Date Picker

The Form SDK itself does not provide any custom components or widgets. As such it also does not provide a date picker. However, you can integrate third party libraries providing such widgets or write one yourself (see [Custom JavaScript](/reference/forms/embedded-forms/javascript)).

<Note>
  Inside ASEE Flow Tasklist, datepicker support is provided through Angular UI.
</Note>

You can use the [Angular UI datepicker](http://angular-ui.github.io/bootstrap/)
directive to offer a datepicker for the date input field. The complete markup of the input field
including the datepicker button is shown below.

```html theme={null}
<p class="input-group">

  <input type="text"
       cam-variable-name="CONTRACT_START_DATE"
       cam-variable-type="Date"
       class="form-control"
       uib-datepicker-popup="yyyy-MM-dd'T'HH:mm:ss"
       is-open="dateFieldOpened" />

  <span class="input-group-btn">
    <button type="button"
            class="btn btn-default"
            ng-click="open($event)">
      <i class="glyphicon glyphicon-calendar"></i>
    </button>
  </span>
</p>
```

In addition to the HTML markup, the following JavaScript must be included in the form file
(see [Custom JavaScript](/reference/forms/embedded-forms/javascript)):

```html theme={null}
<script cam-script type="text/form-script">
  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.dateFieldOpened = true;
  };
</script>
```

The attributes of the datepicker component are explained below:

Additional attributes of the input element:

* `uib-datepicker-popup="yyyy-MM-dd'T'HH:mm:ss"`: This attribute sets the format of the date which
  is returned by the datepicker. It must be the ISO Date Format.
* `is-open="dateFieldOpened"`: This attribute contains the name of the variable, which
  indicates the open status of the datepicker. It must be the same variable, which is set to
  true in the `open` function in the JavaScript snippet. If a form contains multiple
  datepickers, they must have different values for this attribute.

Attributes of the datepicker button:

* `ng-click="open($event)"`: This attribute contains the name of the function which is called
  when the datepicker button is clicked. It must be the function name of the JavaScript snippet
  which sets the `is-open` variable to true. If a form contains multiple date pickers, they
  must have different function names, or the name of the `is-open` variable must be passed to
  the function.