Focal Point
[CLOSED] Setting a WF Calendar Control's Value in JavaScript

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/601101125

September 03, 2010, 09:58 AM
Craig R.
[CLOSED] Setting a WF Calendar Control's Value in JavaScript
I have two calendar controls on a form, representing "begin" month and "end" month. The date format I'm using is trMYY, which displays the month name and year in the associated calendar control textbox when the user selects any day on the pop-up calendar. Example: User clicks on any day on the May 2010 calendar, and the textbox shows May, 2010. When the form is submitted, I then get the value 052010 in the bound amper variable. This works well when the user sets up both calendars; however, using JavaScript in the form I sometimes want to default the "end" calendar control with the "begin" calendar control's value. When I set the "end" calendar control's value to the value of the "begin" month, both textboxes, understandably, display the same value, e.g., May, 2010. HOWEVER, when the form is submitted, the value of the amper variable in the defaulted "end" calendar control has the value of the textbox (trMYY format), not the expected MMYYYY format. How can I set the "end" calendar control in JavaScript so that the amper variable is established correctly??

Thanks, all!

C.R.

This message has been edited. Last edited by: Kerry,


v8.1.04, 64-bit Windows (Reporting Server), Apache Tomcat (Web/App Server), HTML, PDF, AHTML, Excel outputs
September 03, 2010, 10:51 AM
Tony A
Craig,

Here's some example code from my library that I wrote about 5 years ago. It has four date controls which I have given an extra attribute called "dateoffset". If you change the first control date and then click on one of the other date controls, then the contents of that control is changed via the javascript. I know that this is not exactly what you require but it could give you a few ideas for your own solution.

<HTML>
<HEAD>
<TITLE>Controlling Calendars using JavaScript
</TITLE>
<META content="WebFocus Report Layout Painter" name ="Generator">
<SCRIPT id=IbiOptionsScript type=text/javascript>
var cgipath = "cgipath";
var ibirls = "ibirls";
var multidrill = "multidrill";
var mntFormValidate = "mntFormValidate";
var dyncalendar = "dyncalendar";
var ibiOptions = new Array(cgipath,ibirls,mntFormValidate,dyncalendar,multidrill);
</SCRIPT>
<SCRIPT id=calendar src="/approot/baseapp/calendar.js" type=text/javascript></SCRIPT>
<SCRIPT id=nls src="/ibi_html/javaassist/nls.js" type=text/javascript></SCRIPT>
<SCRIPT id=ibigbl src="/ibi_html/javaassist/ibi/html/js/ibigbl.js" type=text/javascript></SCRIPT>
<SCRIPT id=ibigblloadCss type=text/javascript>
ibigblloadCss(null);
</SCRIPT>
</HEAD>
<BODY onload=OnLoad() style="FONT-WEIGHT: 400; FONT-SIZE: 10pt; FONT-STYLE: normal; FONT-FAMILY: MS Sans Serif; BACKGROUND-COLOR: rgb(240,245,255);
      TEXT-DECORATION: none" pagesizeCY="2000" pagesizeCX="2000" gridsizeCY="10" gridsizeCX="10" snaptogrid="1" drawgrid="1" nextelementnum="6">
<!--startibiitems-->
<FORM onsubmit=SaveValues() method="post" name="form">
<INPUT type=hidden value=calendar_controls name="IBIF_ex">
<INPUT id=IBIAPP_app type=hidden value=baseapp name="IBIAPP_app">
<SPAN id=ITEM1 style="FONT-WEIGHT: 700; FONT-SIZE: 20pt; Z-INDEX: 2; LEFT: 70px; WIDTH: 400px; FONT-STYLE: normal; FONT-FAMILY: Times New Roman;
      POSITION: absolute; TOP: 20px; HEIGHT: 30px; TEXT-ALIGN: center; TEXT-DECORATION: none" name ="text1" elementname="text1" elementtype="text">
<SPAN FragmentColor="0" sourcetype="typeUrl" targettype="0" FragmentStartChar="0" FragmentEndChar="22">Calendar Controls Test
</SPAN>
</SPAN>
<SPAN style="LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP:  70px; HEIGHT: 22px">Base Date</SPAN>
<INPUT id=ITEM2 style="Z-INDEX: 34; LEFT: 170px; WIDTH: 69px; POSITION: absolute; TOP:  70px; HEIGHT: 22px" name=date1  elementname="edit2"
      elementtype="editcalendar" labelid caption="editcalendar" operation="NONE" calendardatatype="0" calendardata="1/1/1990;2/1/2015" ibiformat="DMYY">
<SPAN style="LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP:  95px; HEIGHT: 22px">Date plus 6 days</SPAN>
<INPUT id=ITEM3 dateoffset=-6  onFocus="SetEndDate('ITEM2','ITEM3');" style="Z-INDEX: 34; LEFT: 170px; WIDTH: 69px; POSITION: absolute; TOP:  95px;
      HEIGHT: 22px" name=date2  elementname="edit3" elementtype="editcalendar" labelid caption="editcalendar" operation="NONE" calendardatatype="0"
      calendardata="1/1/1990;2/1/2015" ibiformat="DMYY">
<SPAN style="LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 120px; HEIGHT: 22px">Date minus 6 days</SPAN>
<INPUT id=ITEM4 dateoffset=6   onFocus="SetEndDate('ITEM2','ITEM4');" style="Z-INDEX: 34; LEFT: 170px; WIDTH: 69px; POSITION: absolute; TOP: 120px;
      HEIGHT: 22px" name=date3  elementname="edit4" elementtype="editcalendar" labelid caption="editcalendar" operation="NONE" calendardatatype="0"
      calendardata="1/1/1990;2/1/2015" ibiformat="DMYY">
<SPAN style="LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 145px; HEIGHT: 22px">Date plus 30 days</SPAN>
<INPUT id=ITEM5 dateoffset=-30 onFocus="SetEndDate('ITEM2','ITEM5');" style="Z-INDEX: 34; LEFT: 170px; WIDTH: 69px; POSITION: absolute; TOP: 145px;
      HEIGHT: 22px" name=date4  elementname="edit5" elementtype="editcalendar" labelid caption="editcalendar" operation="NONE" calendardatatype="0"
      calendardata="1/1/1990;2/1/2015" ibiformat="DMYY">
<SPAN id=ITEM6 style="Z-INDEX: 6; LEFT: 70px; WIDTH: 600px; POSITION: absolute; TOP: 220px; HEIGHT: 30px; TEXT-ALIGN: left; TEXT-DECORATION: none"
      name ="text6" elementname="text6" elementtype="text">
<SPAN FragmentColor="0" sourcetype="typeUrl" targettype="0" FragmentStartChar="0" FragmentEndChar="22">
This test screen is to show the control of calendar inputs created within WebFOCUS.<br /><br />
The base date on this page is used within the JavaScript to provide a point of reference for the other date controls.
Choosing a date for the base date and then clicking within the input area of the other dates will trigger their update.
The dates will change to a date offset by the value of the "dateoffset" attribute contained within the calendar control.<br /><br />
You can also select an alternative date using the controls calendar icon on the right hand side of the control. <u>However</u>,
clicking within the input area of the other calendar controls at anytime will result in a reset of the date contained within it
to the date depicted by the base date and offset value.
</SPAN>
</SPAN>
</FORM>
<!--endibiitems-->
<SCRIPT id=OnloadHandler>
function OnLoad() {
<!--startibilines-->
UpdateData();
<!--endibilines-->
// This call is added to set the default values for the calendar controls
PrepDates();
}
</SCRIPT>
</BODY>
<SCRIPT id=loadcalendar type=text/javascript>
if(ibigblInitInfo.testOptions(dyncalendar)){
     setDateRange();
     setupDocCalendars();
}
</SCRIPT>
</HTML>

Javascript
// Version 1.0
// Written by : Anthony Alsford - EDATA Limited
// Purpose    : To populate all calendar controls on a form with an elementtype attribute
//              set to "editcalendar" or "14".

// This function is called on form loading and pulls a collection of calendar controls
// before calling the function to set the date value
    function PrepDates() {
      for (i=0;i<document.all.length;i++)
      {
        if (document.all(i).elementtype == "editcalendar" || document.all(i).elementtype == "14")
          {
           this.displayElement = document.getElementById (document.all(i).id);
           SetDate(document.all(i).id);
          }
      }
    }

// This function is designed to set the date value according to an offset value contained
// within the input tag.
// The only parameter required is the elements id value.
    function SetDate(item) {
      this.displayElement = document.getElementById(item);
      var today = new Date();
      var offset = this.displayElement.getAttribute('dateoffset');
      var dateFormat = this.displayElement.getAttribute('ibiformat');
      var fullDate = dateFormat.match(/YY/);
//alert(offset);
      today.setDate(today.getDate()-offset);
      var t_date = today.getDate();
      if (t_date<10) {t_date='0'+t_date};
      var t_mnth = today.getMonth()+1;
      if (t_mnth<10) {t_mnth='0'+t_mnth};
      var t_year = today.getFullYear();
      if (fullDate != 'YY') {
        t_year = t_year - 2000;
        if (t_year<10) {t_year='0'+t_year};
      }
      switch(dateFormat) {
        case 'DMY':
          var end_date = t_date+"/"+t_mnth+"/"+t_year;
          break;
        case 'DMYY':
          var end_date = t_date+"/"+t_mnth+"/"+t_year;
          break;
        case 'MDY':
          var end_date = t_mnth+"/"+t_date+"/"+t_year;
          break;
        case 'MDYY':
          var end_date = t_mnth+"/"+t_date+"/"+t_year;
          break;
        default:
          var end_date = t_year+"/"+t_mnth+"/"+t_date;
      }
      this.displayElement.value = end_date;
    }

// This function is called when the secondary date control gets focus
// The parameters required are the parent and child date control ids
    function SetEndDate(ctrl1,ctrl2) {
// Firstly assign the control objects using the parameters
      this.BegDate = document.getElementById(ctrl1);
      this.EndDate = document.getElementById(ctrl2);
// Next set a date variable using the content of the parent date control
// As a plus sign is a concatenation symbol the required addition does not seem
// to work correctly, so using a minus of a negative value does the trick!
      var b_year = this.BegDate.value.substring(6,8);
      if (b_year<50) {b_year = b_year - (-2000)} else {b_year = b_year - (-1900)};
      var b_mnth = this.BegDate.value.substring(3,5);
      if (b_mnth<10) {b_mnth='0'+b_mnth};
      var b_date = this.BegDate.value.substring(0,2);
      if (b_date<10) {b_date='0'+b_date};
      var today = new Date(b_year, b_mnth - 1, b_date);
//alert("Date : "+today);
// The following line will ensure that all dates are an offset from the parent date correctly
// even if it does not own a dateoffset attribute.
      var offset = this.EndDate.getAttribute('dateoffset')-this.BegDate.getAttribute('dateoffset');
//      var offset = this.EndDate.getAttribute('dateoffset');
      today.setDate(today.getDate()-offset);
      var t_date = today.getDate();
      if (t_date<10) {t_date='0'+t_date};
      var t_mnth = today.getMonth()+1;
      if (t_mnth<10) {t_mnth='0'+t_mnth};
      var t_year = today.getFullYear();
      if (t_year>=2000) {t_year = t_year - 2000} else {t_year = t_year - 1900};
      if (t_year<10) {t_year='0'+t_year};
      var end_date = t_date+"/"+t_mnth+"/"+t_year;
      this.EndDate.value = end_date;
    }

T


In FOCUS
since 1986		WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10