# DateRangeEditText

Provides a user interface element for date input. You can configure the date range by providing a min and max date. When you define this input field, you could specify a few attributes which preferable for this control. For example `app:minDate`, `app:maxDate` which are unique for this field type.

### Define Date range <a href="#define-date-range" id="define-date-range"></a>

Sets min and max to date range, this is optional and only taken in consideration for validation when provided. Also, the calendar and picker modes will use the date range when presenting the options to the user.

{% tabs %}
{% tab title="XML" %}

```xml
<com.verygoodsecurity.vgscollect.widget.RangeDateEditText
    android:id="@+id/rangeDateField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:minDate="10/10/2020"
    app:maxDate="10/10/2026"/>
```

{% endtab %}

{% tab title="Kotlin" %}

```kotlin
val rangeDateField = findViewById<RangeDateEditText>(R.id.rangeDateField)
VGSDate.create(10,10, 2020)?.let { minDate ->
    rangeDateField.setMinDate(minDate)
}
VGSDate.create(10, 10, 2026)?.let { maxDate ->
    rangeDateField.setMaxDate(maxDate)
}
```

{% endtab %}

{% tab title="Java" %}

```java
RangeDateEditText rangeDateField = findViewById(R.id.rangeDateField);
VGSDate minDate = VGSDate.Companion.create(10, 10, 2020);
if (minDate != null) {
    rangeDateField.setMinDate(minDate);
}
VGSDate maxDate = VGSDate.Companion.create(10, 10, 2026);
if (maxDate != null) {
    rangeDateField.setMaxDate(maxDate);
}
```

{% endtab %}
{% endtabs %}

### Define Date picker mode <a href="#define-date-picker-mode" id="define-date-picker-mode"></a>

Sets the type of exact appearance and interaction model of this widget. The user can select a date by tapping on it and can scroll or fling the `calendar`, `spinner` to the desired date or just type as text.

<table data-header-hidden><thead><tr><th>Input Mode</th><th>Description</th></tr></thead><tbody><tr><td><pre><code>calendar
</code></pre></td><td>set date from CalendarView.</td></tr><tr><td><pre><code>spinner
</code></pre></td><td>set date from spinner DatePicker.</td></tr><tr><td><pre><code>input
</code></pre></td><td>set date manually.</td></tr></tbody></table>

{% tabs %}
{% tab title="XML" %}

```xml
<com.verygoodsecurity.vgscollect.widget.RangeDateEditText
    android:id="@+id/rangeDateField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:datePickerModes="input"/>
```

{% endtab %}

{% tab title="Kotlin" %}

```kotlin
val rangeDateField = findViewById<RangeDateEditText>(R.id.rangeDateField)
rangeDateField.setDatePickerMode(DatePickerMode.INPUT)
```

{% endtab %}

{% tab title="Java" %}

```java
RangeDateEditText rangeDateField = findViewById(R.id.rangeDateField);
rangeDateField.setDatePickerMode(DatePickerMode.INPUT);
```

{% endtab %}
{% endtabs %}

#### How to show DatePicker <a href="#how-to-show-datepicker" id="how-to-show-datepicker"></a>

To display a DatePicker, you need to call a `showDatePickerDialog` in `RangeDateEditText` class.

Note that by default, DatePicker is shown after tapping on a field, and if the field has `datePickerModes` attribute set.

#### Track DatePicker events <a href="#track-datepicker-events" id="track-datepicker-events"></a>

Set a `OnDatePickerVisibilityChangeListener` listener to be invoked when the dialog is shown or canceled.

{% tabs %}
{% tab title="Kotlin" %}

```kotlin
val rangeDateField = findViewById<RangeDateEditText>(R.id.rangeDateField)
rangeDateField?.setDatePickerVisibilityChangeListener(object : RangeDateEditText.OnDatePickerVisibilityChangeListener {
            override fun onShow() { }
            override fun onDismiss() { }
        })
```

{% endtab %}

{% tab title="Java" %}

```java
RangeDateEditText rangeDateField = findViewById(R.id.rangeDateField);
rangeDateField.setDatePickerVisibilityChangeListener(new RangeDateEditText.OnDatePickerVisibilityChangeListener() {
        @Override
        public void onDismiss() {  }

        @Override
        public void onShow() {  }
    });
```

{% endtab %}
{% endtabs %}

### Configure date representation <a href="#configure-date-representation" id="configure-date-representation"></a>

Representation of dates and times is an international standard covering the exchange of date- and time-related data.

The methods use the [ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html) standard.

Note: The `input` date mode supports only the formats `dd/MM/yyyy`, `MM/dd/yyyy`, `yyyy/MM/dd` and `MM/yy`.

The `datePattern` format date and times before show in input field. If not valid pattern is defined, the default `MM/dd/yyyy` will be used instead.

{% tabs %}
{% tab title="XML" %}

```xml
<com.verygoodsecurity.vgscollect.widget.RangeDateEditText
    android:id="@+id/rangeDateField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:datePattern="dd/MM/yyyy"/>
```

{% endtab %}

{% tab title="Kotlin" %}

```kotlin
val rangeDateField = findViewById<RangeDateEditText>(R.id.rangeDateField)
rangeDateField.setDateRegex("dd/MM/yyyy")
```

{% endtab %}

{% tab title="Java" %}

```java
RangeDateEditText rangeDateField = findViewById(R.id.rangeDateField);
rangeDateField.setDateRegex("dd/MM/yyyy");
```

{% endtab %}
{% endtabs %}

The `outputPattern` format date and times before sent to the Vault Proxy Server.

{% tabs %}
{% tab title="XML" %}

```xml
<com.verygoodsecurity.vgscollect.widget.RangeDateEditText
    android:id="@+id/rangeDateField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:outputPattern="yyyy-MM-dd'T'HH:mm:ss.SSSSSSS"/>
```

{% endtab %}

{% tab title="Kotlin" %}

```kotlin
val rangeDateField = findViewById<RangeDateEditText>(R.id.rangeDateField)
rangeDateField.setOutputRegex("yyyy-MM-dd'T'HH:mm:ss.SSSSSSS")
```

{% endtab %}

{% tab title="Java" %}

```java
RangeDateEditText rangeDateField = findViewById(R.id.rangeDateField);
rangeDateField.setOutputRegex("yyyy-MM-dd'T'HH:mm:ss.SSSSSSS");
```

{% endtab %}
{% endtabs %}

### Date separation <a href="#date-separation" id="date-separation"></a>

**VGS Collect SDK** allows a developer to split date day, month, and year before submitting. To configure a new structure for date use `VGSDateRangeSeparateSerializer`. The date format will be used according to the value mentioned in `app:outputPattern` attribute.

{% tabs %}
{% tab title="Kotlin" %}

```kotlin
rangeDateField.setSerializer(VGSDateRangeSeparateSerializer(
        "dateCustom.day_custom_name",
        "dateCustom.month_custom_name",
        "dateCustom.year_custom_name"
    )
)
```

{% endtab %}

{% tab title="Java" %}

```java
rangeDateField.setSerializer(new VGSDateRangeSeparateSerializer(
        "dateCustom.day_custom_name",
        "dateCustom.month_custom_name",
        "dateCustom.year_custom_name"
));
```

{% endtab %}
{% endtabs %}

As a result will be generated JSON with the following structure:

```json
{
    dateCustom: {
        day_custom_name: "<VALUE>",
        month_custom_name: "<VALUE>",
        year_custom_name: "<VALUE>"
    }
}
```

#### Set field name

Sets the text to be used for data transfer to VGS proxy. Usually, it is similar to field-name in JSON path in your inbound route filters. It is highly important to specify this parameter because the VGSCollect module relies on it too.

Warning: You must set up `fieldName` in another way, the input field will be ignored by VGSCollect.

{% tabs %}
{% tab title="XML" %}

```xml
<com.verygoodsecurity.vgscollect.widget.RangeDateEditText
    android:id="@+id/rangeDateField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fieldName="range_date"/>
```

{% endtab %}

{% tab title="Kotlin" %}

```kotlin
val rangeDateField = findViewById<RangeDateEditText>(R.id.rangeDateField)
rangeDateField.setFieldName("range_date")
```

{% endtab %}

{% tab title="Java" %}

```java
RangeDateEditText rangeDateField = findViewById(R.id.rangeDateField);
rangeDateField.setFieldName("range_date");
```

{% endtab %}
{% endtabs %}

### Define the required state <a href="#define-the-required-state" id="define-the-required-state"></a>

Specifies whether the text inside the input field is required to be filled.

When `app:isRequired` set as `true`, then input data should be valid only. If `app:isRequired` set as `false`, then input data will be valid in case the field is empty. Otherwise, the input data should be valid.

By default, a widget is required.

{% tabs %}
{% tab title="XML" %}

```xml
<com.verygoodsecurity.vgscollect.widget.RangeDateEditText
    android:id="@+id/rangeDateField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:inputType="date"/>
```

{% endtab %}

{% tab title="Kotlin" %}

```kotlin
val rangeDateField = findViewById<RangeDateEditText>(R.id.rangeDateField)
rangeDateField.setInputType(InputType.TYPE_CLASS_DATETIME)
```

{% endtab %}

{% tab title="Java" %}

```java
RangeDateEditText rangeDateField = findViewById(R.id.rangeDateField);
rangeDateField.setInputType(InputType.TYPE_CLASS_DATETIME);
```

{% endtab %}
{% endtabs %}

### Additional XML attributes <a href="#additional-xml-attributes" id="additional-xml-attributes"></a>

<table data-header-hidden><thead><tr><th>Attribute</th><th>Description</th></tr></thead><tbody><tr><td><pre><code>app:datePickerModes
</code></pre><p></p></td><td>Set the date picker mode(calendar, spinner, or input).</td></tr><tr><td><pre><code>app:datePattern
</code></pre></td><td>Representation of dates and times that will be visible for end-user. The method uses the ISO 8601 standard.</td></tr><tr><td><pre><code>app:outputPattern
</code></pre></td><td>Representation of date and times which will be sent to the Vault Proxy Server. The method uses the ISO 8601 standard.</td></tr><tr><td><pre><code>app:inputType
</code></pre></td><td>Set the type of the content with a constant as defined for input field.</td></tr><tr><td><pre><code>app:imeOptions
</code></pre></td><td><p>Specify soft input method for the input method action. By default, the system uses a</p><pre><code>actionNext
</code></pre><p>Plain textor</p><pre><code>actionDone
</code></pre><p>Plain textaction.</p></td></tr><tr><td><pre><code>app:fontFamily
</code></pre></td><td>Default font family (named by string or as a font resource reference) for the text.</td></tr><tr><td><pre><code>app:enableValidation
</code></pre></td><td>Set the validation state of this view. Set true if this view enables validation, it's false otherwise.</td></tr><tr><td><pre><code>app:fieldName
</code></pre></td><td>Sets the text to be used for data transfer to VGS proxy. Usually, it is similar to field-name in JSON path in your inbound route filters.</td></tr><tr><td><pre><code>app:isRequired
</code></pre></td><td>Specifies whether the text inside input field is required to be filled.</td></tr><tr><td><pre><code>app:textSize
</code></pre><p></p></td><td>Size of the text.</td></tr><tr><td><pre><code>app:ellipsize
</code></pre><p></p></td><td>If set, causes words that are longer than the view is wide to be ellipsized instead of broken in the middle.</td></tr><tr><td><pre><code>app:ellipsize
</code></pre><p></p></td><td>If set, causes words that are longer than the view is wide to be ellipsized instead of broken in the middle.</td></tr><tr><td><pre><code>app:text
</code></pre><p></p></td><td>Text to display.</td></tr><tr><td><pre><code>app:textColor
</code></pre><p></p></td><td>Text color.</td></tr><tr><td><pre><code>app:maxLines
</code></pre><p></p></td><td>Makes the View be at most this many lines tall.</td></tr><tr><td><pre><code>app:minLines
</code></pre><p></p></td><td>Makes the View be at least this many lines tall.</td></tr><tr><td><pre><code>app:textStyle
</code></pre><p></p></td><td>Style (normal, bold, italic) for text.</td></tr><tr><td><pre><code>app:cursorVisible
</code></pre><p></p></td><td>Makes the cursor visible (the default) or invisible.</td></tr><tr><td><pre><code>app:gravity
</code></pre><p></p></td><td>Specifies how to align the text by the view’s x- or y-axis when the text is smaller than the view.</td></tr><tr><td><pre><code>app:scrollHorizontally
</code></pre><p></p></td><td>When the text is allowed to be wider than the view (and therefore can be scrolled horizontally).</td></tr><tr><td><pre><code>app:hint
</code></pre><p></p></td><td>Hint text to display when the text is empty.</td></tr></tbody></table>

<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.verygoodsecurity.com/vault/developer-tools/vgs-collect/android-sdk/daterangeedittext.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.