在Teamsite中将jQuery日期选择器应用于DCT

前端之家收集整理的这篇文章主要介绍了在Teamsite中将jQuery日期选择器应用于DCT前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在从事HP自主交织的Teamsite DCT,我正在尝试将jQuery Datepicker添加到“selectDate”文本元素中.

基本上这个文本元素是属性为min = 1的复制容器的一部分.
因此,在表单加载时,复制容器的第一个实例具有附带选择日期文本项的日期选择器.但是当我添加新的复制容器时,新实例的“选择日期”文本元素不会被填充到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",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>

这应该产生日历或帮助您在正确的轨道.

原文链接:https://www.f2er.com/jquery/178989.html

猜你在找的jQuery相关文章