单独使用Ext的DatePicker，与普通表单的Input文本框集成

最新推荐文章于 2020-12-20 11:55:40 发布

东海青蛙

最新推荐文章于 2020-12-20 11:55:40 发布

阅读量1.7k

点赞数

分类专栏： javascript 文章标签： input ext stylesheet function extjs date

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

原文地址：http://www.java2000.net/p14326

单独使用Ext的DatePicker，与普通表单的Input文本框集成

完整的源代码看这里，里面的css和js我就不写了吧，呵呵！

<%@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"/>
<link rel="stylesheet" type="text/css" href="css/ext-patch.css"/>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/adapter/prototype/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/adapter/prototype/ext-prototype-adapter.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<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;
}
}
</script>
</head>
<body id="defaultuser">
<input type="text" name="dateSign" id="dateSign" value="2009-01-07" οnclick="showExtCal()"/>
</body>
</html>