Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [CLOSED] Setting a WF Calendar Control's Value in JavaScript

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[CLOSED] Setting a WF Calendar Control's Value in JavaScript
 Login/Join
 
Gold member
posted
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
 
Posts: 57 | Location: Des Moines, IA | Registered: April 30, 2009Report This Post
Expert
posted Hide Post
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 
 
Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [CLOSED] Setting a WF Calendar Control's Value in JavaScript

Copyright © 1996-2020 Information Builders