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

...Previous

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" %>
<htmlb:content design="design2003" >
  <htmlb:page title="master " >
    <htmlb:form>
      <htmlb:gridLayout columnSize  = "3"
                        rowSize     = "3"
                        cellPadding = "10"
                        cellSpacing = "10"
                        width       = "50%" >
        <htmlb:gridLayoutCell columnIndex = "1"
                              rowIndex    = "1"
                              width       = "50%" >
          <font face=verdana style="font-size:10px">
                               <b>Starting Date</b></font><br>
          <htmlb:inputField id        = "sd"
                            width     = "50%"
                            type      = "DATE"
                            showHelp  = "X"
                            invalid   = "<%= w_sIN %>"
                            alignment = "CENTER"
                            maxlength = "10"
                            value     = "<%= w_sd %>" />
        </htmlb:gridLayoutCell>
        <htmlb:gridLayoutCell columnIndex = "2"
                              rowIndex    = "1"
                              width       = "50%" >
          <font face=verdana style="font-size:10px">
                               <b>End Date</b></font><br>
          <htmlb:inputField id        = "ed"
                            width     = "50%"
                            type      = "DATE"
                            showHelp  = "X"
                            invalid   = "<%= w_eIN %>"
                            alignment = "CENTER"
                            maxlength = "10"
                            value     = "<%= w_ed %>" />
        </htmlb:gridLayoutCell>
      </htmlb:gridLayout>
    </htmlb:form>
  </htmlb:page>
</htmlb: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.