Calendar Functionality for a date field in HTML of a ITS service

[former_member248622]

Hi

I am working with SRM EBP module we want to add date help(with calendar function) to existign date fields in Shopping cart and PO screens . I found some HTML and Javascripts in SYSTEM and BBPGLOBAL services (named as calendar)but not sure which ones to use if anyone used date functionality or even have access to Standard SAP ITS screens that already have date field with calendar fuctionality can you help???????????????

Thanks in Advance

[Former Member · Accepted solution]

Hi ,

I have used date functionality by using the following JS.

-

---

Give ur mail id ,i will send the code.

Rgds,

J

Don't open different threads for the same Q .

Plz Close one of this by clicking options on the LHS of this Info.

[Former Member · Accepted solution]

I understand the solution to this might be concise, but isn't this forum about learning and sharing info?

It would be great if the solution to this -even just in a shortened format- could be posted on here so everyone can use it.

Kind regards,

Michael

[former_member248622 · Accepted solution]

HI

Yo can send it to mail2vinee@yahoo.com, thanks a lot for the quick response.

Vineela

[former_member248622]

Hi

I browsed thru other services i found PZLE_06 and there is a date field with popup but difference between ESS and SRM is ESS i saw uses webgui concept and SRM has different approach if you can point me to the html template in one of the service where the calendar function is called that will be helpful i tried no luck i got the funciton issue is integrating it with existing code in HTML i mean calling the javascript from HTML i am not able to .

Thank You

Vineela

[Former Member]

Hi Vineela ,

Kindly close the thread if u r satisfied .

Rgds,

J

( You can do this by clicking on the options on the Left of this info. )

[former_member248622]

Hi

Let me first thank you for the quick response and timely help you provided calendar popup works great but one minor issue i am not able to click on the date entry and bring the field back into the field not sure if this funcitonality is in show_calendar.

I would really appreciate if you get time to look at below i am almost there with your help......thanks again

Here are the steps I did

I have a HTML page SAPLBBP_SC_UI_ITS screen 300 in SRM module , I created a new HTML page (zcalendar.html) in the same internet service BBPSC01 as suggested and I included in my HTML page SAPLBBP_SC_UI_ITS screen 300 and also I added below code to add a icon and a href call to the show_calendar function.

Code works great I get the popup but when I double click on the date it is not selecting the date into the field back .

Any thoughts??????

<!-- Start ghantavine -->

`include (~service="bbpsc01", ~name="zcalendar.html")`

<!-- End ghantavine -->

<!-- 10/24/05 ghantavine--delivary date -->

`TR()`

`if (GS_SCR_BASIC_I-DELIV_DATE.visible)`

`TR()`

`if (gs_scr_basic_i-deliv_date.disabled)`

`TD(class="label", nowrap="x",

active="")``TXT_BASIC_I-DELIV_DATE.label`&nbsp;

`TD(class="label", nowrap="x", active="")``gs_scr_basic_i-deliv_date.value`

`else`

`TD(class="label", nowrap="x", active="")`<label

for="`GS_SCR_BASIC_I-DELIV_DATE.name`">`TXT_BASIC_I-DELIV_DATE.label`</label>&nbsp;

`TD(class="data", nowrap="x")`

<input type="text" id="GS_SCR_BASIC_I-DELIV_DATE"

name="GS_SCR_BASIC_I-DELIV_DATE" value="`GS_SCR_BASIC_I-DELIV_DATE.value`"

maxlength="010" size="008">

<a href=http://mail.yahoo.com/config/login?/"_javascript:show_calendar();">

<img id="anchor1" src="`mimeurl(~service="bbpglobal",

~name="images/button/f4.gif", ~language="", ~theme="99")`" />

</a>

`end`

`TR()` `Lines()`

`end`

<!-- 10/24/05 ghantavine--delivary date -->

below is the showcalendar code

• Hi , u save this as a html file and call this show_calendar fn from Onclick button of your Calendar image .

// For generating the calendar

var weekend = [0,6];

var weekendColor = "#e0e0e0";

var fontface = "Verdana";

var fontsize = 2;

var gNow = new Date();

var ggWinCal;

isNav = (navigator.appName.indexOf("Netscape") != -1) ? true : false;

isIE = (navigator.appName.indexOf("Microsoft") != -1) ? true : false;

Calendar.Months = ["January", "February", "March", "April", "May", "June",

"July", "August", "September", "October", "November", "December"];

// Non-Leap year Month days..

Calendar.DOMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

// Leap year Month days..

Calendar.lDOMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

function Calendar(p_item, p_WinCal, p_month, p_year, p_format) {

if ((p_month == null) && (p_year == null)) return;

if (p_WinCal == null)

this.gWinCal = ggWinCal;

else

this.gWinCal = p_WinCal;

if (p_month == null) {

this.gMonthName = null;

this.gMonth = null;

this.gYearly = true;

} else {

this.gMonthName = Calendar.get_month(p_month);

this.gMonth = new Number(p_month);

this.gYearly = false;

}

this.gYear = p_year;

this.gFormat = p_format;

this.gBGColor = "white";

this.gFGColor = "black";

this.gTextColor = "black";

this.gHeaderColor = "black";

this.gReturnItem = p_item;

}

Calendar.get_month = Calendar_get_month;

Calendar.get_daysofmonth = Calendar_get_daysofmonth;

Calendar.calc_month_year = Calendar_calc_month_year;

Calendar.print = Calendar_print;

function Calendar_get_month(monthNo) {

return Calendar.Months[monthNo];

}

function Calendar_get_daysofmonth(monthNo, p_year) {

/*

Check for leap year ..

1.Years evenly divisible by four are normally leap years, except for...

2.Years also evenly divisible by 100 are not leap years, except for...

3.Years also evenly divisible by 400 are leap years.

*/

if ((p_year % 4) == 0) {

if ((p_year % 100) == 0 && (p_year % 400) != 0)

return Calendar.DOMonth[monthNo];

return Calendar.lDOMonth[monthNo];

} else

return Calendar.DOMonth[monthNo];

}

function Calendar_calc_month_year(p_Month, p_Year, incr) {

/*

Will return an 1-D array with 1st element being the calculated month

and second being the calculated year

after applying the month increment/decrement as specified by 'incr' parameter.

'incr' will normally have 1/-1 to navigate thru the months.

*/

var ret_arr = new Array();

if (incr == -1) {

// B A C K W A R D

if (p_Month == 0) {

ret_arr[0] = 11;

ret_arr[1] = parseInt(p_Year) - 1;

}

else {

ret_arr[0] = parseInt(p_Month) - 1;

ret_arr[1] = parseInt(p_Year);

}

} else if (incr == 1) {

// F O R W A R D

if (p_Month == 11) {

ret_arr[0] = 0;

ret_arr[1] = parseInt(p_Year) + 1;

}

else {

ret_arr[0] = parseInt(p_Month) + 1;

ret_arr[1] = parseInt(p_Year);

}

}

return ret_arr;

}

function Calendar_print() {

ggWinCal.print();

}

function Calendar_calc_month_year(p_Month, p_Year, incr) {

/*

Will return an 1-D array with 1st element being the calculated month

and second being the calculated year

after applying the month increment/decrement as specified by 'incr' parameter.

'incr' will normally have 1/-1 to navigate thru the months.

*/

var ret_arr = new Array();

if (incr == -1) {

// B A C K W A R D

if (p_Month == 0) {

ret_arr[0] = 11;

ret_arr[1] = parseInt(p_Year) - 1;

}

else {

ret_arr[0] = parseInt(p_Month) - 1;

ret_arr[1] = parseInt(p_Year);

}

} else if (incr == 1) {

// F O R W A R D

if (p_Month == 11) {

ret_arr[0] = 0;

ret_arr[1] = parseInt(p_Year) + 1;

}

else {

ret_arr[0] = parseInt(p_Month) + 1;

ret_arr[1] = parseInt(p_Year);

}

}

return ret_arr;

}

// This is for compatibility with Navigator 3, we have to create and discard one object before the prototype object exists.

new Calendar();

Calendar.prototype.getMonthlyCalendarCode = function() {

var vCode = "";

var vHeader_Code = "";

var vData_Code = "";

// Begin Table Drawing code here..

vCode = vCode + "<TABLE BORDER=1 BGCOLOR=\"" + this.gBGColor + "\">";

vHeader_Code = this.cal_header();

vData_Code = this.cal_data();

vCode = vCode + vHeader_Code + vData_Code;

vCode = vCode + "</TABLE>";

return vCode;

}

Calendar.prototype.show = function() {

var vCode = "";

this.gWinCal.document.open();

// Setup the page...

this.wwrite("<html>");

this.wwrite("<head><title>Calendar</title>");

this.wwrite("</head>");

this.wwrite("<body " +

"link=\"" + this.gLinkColor + "\" " +

"vlink=\"" + this.gLinkColor + "\" " +

"alink=\"" + this.gLinkColor + "\" " +

"text=\"" + this.gTextColor + "\">");

this.wwriteA("<FONT FACE='" + fontface + "' SIZE=2><B>");

this.wwriteA(this.gMonthName + " " + this.gYear);

this.wwriteA("</B><BR>");

// Show navigation buttons

var prevMMYYYY = Calendar.calc_month_year(this.gMonth, this.gYear, -1);

var prevMM = prevMMYYYY[0];

var prevYYYY = prevMMYYYY[1];

var nextMMYYYY = Calendar.calc_month_year(this.gMonth, this.gYear, 1);

var nextMM = nextMMYYYY[0];

var nextYYYY = nextMMYYYY[1];

this.wwrite("<TABLE WIDTH='100%' BORDER=1 CELLSPACING=0 CELLPADDING=0 BGCOLOR='#e0e0e0'><TR><TD ALIGN=center>");

this.wwrite("[<A HREF=\"" +

"javascript:window.opener.Build(" +

"'" + this.gReturnItem + "', '" + this.gMonth + "', '" + (parseInt(this.gYear)-1) + "', '" + this.gFormat + "'" +

");" +

"\"><<<\/A>]</TD><TD ALIGN=center>");

this.wwrite("[<A HREF=\"" +

"javascript:window.opener.Build(" +

"'" + this.gReturnItem + "', '" + prevMM + "', '" + prevYYYY + "', '" + this.gFormat + "'" +

");" +

"\"><<\/A>]</TD><TD ALIGN=center>");

this.wwrite("[<A HREF=\"javascript:window.print();\">Print</A>]</TD><TD ALIGN=center>");

this.wwrite("[<A HREF=\"" +

"javascript:window.opener.Build(" +

"'" + this.gReturnItem + "', '" + nextMM + "', '" + nextYYYY + "', '" + this.gFormat + "'" +

");" +

"\">><\/A>]</TD><TD ALIGN=center>");

this.wwrite("[<A HREF=\"" +

"javascript:window.opener.Build(" +

"'" + this.gReturnItem + "', '" + this.gMonth + "', '" + (parseInt(this.gYear)+1) + "', '" + this.gFormat + "'" +

");" +

"\">>><\/A>]</TD></TR></TABLE><BR>");

// Get the complete calendar code for the month..

vCode = this.getMonthlyCalendarCode();

this.wwrite(vCode);

this.wwrite("</font></body></html>");

this.gWinCal.document.close();

}

Calendar.prototype.showY = function() {

var vCode = "";

var i;

var vr, vc, vx, vy; // Row, Column, X-coord, Y-coord

var vxf = 285; // X-Factor

var vyf = 200; // Y-Factor

var vxm = 10; // X-margin

var vym; // Y-margin

if (isIE) vym = 75;

else if (isNav) vym = 25;

this.gWinCal.document.open();

this.wwrite("<html>");

this.wwrite("<head><title>Calendar</title>");

this.wwrite("<style type='text/css'>\n<!--");

for (i=0; i<12; i++) {

vc = i % 3;

if (i>=0 && i<= 2) vr = 0;

if (i>=3 && i<= 5) vr = 1;

if (i>=6 && i<= 8) vr = 2;

if (i>=9 && i<= 11) vr = 3;

vx = parseInt(vxf * vc) + vxm;

vy = parseInt(vyf * vr) + vym;

this.wwrite(".lclass" + i + " {position:absolute;top:" + vy + ";left:" + vx + ";}");

}

this.wwrite("-->\n</style>");

this.wwrite("</head>");

this.wwrite("<body " +

"link=\"" + this.gLinkColor + "\" " +

"vlink=\"" + this.gLinkColor + "\" " +

"alink=\"" + this.gLinkColor + "\" " +

"text=\"" + this.gTextColor + "\">");

this.wwrite("<FONT FACE='" + fontface + "' SIZE=2><B>");

this.wwrite("Year : " + this.gYear);

this.wwrite("</B><BR>");

// Show navigation buttons

var prevYYYY = parseInt(this.gYear) - 1;

var nextYYYY = parseInt(this.gYear) + 1;

this.wwrite("<TABLE WIDTH='100%' BORDER=1 CELLSPACING=0 CELLPADDING=0 BGCOLOR='#e0e0e0'><TR><TD ALIGN=center>");

this.wwrite("[<A HREF=\"" +

"javascript:window.opener.Build(" +

"'" + this.gReturnItem + "', null, '" + prevYYYY + "', '" + this.gFormat + "'" +

");" +

"\" alt='Prev Year'><<<\/A>]</TD><TD ALIGN=center>");

this.wwrite("[<A HREF=\"javascript:window.print();\">Print</A>]</TD><TD ALIGN=center>");

this.wwrite("[<A HREF=\"" +

"javascript:window.opener.Build(" +

"'" + this.gReturnItem + "', null, '" + nextYYYY + "', '" + this.gFormat + "'" +

");" +

"\">>><\/A>]</TD></TR></TABLE><BR>");

// Get the complete calendar code for each month..

var j;

for (i=11; i>=0; i--) {

if (isIE)

this.wwrite("<DIV ID=\"layer" + i + "\" CLASS=\"lclass" + i + "\">");

else if (isNav)

this.wwrite("<LAYER ID=\"layer" + i + "\" CLASS=\"lclass" + i + "\">");

this.gMonth = i;

this.gMonthName = Calendar.get_month(this.gMonth);

vCode = this.getMonthlyCalendarCode();

this.wwrite(this.gMonthName + "/" + this.gYear + "<BR>");

this.wwrite(vCode);

if (isIE)

this.wwrite("</DIV>");

else if (isNav)

this.wwrite("</LAYER>");

}

this.wwrite("</font><BR></body></html>");

this.gWinCal.document.close();

}

Calendar.prototype.wwrite = function(wtext) {

this.gWinCal.document.writeln(wtext);

}

Calendar.prototype.wwriteA = function(wtext) {

this.gWinCal.document.write(wtext);

}

Calendar.prototype.cal_header = function() {

var vCode = "";

vCode = vCode + "<TR>";

vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Sun</B></FONT></TD>";

vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Mon</B></FONT></TD>";

vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Tue</B></FONT></TD>";

vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Wed</B></FONT></TD>";

vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Thu</B></FONT></TD>";

vCode = vCode + "<TD WIDTH='14%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Fri</B></FONT></TD>";

vCode = vCode + "<TD WIDTH='16%'><FONT SIZE='2' FACE='" + fontface + "' COLOR='" + this.gHeaderColor + "'><B>Sat</B></FONT></TD>";

vCode = vCode + "</TR>";

return vCode;

}

Calendar.prototype.cal_data = function() {

var vDate = new Date();

vDate.setDate(1);

vDate.setMonth(this.gMonth);

vDate.setFullYear(this.gYear);

var vFirstDay=vDate.getDay();

var vDay=1;

var vLastDay=Calendar.get_daysofmonth(this.gMonth, this.gYear);

var vOnLastDay=0;

var vCode = "";

/*

Get day for the 1st of the requested month/year..

Place as many blank cells before the 1st day of the month as necessary.

*/

vCode = vCode + "<TR>";

for (i=0; i<vFirstDay; i++) {

vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(i) + "><FONT SIZE='2' FACE='" + fontface + "'> </FONT></TD>";

}

// Write rest of the 1st week

for (j=vFirstDay; j<7; j++) {

vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j) + "><FONT SIZE='2' FACE='" + fontface + "'>" +

"<A HREF='#' " +

"onClick=\"self.opener.document." + this.gReturnItem + ".value='" +

this.format_data(vDay) +

"';window.close();\">" +

this.format_day(vDay) +

"</A>" +

"</FONT></TD>";

vDay=vDay + 1;

}

vCode = vCode + "</TR>";

// Write the rest of the weeks

for (k=2; k<7; k++) {

vCode = vCode + "<TR>";

for (j=0; j<7; j++) {

vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j) + "><FONT SIZE='2' FACE='" + fontface + "'>" +

"<A HREF='#' " +

"onClick=\"self.opener.document." + this.gReturnItem + ".value='" +

this.format_data(vDay) +

"';window.close();\">" +

this.format_day(vDay) +

"</A>" +

"</FONT></TD>";

vDay=vDay + 1;

if (vDay > vLastDay) {

vOnLastDay = 1;

break;

}

}

if (j == 6)

vCode = vCode + "</TR>";

if (vOnLastDay == 1)

break;

}

// Fill up the rest of last week with proper blanks, so that we get proper square blocks

for (m=1; m<(7-j); m++) {

if (this.gYearly)

vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j+m) +

"><FONT SIZE='2' FACE='" + fontface + "' COLOR='gray'> </FONT></TD>";

else

vCode = vCode + "<TD WIDTH='14%'" + this.write_weekend_string(j+m) +

"><FONT SIZE='2' FACE='" + fontface + "' COLOR='gray'>" + m + "</FONT></TD>";

}

return vCode;

}

Calendar.prototype.format_day = function(vday) {

var vNowDay = gNow.getDate();

var vNowMonth = gNow.getMonth();

var vNowYear = gNow.getFullYear();

if (vday == vNowDay && this.gMonth == vNowMonth && this.gYear == vNowYear)

return ("<FONT COLOR=\"RED\"><B>" + vday + "</B></FONT>");

else

return (vday);

}

Calendar.prototype.write_weekend_string = function(vday) {

var i;

// Return special formatting for the weekend day.

for (i=0; i<weekend.length; i++) {

if (vday == weekend<i>)

return (" BGCOLOR=\"" + weekendColor + "\"");

}

return "";

}

Calendar.prototype.format_data = function(p_day) {

var vData;

var vMonth = 1 + this.gMonth;

vMonth = (vMonth.toString().length < 2) ? "0" + vMonth : vMonth;

var vMon = Calendar.get_month(this.gMonth).substr(0,3).toUpperCase();

var vFMon = Calendar.get_month(this.gMonth).toUpperCase();

var vY4 = new String(this.gYear);

var vY2 = new String(this.gYear.substr(2,2));

var vDD = (p_day.toString().length < 2) ? "0" + p_day : p_day;

/* switch (this.gFormat) {

case "MM\/DD\/YYYY" :

vData = vMonth + "\/" + vDD + "\/" + vY4;

break;

case "MM\/DD\/YY" :

vData = vMonth + "\/" + vDD + "\/" + vY2;

break;

case "MM-DD-YYYY" :

vData = vMonth + "-" + vDD + "-" + vY4;

break;

case "MM-DD-YY" :

vData = vMonth + "-" + vDD + "-" + vY2;

break;

case "DD\/MON\/YYYY" :

vData = vDD + "\/" + vMon + "\/" + vY4;

break;

case "DD\/MON\/YY" :

vData = vDD + "\/" + vMon + "\/" + vY2;

break;

case "DD-MON-YYYY" :

vData = vDD + "-" + vMon + "-" + vY4;

break;

case "DD-MON-YY" :

vData = vDD + "-" + vMon + "-" + vY2;

break;

case "DD\/MONTH\/YYYY" :

vData = vDD + "\/" + vFMon + "\/" + vY4;

break;

case "DD\/MONTH\/YY" :

vData = vDD + "\/" + vFMon + "\/" + vY2;

break;

case "DD-MONTH-YYYY" :

vData = vDD + "-" + vFMon + "-" + vY4;

break;

case "DD-MONTH-YY" :

vData = vDD + "-" + vFMon + "-" + vY2;

break;

case "DD\/MM\/YYYY" :

vData = vDD + "\/" + vMonth + "\/" + vY4;

break;

case "DD\/MM\/YY" :

vData = vDD + "\/" + vMonth + "\/" + vY2;

break;

case "DD-MM-YYYY" :

vData = vDD + "-" + vMonth + "-" + vY4;

break;

case "DD-MM-YY" :

vData = vDD + "-" + vMonth + "-" + vY2;

break;

default :

vData = vMonth + "\/" + vDD + "\/" + vY4;

}*/

vData = vY4vMonthvDD ;

//vData = vDD"."vMonth"."vY4;

return vData;

}

function Build(p_item, p_month, p_year, p_format) {

var p_WinCal = ggWinCal;

gCal = new Calendar(p_item, p_WinCal, p_month, p_year, p_format);

// Customize your Calendar here..

gCal.gBGColor="white";

gCal.gLinkColor="black";

gCal.gTextColor="black";

gCal.gHeaderColor="darkgreen";

// Choose appropriate show function

if (gCal.gYearly) gCal.showY();

else gCal.show();

}

function show_calendar() {

/*

p_month : 0-11 for Jan-Dec; 12 for All Months.

p_year : 4-digit year

p_format: Date format (mm/dd/yyyy, dd/mm/yy, ...)

p_item : Return Item.

*/

p_item = arguments[0];

if (arguments[1] == null)

p_month = new String(gNow.getMonth());

else

p_month = arguments[1];

if (arguments[2] == "" || arguments[2] == null)

p_year = new String(gNow.getFullYear().toString());

else

p_year = arguments[2];

if (arguments[3] == null)

p_format = "MM/DD/YYYY";

else

p_format = arguments[3];

vWinCal = window.open("", "Calendar",

"width=300,height=250,status=no,resizable=no,top=100,left=100");

vWinCal.opener = self;

ggWinCal = vWinCal;

Build(p_item, p_month, p_year, p_format);

}

/*

Yearly Calendar Code Starts here

*/

function show_yearly_calendar(p_item, p_year, p_format) {

// Load the defaults..

if (p_year == null || p_year == "")

p_year = new String(gNow.getFullYear().toString());

if (p_format == null || p_format == "")

p_format = "MM/DD/YYYY";

var vWinCal = window.open("", "Calendar", "scrollbars=yes");

vWinCal.opener = self;

ggWinCal = vWinCal;

Build(p_item, null, p_year, p_format);

}