# ExpirationDateEditText

Provides a user interface element for date input. The range of dates supported by this field is not configurable. When you define this input field, you could specify a few attributes which preferable for this control. For example, `app:datePickerModes` or `app:datePattern` which are unique for this field type.

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

Sets 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 a 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.ExpirationDateEditText
    android:id="@+id/cardExpDateField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:datePickerModes="input"/>
```

{% endtab %}

{% tab title="Kotlin" %}

```kotlin
val cardExpDateField = findViewById<ExpirationDateEditText>(R.id.cardExpDateField)
cardExpDateField.setDatePickerMode(DatePickerMode.INPUT)
```

{% endtab %}

{% tab title="Java" %}

```java
ExpirationDateEditText cardExpDateField = findViewById(R.id.cardExpDateField);
cardExpDateField.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 `ExpirationDateEditText` 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 cardExpDateField = findViewById<ExpirationDateEditText>(R.id.cardExpDateField)
cardExpDateField?.setDatePickerVisibilityChangeListener(object : ExpirationDateEditText.OnDatePickerVisibilityChangeListener {
            override fun onShow() { }
            override fun onDismiss() { }
        })
```

{% endtab %}

{% tab title="Java" %}

```java
ExpirationDateEditText cardExpDateField = findViewById(R.id.cardExpDateField);
cardExpDateField.setDatePickerVisibilityChangeListener(new ExpirationDateEditText.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.

NoteThe `input` Date mode supports only `MM`, `yyyy`, `yy` forms.

The `datePattern` format date and times before showing in the input field.

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

```xml
<com.verygoodsecurity.vgscollect.widget.ExpirationDateEditText
    android:id="@+id/cardExpDateField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:datePattern="MM/yy"/>
```

{% endtab %}

{% tab title="Kotlin" %}

```kotlin
val cardExpDateField = findViewById<ExpirationDateEditText>(R.id.cardExpDateField)
cardExpDateField.setDateRegex("MM/yy")
```

{% endtab %}

{% tab title="Java" %}

```java
ExpirationDateEditText cardExpDateField = findViewById(R.id.cardExpDateField);
cardExpDateField.setDateRegex("MM/yy");
```

{% endtab %}
{% endtabs %}

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

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

```xml
<com.verygoodsecurity.vgscollect.widget.ExpirationDateEditText
    android:id="@+id/cardExpDateField"
    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 cardExpDateField = findViewById<ExpirationDateEditText>(R.id.cardExpDateField)
cardExpDateField.setOutputRegex("yyyy-MM-dd'T'HH:mm:ss.SSSSSSS")
```

{% endtab %}

{% tab title="Java" %}

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

{% endtab %}
{% endtabs %}

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

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

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

```kotlin
cardExpDateField.setSerializer(VGSExpDateSeparateSerializer(
        "expirationDateCustom.month_custom_name",
        "expirationDateCustom.year_custom_name"
    )
)
```

{% endtab %}

{% tab title="Java" %}

```java
v.setSerializer(new VGSExpDateSeparateSerializer(
    "expirationDateCustom.month_custom_name",
    "expirationDateCustom.year_custom_name"
));
```

{% endtab %}
{% endtabs %}

As a result, a JSON with the following structure:

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

### Set field name <a href="#set-field-name" id="set-field-name"></a>

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 other way input field will be ignored by VGSCollect.

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

```xml
<com.verygoodsecurity.vgscollect.widget.ExpirationDateEditText
    android:id="@+id/cardExpDateField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fieldName="exp_date"/>
```

{% endtab %}

{% tab title="Kotlin" %}

```kotlin
val cardExpDateField = findViewById<ExpirationDateEditText>(R.id.cardExpDateField)
cardExpDateField.setFieldName("exp_date")
```

{% endtab %}

{% tab title="Java" %}

```java
ExpirationDateEditText cardExpDateField = findViewById(R.id.cardExpDateField);
cardExpDateField.setFieldName("exp_date");
```

{% endtab %}
{% endtabs %}

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

Specifies whether the text inside 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 input data should be valid.

By default, a widget is required.

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

```xml
<com.verygoodsecurity.vgscollect.widget.ExpirationDateEditText
    android:id="@+id/cardExpDateField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:isRequired="false"/>
```

{% endtab %}

{% tab title="Kotlin" %}

```kotlin
val cardExpDateField = findViewById<ExpirationDateEditText>(R.id.cardExpDateField)
cardExpDateField.isRequired(false)
```

{% endtab %}

{% tab title="Java" %}

```java
ExpirationDateEditText cardExpDateField = findViewById(R.id.cardExpDateField);
cardExpDateField.isRequired(false);
```

{% endtab %}
{% endtabs %}

### Specify the keyboard type <a href="#specify-the-keyboard-type" id="specify-the-keyboard-type"></a>

You should always declare the input method for these input fields by adding the `app:inputType` to tell the system to display the appropriate soft input method (such as an on-screen keyboard).

For example, if you'd like an input method for entering a phone number, specify `app:inputType` as `number` or `numberPassword`&#x20;

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

```xml
<com.verygoodsecurity.vgscollect.widget.ExpirationDateEditText
    android:id="@+id/cardExpDateField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:inputType="number"/>
```

{% endtab %}

{% tab title="Kotlin" %}

```kotlin
val cardExpDateField = findViewById<ExpirationDateEditText>(R.id.cardExpDateField)
cardExpDateField.setInputType(InputType.TYPE_CLASS_NUMBER)
```

{% endtab %}

{% tab title="Java" %}

```java
ExpirationDateEditText cardExpDateField = findViewById(R.id.cardExpDateField);
cardExpDateField.setInputType(InputType.TYPE_CLASS_NUMBER);
```

{% 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><strong>Attribute</strong></td><td><strong>Description</strong></td></tr><tr><td><pre><code>app:datePickerModes
</code></pre></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><p></p></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></td><td>Size of the text.</td></tr><tr><td><pre><code>app:ellipsize
</code></pre></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></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></td><td>Text to display.</td></tr><tr><td><pre><code>app:textColor
</code></pre></td><td>Text color.</td></tr><tr><td><pre><code>app:maxLines
</code></pre></td><td>Makes the View be at most this many lines tall.</td></tr><tr><td><pre><code>app:minLines
</code></pre></td><td>Makes the View be at least this many lines tall.</td></tr><tr><td><pre><code>app:textStyle
</code></pre></td><td>Style (normal, bold, italic) for text.</td></tr><tr><td><pre><code>app:cursorVisible
</code></pre></td><td>Makes the cursor visible (the default) or invisible.</td></tr><tr><td><pre><code>app:gravity
</code></pre></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></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></td><td>Hint text to display when the text is empty</td></tr></tbody></table>


---

# 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/expirationdateedittext.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.