DateField完整技術

  var period1Start = new Ext.form.DateField({<br /> width: 200,<br /> format: 'Y-m-d',<br /> id: grid.id+'1',<br /> // value:new Date(),<br /> // minValue:'2009-08-08',<br /> blankText: '請選擇期間1起始日期',<br /> emptyText: '請選擇期間1起始日期',<br /> invalidText: "{0}不是有效日期 - 樣本格式:/"1900-01-01/"",<br /> showToday: false,<br /> x: 150,<br /> y: 6<br /> });</p><p> var period1End = new Ext.form.DateField({<br /> width: 200,<br /> format: 'Y-m-d',<br /> id:grid.id+'2',<br /> // value:new Date().add(Date.DAY,+4),<br /> blankText: '請選擇期間1結束日期',<br /> emptyText: '請選擇期間1結束日期',<br /> invalidText: "{0}不是有效日期 - 樣本格式:/"1900-01-01/"",<br /> showToday: false,<br /> x: 150,<br /> y: 36,<br /> listeners: {<br /> focus: function() {<br /> if (period1Start.getValue() == '')<br /> Ext.MessageBox.alert("提示", "請選擇起始日期");<br /> else {<br /> var date = period1Start.getValue();<br /> this.setMinValue(date)<br /> }<br /> }<br /> }<br /> });

給每個DateField加一個特別的ID是為了避免多個JS同時調用這個日曆控制項時發生日曆位置（DateField位置）偏離，其中grid是我項目中引用它的一個表格，