Extjs的DatePicker与普通表单的Input文本框集成

还处于实验阶段，运行效果如下

里面使用的是标准的Form的Input,而不是 Ext.FormPanel

如果你想在自己的表单里使用Ext的日期选择器，可以参考一下这个

Ext的DatePicker与普通表单的Input文本框集成

我这里也给出完整的代码，供喜爱Ext的朋友参考

<%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>测试Extjs的DatePicker的单独使用 - JAVA世纪网，www.java2000.net,老紫竹出品</title> <link rel="stylesheet" type="text/css" href="js/resources/css/ext-all.css" mce_href="js/resources/css/ext-all.css"/> <link rel="stylesheet" type="text/css" href="css/ext-patch.css" mce_href="css/ext-patch.css"/> <mce:script type="text/javascript" src="js/prototype.js" mce_src="js/prototype.js"></mce:script> <mce:script type="text/javascript" src="js/adapter/prototype/scriptaculous.js?load=effects" mce_src="js/adapter/prototype/scriptaculous.js?load=effects"></mce:script> <mce:script type="text/javascript" src="js/adapter/prototype/ext-prototype-adapter.js" mce_src="js/adapter/prototype/ext-prototype-adapter.js"></mce:script> <mce:script type="text/javascript" src="js/ext-all.js" mce_src="js/ext-all.js"></mce:script> <mce:script type="text/javascript"><!-- var dateSign; var dateSignShow; Ext.onReady(function(){ dateSign = new Ext.DatePicker({ applyTo:"dateSign", renderTo:"dateSign", hidden:"true", format:"Y-m-d" }); dateSign.on("select",function(src,date){ $("dateSign").value=date.format('Y-m-d'); dateSign.hide(); dateSignShow = false; }); }); function showExtCal(){ if(dateSignShow){ dateSign.hide(); dateSignShow = false; }else{ dateSign.setValue(Date.parseDate($("dateSign").value,'Y-m-d')); dateSign.show(); dateSignShow = true; } } // --></mce:script> </head> <body id="defaultuser"> <input type="text" name="dateSign" id="dateSign" value="2009-01-07" onclick="showExtCal()"/> </body> </html>