將jQuery日期選擇器應用到TeamTas中的DCT

Question

我正在開發一個HP自治交織的Teamsite DCT，並且我試圖將jQuery Datepicker添加到「selectDate」文本元素中。

基本上這個文本元素是屬性min = 1的複製容器的一部分。 因此，在表單加載時，replicant容器的第一個實例的日期選取器附帶有選擇日期文本項目。但是，當我添加新的複製容器時，新實例的選擇日期文本元素沒有使用datepicker填充。

我的DCT代碼爲 有些部分在此處顯示

<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> 

的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(); 

Answer 1

有一個內置的，你可以打電話。 它的一個例子是：

<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> 

這將產生日曆或幫助您在正確的軌道上。

Answer 2

是的，我們可以在我們的模板中包含JQuery。 請參考此鏈接快速入門： Jquery in TeamSite

希望，這會有所幫助。

謝謝！