Monday, February 7, 2011

Validation of date and calculation of the number of days between two dates using Java Script

This document gives an idea about to validation of date and calculation of the number of days between two dates using Java Script.

Step1: Go to transaction SFP, and create interface.

Save and activate the form.

Step2: Go to transaction SFP, create form 'ZTEST_FORM_JS2'.

Drag and drop the parameters from interface to context tab as shown.

Step3: Go to layout, drag and drop the elements into layout editor.

Drag the text field from library to layout editor as shown.

Step4: Insert the variable as shown.

Rename the variable name as 'checkDate' and write the following code in the script editor.

// Validation for the date(dd/MM/yyyy)
function isValidDate(DateVal)
{
//xfa.host.messageBox("Date Val : "+DateVal);

 var isValidDate = true;
 DateVal = DateVal.replace("/","-");  // replace first '-' with '/'
DateVal = DateVal.replace("/","-"); // replace first '-' with '/'
 if(DateVal!=null)
{
var r = new RegExp();
r.compile("^[0-9]{4}-(((0[13578]|(10|12))-(0[1-9]|[1-2][0-9]|3[0-1]))|(02-(0[1-9]|[1-2][0-9]))|((0[469]|11)-(0[1-9]|[1-2][0-9]|30)))$","i");
isValidDate = r.test(DateVal);
}
if(!isValidDate)
{
//xfa.host.messageBox("Invalid Date! Please select the Date","Error in Date",0,0);
}
return isValidDate;
}
Step5: Select the days element in the Body Page and select the event VALIDATE to validate the From Date and To Date fields and also logic for calculation of days.  
var sdate = data.Body.SDATE.rawValue;
var edate = data.Body.EDATE.rawValue;
// If the both the dates are initial or space, assigning days field to ZERO
if((sdate==null)||(sdate=="")||(edate==null)||(edate==""))
{
data.Body.days.rawValue = "0";
}
// Validation of the From Date field
if((sdate!=null)||(sdate!=""))
{
var isFromDateValid = data.Body.variables.checkDate.isValidDate(sdate);
if(isFromDateValid == false)
{
data.Body.days.fontColor = "255,0,0";
xfa.host.setFocus("data.Body.days");
data.Body.days.rawValue = null;
xfa.host.messageBox("Invalid From Date! Please select valid From Date","Error in From Date",0,0);
}
else
{
data.Body.days.fontColor = "51,51,51";
}
}
if((sdate==null)||(sdate=="")||(edate==null)||(edate==""))
{
data.Body.days.rawValue = "0";
}
// Validation of the To Date field
if((edate!=null)||(edate!=""))
{
var isToDateValid = data.Body.variables.checkDate.isValidDate(edate);
if(isToDateValid == false)
{
data.Body.days.fontColor = "255,0,0";
xfa.host.setFocus("data.Body.days");
data.Body.days.rawValue = null;
xfa.host.messageBox("Invalid From Date! Please select valid To Date","Error in To Date",0,0);
}
else
{
data.Body.days.fontColor = "51,51,51";
}
}
// Validation if From date field more than To Date field
if(isFromDateValid == true && isToDateValid == true)
{
if(sdate>edate)
{
xfa.host.messageBox("'From Date'"+sdate+" is more than 'To Date'"+edate,"Dates Incompatibility",0,0);
data.Body.SDATE.fontColor = "255,0,0";
data.Body.EDATE.fontColor = "255,0,0";
data.Body.days.rawValue = null;
}
else
{
// Logic to calculation of days between given dates
var sdate1 = util.scand("yyyy-mm-dd", sdate);
var edate1 = util.scand("yyyy-mm-dd", edate);
for(var i=0;;)
{
var sDateT = sdate1.getTime();
var sDateD = sdate1.getDay();
var sDateN = sDateT+(24*60*60*1000);
if(sdate1>edate1)
{
break;
}
i = i+1;
sdate1 = new Date(sDateN);
}
data.Body.days.rawValue = i;
}
}

Step6: Execute the form. Pass the value 'X' to the IMPORT parameters DYNIMIC and FILLABLE.

The output would be

Case1: If you entered wrong date in 'From Date',

Case2: If you entered wrong date in 'To Date',

Case3: If you entered 'From Date' is more than 'To Date'.

Case4: If you entered correct dates, then days between two dates would be calculated as shown.





No comments:

Tutorials on SAP-ABAP

Adobe Interactive Forms Tutorials

Business Server Pages (BSP)

Userexits/BADIs

Web Dynpro for ABAP (Step by step procedure for web dynpro,Tutorials on Web Dynpro,)

ALV Tutorials

Blog Archive

goodsites