Date Input
This component is used to take a date as an input from the user. The slashes are automatically added while the user enters the Date.
Usage
Here are the steps to set the component in Quantum Visualizer:
- Open the Temenos DigitalOrigination project in Quantum Visualizer.
- Drag and drop a Flex Container widget onto the required form.
- Select the Flex Container and set the following properties:
- width as per the design requirement
- height: "40 Dp"
- Insert the component in the Flex Container.
The responsive data is not maintained in the component as there are no major changes in dimensions across the breakpoints. If any changes are required, they can be assigned to the parent flex.
The basic date validations such as following are a part of the component controller.
- The range of month is between 1 to 12.
- Date in that particular month (For example, 30th Feb is not a valid date).
APIs
getDateObject
Returns a JSON with status, message, and dateObject. This API will also handle basic validations and checks if a date is valid.
var dt = this.view.DateInput.getDateObject();
/*
if the date entered by the user is valid then dt will have
{
"status": 0,
"message":"Valid Date",
"dateObj" : <dateObject>
}
*/
setText
Sets the data to the component and this API takes date as a param.
this.view.DateInput.setText("01/01/2020");
setDateFormat
Modifies the date format as per requirement.
- If the format isn’t specified, "MM/DD/YYYY" is considered as the default format.
- Argument is NOT case sensitive, that is, "dd/mm/yyyy" is the same as "DD/MM/YYYY".
this.view.DateInput.setDateFormat("DD/MM/YYYY");
Callbacks
textChangeCallback
This callback is invoked whenever there is a change in the text entered in the DateInput component. Assign the callback in the preShow of the form.
//this has to be written in the preShow of the form this.view.DateInput.textChangeCallback = <function to be invoked in form controller>
In this topic