ext日期控件可以结合jscalendar使用
jsp:
<title>日期</title>
<link rel="stylesheet" type="text/css"
href="<%=path%>/scripts/ext-3.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="<%=path%>/scripts/jquery.js"></script>
<script type="text/javascript" src="<%=path%>/scripts/ext-3.2.1/adapter/jquery/ext-jquery-adapter.js"></script> <script type="text/javascript" src="<%=path%>/scripts/ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=path%>/scripts/ext-3.2.1/ext-all.js"></script>
<script type="text/javascript" src="<%=path%>/scripts/ext-3.2.1/examples/shared/examples.js"></script>
<script type="text/javascript" src="<%=path%>/scripts/ext-3.2.1/ext-lang-zh_CN.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="<%=path%>/scripts/jscalendar/skins/calendar-blue.css" />
<script type="text/javascript" src="<%=path%>/scripts/jscalendar/calendar.js"></script>
<script type="text/javascript" src="<%=path%>/scripts/jscalendar/lang/calendar-zh.js"></script>
<script type="text/javascript" src="<%=path%>/scripts/jscalendar/calendar-setup.js"></script> <script type="text/javascript" src="<%=path%>/log/log.js"></script>
</head>
js:
$(document).ready( function() {
var form = new Ext.form.FormPanel({
width: "100%",
autoHeight: true,
labelWidth: 70,
labelAlign: "left",
frame: true,
defaults: {xtype: "textfield", anchor: "95%"},
items: [ {
name: "begin_time",
id: "begin_time",
fieldLabel: "开始时间",
readOnly: true
}, {
name: "end_time",
id: "end_time",
fieldLabel: "结束时间",
readOnly: true
}],
buttons: [{text: "搜索", handler: searchSubmit
}, {text: "重置", handler: function() {
form.getForm().reset();
}}]
});
//以下是点击文本框显示日期控件
Calendar.setup({
inputField : "begin_time",
ifFormat : "%Y-%m-%d %H:%M:%S",
showsTime : true,
button : "begin_time"
});
Calendar.setup({
inputField : "end_time",
ifFormat : "%Y-%m-%d %H:%M:%S",
showsTime : true,
button : "end_time"
});
});