我正在从事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>
这应该产生日历或帮助您在正确的轨道.