nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Calendar display from DCT

Aleks

Hi everyone,

I tried to make a DCT to allow user to have "Calendar" button for date selection.
I wrote a javascript and have a html for calendar to put into iw folder in TS server, then I put the path for javascript in DCT with IWEventRegistry.addItemHandler script. Now the Calendar button was in DCT, but just don't show the Calendar after I click on it.

Have anyone know why occur this issue?

TS7.2 with Win2003.

Thank you for any reply.

Find more posts tagged with

Comments

RonaldV

Aleks,

I would start very simple with this: create a basic html file with just some plain text under httpd/iw/custom/simple.html and then try this in a browser: http:///iw/custom/simple.html. Does that show something?

Also, to make life simple for you, use a old-fashoined 'callout'-element in your dcr in favor over creating it in formapi. It that works and you REALLY need to do it via formapi you always still can.

If you still need help after this be sure to put more detail in your question, like: what does the popup window show, like 404? What do the logs say? Version? Os?

Hope this helps

sanu

I used the OOB calendar control which probably is located at /iw-cc/base/widget/calendar/calendar_init.js in my DCT and it was working fine.

annu1

Sanu..

Could you please post the DCT code for refrence.just want to know which function of the calneder_init.js u used and on which instance...

Thanks in advance...

sanu

Hi,

I am posting the required portion of the DCT here:

Step 1: I referred the calendar_init.js and my custom JS in DCT. My custom JS is having the event handlers
<script language="javascript" location="webserver" src="/iw-mount/.../js/Metadata_CheckBox.js"/>

<script src="/iw-cc/base/widget/calendar/calendar_init.js" language="javascript" type="text/javascript"/>

Step 2: I have a date type item and a callout button

Expiry Date

Expiration date for articles

Step 3: The callout button event handler invokes the method in calender_init.js

/*--------------------Event Handlers--------------------*/

IWEventRegistry.addItemHandler("/KMS_metadata/KMS_Metadata/ExpireDate", "onCallout", calendar);

IWEventRegistry.addItemHandler('/KMS_metadata/KMS_Metadata/resetOutputButton_ExpireDate', 'onCallout', resetOutputButton_ExpireDate);

/*--------------------Functions--------------------*/

function calendar(item) {

function DateCallBack(date) {item.setValue(formatDate(date, "yyyy-MM-dd"));}

var theCalendarWindow = fwShowCalendar("-callback", DateCallBack, "-initialdate", new Date().valueOf());

}

function resetOutputButton_ExpireDate(item)

{

var targetItem = IWDatacapture.getItem('/KMS_metadata/KMS_Metadata/ExpireDate');

if (targetItem)

{

targetItem.setValue("");

}

}

sanu

Hi,

I am posting the required portion of the DCT here:

Step 1: I referred the calendar_init.js and my custom JS in DCT. My custom JS is having the event handlers

<script language="javascript" location="webserver" src="/iw-mount/.../js/Metadata_CheckBox.js"/>

<script src="/iw-cc/base/widget/calendar/calendar_init.js" language="javascript" type="text/javascript"/>

Step 2: I have a date type item and a callout button

Expiry Date

Expiration date for articles

Step 3: The callout button event handler invokes the method in calender_init.js

/*--------------------Event Handlers--------------------*/

IWEventRegistry.addItemHandler("/KMS_metadata/KMS_Metadata/ExpireDate", "onCallout", calendar);

IWEventRegistry.addItemHandler('/KMS_metadata/KMS_Metadata/resetOutputButton_ExpireDate', 'onCallout', resetOutputButton_ExpireDate);

/*--------------------Functions--------------------*/

function calendar(item) {

function DateCallBack(date) {item.setValue(formatDate(date, "yyyy-MM-dd"));}

var theCalendarWindow = fwShowCalendar("-callback", DateCallBack, "-initialdate", new Date().valueOf());

}

function resetOutputButton_ExpireDate(item)

{

var targetItem = IWDatacapture.getItem('/KMS_metadata/KMS_Metadata/ExpireDate');

if (targetItem)

{

targetItem.setValue("");

}

}

Adam Stoller

Learn how to format and preview your posts - before you submit them (twice) - I've taken the liberty of doing it for you - I make no claims on the actual code.

Hi,

I am posting the required portion of the DCT here:

Step 1: I referred the calendar_init.js and my custom JS in DCT. My custom JS is having the event handlers


<script language="javascript" location="webserver" src="/iw-mount/.../js/Metadata_CheckBox.js"/>
<script src="/iw-cc/base/widget/calendar/calendar_init.js" language="javascript" type="text/javascript"/>

Step 2: I have a date type item and a callout button

 <item name="ExpireDate" pathid="ExpireDate" rowcontinue="t">
  <label>Expiry Date</label>
  <description>Expiration date for articles
  <text required="f" maxlength="10" size="32">
    <cgi-callout label="Select Date"/>
  </text>
</item>
<item name="resetOutputButton_ExpireDate" pathid="resetOutputButton_ExpireDate">
  <label></label>
  <radio>
    <cgi-callout label="Reset"/>
  </radio>
</item>

Step 3: The callout button event handler invokes the method in calender_init.js

/*--------------------Event Handlers--------------------*/
IWEventRegistry.addItemHandler("/KMS_metadata/KMS_Metadata/ExpireDate", "onCallout", calendar);
IWEventRegistry.addItemHandler('/KMS_metadata/KMS_Metadata/resetOutputButton_ExpireDate', 'onCallout', resetOutputButton_ExpireDate); 
/*--------------------Functions--------------------*/
function calendar(item) {
  function DateCallBack(date) {item.setValue(formatDate(date, "yyyy-MM-dd"));}
  var theCalendarWindow = fwShowCalendar("-callback", DateCallBack, "-initialdate", new Date().valueOf());
}
function resetOutputButton_ExpireDate(item) {
  var targetItem = IWDatacapture.getItem('/KMS_metadata/KMS_Metadata/ExpireDate');
  if (targetItem) {
    targetItem.setValue("");
  }
}

Tyagi

formatDate(date, "yyyy-MM-dd") function is not returning anything.

Any pointer on this?

nipper

Do you even have a function called formatDate ? FInd it and then debug

nipper

Actually, ignore my previous post, you likely did not include the right JS:

This should be in one of your 1st definitions.

Tyagi

Thanks for swift response!

I have below in the DCT

in js

IWEventRegistry.addItemHandler("/personalization_root_container/personalization_container/ExpireDate", "onCallout", calendar);

function calendar(item) {

      function DateCallBack(date) {item.setValue(formatDate(date, "MM-dd-yyyy"));}

                theCalendarWindow = fwShowCalendar("-callback", DateCallBack, "-initialdate", new Date().valueOf());


}

Tyagi

Thanks!

The below change has fix the issue.

function calendar(item) {

      function DateCallBack(date) {
     var formattedDate = date.getMonth()+1 + '/' + date.getDate() + '/' + date.getFullYear();
     item.setValue(formattedDate);
    }

                theCalendarWindow = fwShowCalendar("-callback", DateCallBack, "-initialdate", new Date().valueOf());

Narmada741

Hi,

i need date format in this way: "Sat. Apr. 18". I tried for month in JS as below and calendar is not working. Please suggest ways

function calendar(item) {

function DateCallBack(date) {

//var month = month[date.getMonth()].substr(0,3);

var formattedDate = month[date.getMonth()].substr(0,3)+1 + '.' + date.getDate() + '.' + date.getFullYear(); item.setValue(formattedDate);

}

theCalendarWindow = fwShowCalendar("-callback", DateCallBack, "-initialdate", new Date().valueOf()); }

Suggestions would be appreciated.

nipper

Why don't you do some debugging?

If that was my code, I would use an alert to see the original informantion and also post what you are getting ,

invoice_new.rptdesign

Rick Poulin

You could also just take a moment to look at your code.. Pretty sure adding 1 to a three-letter month string is not what you intended.

OAuth2IPSE.java

Tyagi

Please debug your JS. Break the below and get the alert for each and every value. By doing this you can find where is the issue.

var formattedDate = month[date.getMonth()].substr(0,3)+1 + '.' + date.getDate() + '.' + date.getFullYear();