日期:2014-05-16  浏览次数:20346 次

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"               
 	});
});