Applying jQuery date picker to DCT in Teamsite

Question

I am working on a HP autonomy interwoven Teamsite DCT and I am trying to add jQuery Datepicker to a "selectDate" text element.

Basically this text element is a part of a replicant container with attribute min=1. So at the time of form load the first instance of replicant container have date picker attached with the select Date text item. But when I am adding the new replicant container then the new instance's select Date text element is not getting populated with datepicker.

My DCT code is Some part is shown here

    <script language="javascript" location="webserver" type="text/javascript" src="/iw/macysdotcom/formapi/jquery/js/jquery-ui-1.9.2.custom.min.js" />
    <script language="javascript" location="webserver" src="/iw/macysdotcom/formapi/library.js"/> 
    <script language="javascript" location="template-type" src="shy.js"/>       
    <root-container location="Root" name="Root">
            <container name='sequenceContainer' min='1' max='25' default='0'>
                <container name='rowContainer' min='1' max='25' default='0'><label>&lt;img src='/iw-cc/teamsite/images/bullets/blue_bullet.png'/&gt; Row Container</label>
                <item name="startDate" pathid="startDate" required="t" rowcontinue="t">
                    <label>Start Date</label>
                    <text required="f" size="30" maxlength="100">
                    </text>
                </item>
                <item name="endDate" pathid="endDate" required="t">
                    <label>End Date</label>
                    <text required="f" size="30" maxlength="100">
                    </text>
                </item>                 
                </container>
            </container>
    </root-container>   

the JS code is as follows

/******************************************************************************
// Setting up some variables. From line Number 15 to 29.
// You’ll notice a list of scripts and CSS files we want to use within
// Formspublisher and a few basic state variables.
*******************************************************************************/
var o = {};
var server = window.location.hostname;
o.iwInitialised = false;
o.loadedScripts = 0;
var f = window.top.formframe;
o.stylesheets = new Array(
                    '/iw/macysdotcom/formapi/jquery/css/smoothness/jquery-ui-1.9.2.custom.min.css'
                );

o.scripts = new Array(
    '/iw/macysdotcom/formapi/jquery/jquery-1.8.3.min.js',
    '/iw/macysdotcom/formapi/jquery/js/jquery-ui-1.9.2.custom.min.js'
);

/********************************************************************************/

/********************************************************************************
// The code below instructs jQuery to periodically check whether 
// the o.iwInitialised variable has been set to true by the formAPI onFormInit
// event before executing the next steps
*********************************************************************************/
$().ready(function() {
    o.waitForIwInitialise();
});

o.waitForIwInitialise = function() {
    if(!o.iwInitialised) {
        setTimeout('o.waitForIwInitialise()', 500);
    } else {
        o.ready();
    }
}

/********************************************************************************/

/************************************************************************************
// In code below setting a flag to say that Formspublisher is initialised 
// I am also disabling the field that we will apply auto-completion to. 
// I had issues when a user would start to type before auto complete was fully 
// initialised.
************************************************************************************/
o.iwInitalise = function() {
    o.iwInitialised = true;

}
/*****************************************************************************/

/********************************************************************************/
// setting data that contains all of the values for our auto-complete field.
/********************************************************************************/
o.ready = function() {
    o.loadStylesheets();            
}

/*******************************************************************************/


/********************************************************************************
// A TeamSite DCT is rendered to the browser as a series of iFrames. 
// Our next step is to inject the Javascript and CSS that we need into 
// the iFrame containing the form that makes up our DCT.
//-------------------------------------------------------------------------------
// We are targeting our CSS and scripts at window.top.formframe.document 
// which is where the DCT form resides. The list of Javascript and CSS 
// files is taken from our configuration variables so you could reuse 
// this code to add any jQuery plugins that you wish to use.
********************************************************************************/           
o.loadStylesheets = function() {
    //alert("DatA Later :  "+o.data);
    var doc = f.document;
    var head = doc.getElementsByTagName('head')[0];     
    $(o.stylesheets).each(function() {
        var script = doc.createElement("link");
        script.setAttribute("rel", "stylesheet");
        script.setAttribute("type", "text/css");
        script.setAttribute("href", this);
        head.appendChild(script);
        var meta = doc.createElement("meta");
        meta.setAttribute("http-equiv", "X-UA-Compatible");
        meta.setAttribute("content", "IE=edge");
        //alert(meta);
        head.appendChild(meta);
    });         
    o.loadScripts();
}
o.loadScripts = function() {                
    var document = f.document;
    if(o.loadedScripts < o.scripts.length) {
        var head = document.getElementsByTagName('head')[0];
        var src = o.scripts[o.loadedScripts];
        var script = document.createElement('script');          
        script.setAttribute('src', src);
        script.setAttribute('type', 'text/javascript');
        o.loadedScripts++;
        script.onreadystatechange= function () {
            if (this.readyState == 'loaded') o.loadScripts();
        }
        script.onload = o.loadScripts;
        head.appendChild(script);
    } else {
        o.topFrameLoaded();
    }
}
/********************************************************************************/

IWEventRegistry.addFormHandler("onFormInit", o.iwInitalise);


/*********************************************************************************
// final step is to enable auto complete.we are finding a reference to our text 
// field in the DCT and enabling auto complete. 
// We are also re-enabling the field now that all is ready
*********************************************************************************/
o.topFrameLoaded = function() {     
    f.$("input[name*='startDate']").datepicker({
      dateFormat: "mm/d/yy",
      changeMonth: true,
      changeYear: true,
      minDate: 0,
      numberOfMonths: 1,
      showOn: "both",
      buttonImage: "/iw/macysdotcom/formapi/jquery/calendar.png",
      showButtonPanel: true,
      closeText : "12/31/9999",
      buttonImageOnly: true,
      onClose: function( selectedDate, inst ) {
        f.$("input[name*='endDate']").datepicker( "option", "minDate", selectedDate );
        f.$( this ).datepicker( "option", 'dateFormat', 'mm/d/yy' );
      }
    });

    f.$("input[name*='endDate']").datepicker({
      changeMonth: true,
      dateFormat: "mm/d/yy",
      changeYear: true,
      numberOfMonths: 1,
      showOn: "both",
      buttonImage: "/iw/macysdotcom/formapi/jquery/calendar.png",
      showButtonPanel: true,
      buttonImageOnly: true,
      closeText : "12/31/9999",
      onClose: function( selectedDate, inst ) {
        f.$("input[name*='startDate']").datepicker( "option", "maxDate", selectedDate );
        f.$(this).datepicker( "option", 'dateFormat', 'mm/d/yy' );
      }
    })

    f.$('button.ui-datepicker-current').live('click', function() {
        f.$.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur();
    });

    f.$('button.ui-datepicker-close').live('click', function() {
        f.$.datepicker._curInst.input.datepicker('setDate','12/31/9999').datepicker('hide').blur();
    });

}   

function init(){
IWEventRegistry.addItemHandler("/Root/sequenceContainer/rowContainer","OnReplicantAdded",testReplicant);}

function testReplicant(item) {
o.topFrameLoaded();}

init();

Answer 1

There is an inbuilt one that you can call. An example of it could be:

<item name="Date" pathid="Date">
<label>Date</label>
<description>Date Picker.</description>
<text required="t" size="12" maxlength="10" validation-regex="^[0-9]{4}\/[0-1][0-9]\/[0-3][0-9]$">
<callout url="/iw-bin/iw_cgi_wrapper.cgi/calendar.ipl/allow_past_dates=1" label="View Calendar" window-features="width=200,height=230,resizable=no,toolbar=no,scrollbars=no,titlebar=no"/>
<default>yyyy/mm/dd</default>
    </text>
    <readonly />
    </item>

This should produce the calendar or helps you on the right track.