我正在从事HP自主交织的Teamsite DCT,我正在尝试将jQuery Datepicker添加到“selectDate”文本元素中.
基本上这个文本元素是属性为min = 1的复制容器的一部分.
因此,在表单加载时,复制容器的第一个实例具有附带选择日期文本项的日期选择器.但是当我添加新的复制容器时,新实例的“选择日期”文本元素不会被填充到datepicker.
<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",inst ) { f.$("input[name*='startDate']").datepicker( "option","maxDate",selectedDate ); f.$(this).datepicker( "option",'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','12/31/9999').datepicker('hide').blur(); }); } function init(){ IWEventRegistry.addItemHandler("/Root/sequenceContainer/rowContainer","OnReplicantAdded",testReplicant);} function testReplicant(item) { o.topFrameLoaded();} init();
解决方法
有一个内置的,你可以打电话.
一个例子可以是:
一个例子可以是:
<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>
这应该产生日历或帮助您在正确的轨道.