我正在研究 HP 自治交织的 Teamsite DCT，我正在尝试将 jQuery Datepicker 添加到“selectDate”文本元素中。
基本上，这个文本元素是具有属性 min=1 的复制容器的一部分。因此，在表单加载时，复制容器的第一个实例将日期选择器附加到选择日期文本项。但是当我添加新的复制容器时，新实例的选择日期文本元素不会被 datepicker 填充。
我的 DCT 代码是 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><img src='/iw-cc/teamsite/images/bullets/blue_bullet.png'/> 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>
JS代码如下
/******************************************************************************
// 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();