Date Range validation “oj-input-date” in OJET / VBCS

While working in date/form, you might have to create a range of dates. A range is something that has a start date and an end date. Some time difference between start and end date should not be more than a specific duration. Here, We will implement a one year validation between start date and end date.🦅

Photo by Behnam Norouzi on Unsplash

In this post, we are going to have a Date Range maximum of one year otherwise throw an error.

Oracle JET comes with out of the box support for date. Check more about it in document.🤔

Step One : Create two observable variables.

this.from_date = ko.observable(ojconverterutils_i18n_1.IntlConverterUtils.dateToLocalIso(fromDate)),

this.to_date = ko.observable(ojconverterutils_i18n_1.IntlConverterUtils.dateToLocalIso(toDate)),

Step Two: Both variables will be associated with the value property of oj-input-date.

[embed]

Step Three: Create a “min” variable using Knockout computed and reduce one year from to_date. It will be auto recalculated if any change in to_date.

[embed]

Here, 😃 my approach is to reduce one year from the to_Date:oj-input-date and then add it as the “min” property of from_date:oj-input-date.

If the user will try to have more then one year difference🤣 it will show validation error and the user would not be able to submit the form.

Well, I guess, that’s it.😄

Let me know if you have any doubt in OJET/VBCS.

Have fun!

Don’t forget to connect with me on: Github

If you enjoy this and would like to support, consider following me on medium.