Simple BSP Application to validate the date fields in Front end using JAVASCRIPT

Go to Transaction SE80.

Select BSP Application & enter the name to create a New BSP Application (Eg:yhdate):

Press Enter to create a new Object & click on Yes:

Enter the short description and press Enter:

Right Click on the Name and go to Create a Page.

Enter the page name and the description and select page with Flow Logic option

Now Page is created. Enter the below code.

In Layout Code:-

<script for="sd" event=onchange type="text/javascript">
var data = this.value;
var date = data.split(".");
if (data != ' ')
{
var day = date[0];
var month = date[1];
var year = date[2];
document.getElementById("sd").style.borderColor = "black";
document.getElementById("sd").style.color = "black";
if ((day<1 || day >31) || (month<1 || month>12) ||(year.length != 4))
{
alert("Please enter a valid Start Date ( mm.dd.yyyy )");
document.getElementById("sd").style.color = "red";
document.getElementById("sd").style.borderColor = "red";
}
}
else
{
alert("Please enter a valid Start Date ( mm.dd.yyyy )");
document.getElementById("sd").style.color = "red";
document.getElementById("sd").style.borderColor = "red";
}
script>

<script for="ed" event=onchange type="text/javascript">
var data = this.value;
var date = data.split(".");
if (data != ' ')
{
var day = date[0];
var month = date[1];
var year = date[2];
document.getElementById("ed").style.borderColor = "black";
document.getElementById("ed").style.color = "black";
if ((day<1 || day >31) || (month<1 || month>12) ||
(year.length != 4))
{
alert("Please enter a valid End Date ( mm.dd.yyyy )");
document.getElementById("ed").style.color = "red";
document.getElementById("ed").style.borderColor = "red";
}
}
else
{
alert("Please enter a valid End Date ( mm.dd.yyyy )");
document.getElementById("ed").style.color = "red";
document.getElementById("ed").style.borderColor = "red";
}
script>

<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
content design="design2003" >
title="master " >
form>
"3"
rowSize = "3"
cellPadding = "10"
cellSpacing = "10"
width = "50%" >
"1"
rowIndex = "1"
width = "50%" >
<font face=verdana style="font-size:10px">
<b>Starting Dateb>font><br>
id = "sd"
width = "50%"
type = "DATE"
showHelp = "X"
invalid = "<%= w_sIN %>"
alignment = "CENTER"
maxlength = "10"
value = "<%= w_sd %>" />

"2"
rowIndex = "1"
width = "50%" >
<font face=verdana style="font-size:10px">
<b>End Dateb>font><br>
id = "ed"
width = "50%"
type = "DATE"
showHelp = "X"
invalid = "<%= w_eIN %>"
alignment = "CENTER"
maxlength = "10"
value = "<%= w_ed %>" />


form>

content>

In Event-handler – on Initialization.

w_sd = sy-datum.
w_ed = sy-datum.

In Type Definition:

w_ed TYPE SY-DATUM

w_eedate TYPE CHAR10

w_eIN TYPE C

w_sd TYPE SY-DATUM

w_sin TYPE C

OUTPUT

Whenever an invalid date is provide this JavaScript will get triggered.

Date here is in DD.MM.YYYY Format.

Case 1.

Here the starting day field contains 00.which is invalid.

Once you press ok the input field color will change to Red.

Once the valid date is provided it revert back to original color

This above condition will work for day as well as month values.

Case 2.

Here if the total length of month is less than 4 the following error is triggered.

Once you press ok the input field color will change to Red.

Once the valid date is provided it revert back to original color

Case 3.

If the starting date field is blank.

Once you press ok the input field color will change to Red.

Again, as above once the valid date is provided it revert back to original color.

This is all about the date validations that can be done on front-end using Java scripts.