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

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

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

我的DCT代码
这里显示了一些部分


  1. <script language="javascript" location="webserver" type="text/javascript" src="/iw/macysdotcom/formapi/jquery/js/jquery-ui-1.9.2.custom.min.js" />
  2. <script language="javascript" location="webserver" src="/iw/macysdotcom/formapi/library.js"/>
  3. <script language="javascript" location="template-type" src="shy.js"/>
  4. <root-container location="Root" name="Root">
  5. <container name='sequenceContainer' min='1' max='25' default='0'>
  6. <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>
  7. <item name="startDate" pathid="startDate" required="t" rowcontinue="t">
  8. <label>Start Date</label>
  9. <text required="f" size="30" maxlength="100">
  10. </text>
  11. </item>
  12. <item name="endDate" pathid="endDate" required="t">
  13. <label>End Date</label>
  14. <text required="f" size="30" maxlength="100">
  15. </text>
  16. </item>
  17. </container>
  18. </container>
  19. </root-container>

JS代码如下

  1. /******************************************************************************
  2. // Setting up some variables. From line Number 15 to 29.
  3. // You’ll notice a list of scripts and CSS files we want to use within
  4. // Formspublisher and a few basic state variables.
  5. *******************************************************************************/
  6. var o = {};
  7. var server = window.location.hostname;
  8. o.iwInitialised = false;
  9. o.loadedScripts = 0;
  10. var f = window.top.formframe;
  11. o.stylesheets = new Array(
  12. '/iw/macysdotcom/formapi/jquery/css/smoothness/jquery-ui-1.9.2.custom.min.css'
  13. );
  14.  
  15. o.scripts = new Array(
  16. '/iw/macysdotcom/formapi/jquery/jquery-1.8.3.min.js','/iw/macysdotcom/formapi/jquery/js/jquery-ui-1.9.2.custom.min.js'
  17. );
  18.  
  19. /********************************************************************************/
  20.  
  21. /********************************************************************************
  22. // The code below instructs jQuery to periodically check whether
  23. // the o.iwInitialised variable has been set to true by the formAPI onFormInit
  24. // event before executing the next steps
  25. *********************************************************************************/
  26. $().ready(function() {
  27. o.waitForIwInitialise();
  28. });
  29.  
  30. o.waitForIwInitialise = function() {
  31. if(!o.iwInitialised) {
  32. setTimeout('o.waitForIwInitialise()',500);
  33. } else {
  34. o.ready();
  35. }
  36. }
  37.  
  38. /********************************************************************************/
  39.  
  40. /************************************************************************************
  41. // In code below setting a flag to say that Formspublisher is initialised
  42. // I am also disabling the field that we will apply auto-completion to.
  43. // I had issues when a user would start to type before auto complete was fully
  44. // initialised.
  45. ************************************************************************************/
  46. o.iwInitalise = function() {
  47. o.iwInitialised = true;
  48.  
  49. }
  50. /*****************************************************************************/
  51.  
  52. /********************************************************************************/
  53. // setting data that contains all of the values for our auto-complete field.
  54. /********************************************************************************/
  55. o.ready = function() {
  56. o.loadStylesheets();
  57. }
  58.  
  59. /*******************************************************************************/
  60.  
  61.  
  62. /********************************************************************************
  63. // A TeamSite DCT is rendered to the browser as a series of iFrames.
  64. // Our next step is to inject the Javascript and CSS that we need into
  65. // the iFrame containing the form that makes up our DCT.
  66. //-------------------------------------------------------------------------------
  67. // We are targeting our CSS and scripts at window.top.formframe.document
  68. // which is where the DCT form resides. The list of Javascript and CSS
  69. // files is taken from our configuration variables so you could reuse
  70. // this code to add any jQuery plugins that you wish to use.
  71. ********************************************************************************/
  72. o.loadStylesheets = function() {
  73. //alert("DatA Later : "+o.data);
  74. var doc = f.document;
  75. var head = doc.getElementsByTagName('head')[0];
  76. $(o.stylesheets).each(function() {
  77. var script = doc.createElement("link");
  78. script.setAttribute("rel","stylesheet");
  79. script.setAttribute("type","text/css");
  80. script.setAttribute("href",this);
  81. head.appendChild(script);
  82. var Meta = doc.createElement("Meta");
  83. Meta.setAttribute("http-equiv","X-UA-Compatible");
  84. Meta.setAttribute("content","IE=edge");
  85. //alert(Meta);
  86. head.appendChild(Meta);
  87. });
  88. o.loadScripts();
  89. }
  90. o.loadScripts = function() {
  91. var document = f.document;
  92. if(o.loadedScripts < o.scripts.length) {
  93. var head = document.getElementsByTagName('head')[0];
  94. var src = o.scripts[o.loadedScripts];
  95. var script = document.createElement('script');
  96. script.setAttribute('src',src);
  97. script.setAttribute('type','text/javascript');
  98. o.loadedScripts++;
  99. script.onreadystatechange= function () {
  100. if (this.readyState == 'loaded') o.loadScripts();
  101. }
  102. script.onload = o.loadScripts;
  103. head.appendChild(script);
  104. } else {
  105. o.topFrameLoaded();
  106. }
  107. }
  108. /********************************************************************************/
  109.  
  110. IWEventRegistry.addFormHandler("onFormInit",o.iwInitalise);
  111.  
  112.  
  113. /*********************************************************************************
  114. // final step is to enable auto complete.we are finding a reference to our text
  115. // field in the DCT and enabling auto complete.
  116. // We are also re-enabling the field now that all is ready
  117. *********************************************************************************/
  118. o.topFrameLoaded = function() {
  119. f.$("input[name*='startDate']").datepicker({
  120. 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 ) {
  121. f.$("input[name*='endDate']").datepicker( "option","minDate",selectedDate );
  122. f.$( this ).datepicker( "option",'dateFormat','mm/d/yy' );
  123. }
  124. });
  125.  
  126. f.$("input[name*='endDate']").datepicker({
  127. changeMonth: true,dateFormat: "mm/d/yy",inst ) {
  128. f.$("input[name*='startDate']").datepicker( "option","maxDate",selectedDate );
  129. f.$(this).datepicker( "option",'mm/d/yy' );
  130. }
  131. })
  132.  
  133. f.$('button.ui-datepicker-current').live('click',function() {
  134. f.$.datepicker._curInst.input.datepicker('setDate',new Date()).datepicker('hide').blur();
  135. });
  136.  
  137. f.$('button.ui-datepicker-close').live('click','12/31/9999').datepicker('hide').blur();
  138. });
  139.  
  140. }
  141.  
  142. function init(){
  143. IWEventRegistry.addItemHandler("/Root/sequenceContainer/rowContainer","OnReplicantAdded",testReplicant);}
  144.  
  145. function testReplicant(item) {
  146. o.topFrameLoaded();}
  147.  
  148. init();

解决方法

有一个内置的,你可以打电话.
一个例子可以是:
  1. <item name="Date" pathid="Date">
  2. <label>Date</label>
  3. <description>Date Picker.</description>
  4. <text required="t" size="12" maxlength="10" validation-regex="^[0-9]{4}\/[0-1][0-9]\/[0-3][0-9]$">
  5. <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"/>
  6. <default>yyyy/mm/dd</default>
  7. </text>
  8. <readonly />
  9. </item>

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

猜你在找的jQuery相关文章