 |
|||||
|
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
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 WebFOCUS/FOCUS Forum on Focal Point [CLOSED] Setting a WF Calendar Control's Value in JavaScript
Focal Point Forums WebFOCUS/FOCUS Forum on Focal Point [CLOSED] Setting a WF Calendar Control's Value in JavaScript Read-Only TopicGo | Search | Notify | Tools |
| [CLOSED] Setting a WF Calendar Control's Value in JavaScript | Login/Join |
| Gold member |
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 | ||
|
| Expert |
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
| |||||||||
|
| Powered by Social Strata |
 | Please Wait. Your request is being processed... |
Read-Only TopicFocal Point Focal Point Forums WebFOCUS/FOCUS Forum on Focal Point [CLOSED] Setting a WF Calendar Control's Value in JavaScript
Focal Point Forums WebFOCUS/FOCUS Forum on Focal Point [CLOSED] Setting a WF Calendar Control's Value in JavaScriptCopyright © 1996-2020 Information Builders
| View $GS_USERNAME's Public Profile |
| Add $GS_USERNAME to my Ignore List |
| View Recent Posts by $GS_USERNAME |
| Notify me of New Posts by $GS_USERNAME |