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

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.

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"/>

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)
}

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);
}

Define Date picker mode

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.

calendar	set date from CalendarView.
spinner	set date from spinner DatePicker.
input	set date manually.

XML

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

Kotlin

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

Java

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

How to show DatePicker

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

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

Kotlin

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

Java

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

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

Configure date representation

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

The methods use the ISO 8601 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.

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"/>

Kotlin

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

Java

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

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

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"/>

Kotlin

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

Java

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

Date separation

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.

Kotlin

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

Java

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

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

{
    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.

XML

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

Kotlin

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

Java

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

Define the required state

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.

XML

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

Kotlin

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

Java

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

Additional XML attributes

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