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"
});
});
分享到:
相关推荐
Ext JS Calendar 日历是一款强大的日历控件,适用于构建具有丰富功能的日程管理应用。它提供了多种视图,包括月视图、日视图和周视图,允许用户灵活查看和管理时间安排。本文将深入探讨Ext JS Calendar的核心组件、...
/** * 此组件为带时分秒的日期控件,在原DateTimeField修改 * 此功能较以前版本增加功能 * 1,在GRID中使用时,增加单元格处于编辑状态时的初始化此控件值 * 2,增加操作日选择器时初始化时分秒功能 * 3,增加点击...
3. **使用时间选择器插件**:EXT JS 提供了一个时间选择器插件(`Ext.picker.DateTimePicker`),可以与日期控件一起使用,为用户提供一个完整的日期和时间选择器。我们可以在控件的配置中添加`useTimePicker: true`...
在实际应用中,EXT日期时间控件2通常与其他EXT组件如表格、表单等结合使用,构建复杂的用户界面。例如,在一个日程管理应用中,用户可以通过这个控件来设定事件的开始和结束时间。开发者可以通过配置项来定制控件的...
你可以通过查看这个文件来学习如何在实际项目中集成和使用EXT的日期时间控件。 总之,EXT日期时间控件是一个强大且灵活的组件,它在网页应用中提供了便捷的日期和时间选择功能。理解并熟练掌握其使用方法和配置,...
在EXT JS这个强大的JavaScript框架中,日期控件是常见的组件之一,用于用户输入或选择日期。然而,标准的EXT JS日期字段(DateTimeField)默认仅支持日和月的选择,不包含时间部分,即小时、分钟和秒。为了解决这个...
扩展Ext日期控件,使其显示农历、让星期六、星期天高亮显示。 先有两种实现方式,一为重写Date.DatePicker和Ext.form.DateField控件的相应方法、另一种为单独做一个扩展扩建。 本JS文件在Ext3.1测试通过、若果要在...
EXTJS提供了多种时间日期选择控件,如`MyTimeField.js`、`TimePicker.js`和`DateTimePicker.js`,这些文件分别对应不同的功能和使用场景。 1. `MyTimeField.js`:这是一个自定义的时间字段组件,可能扩展了EXTJS的...
接下来是`Spinner控件`,它通常被用作数值的增加或减少按钮,可以与`Ext.form.field.Number`结合使用。`Spinner`控件提供了一个直观的方式来改变数值,用户可以通过点击向上或向下的箭头进行增减。`Spinner`控件允许...
此外,这个控件也与工具相关,因为它是一个可以复用的代码模块,可以整合到各种基于Ext JS的Web应用中,作为日期选择功能的一部分。开发者可以通过引入`monthPick.js`,简单配置即可在表单中添加只选择年月的...
本文将深入探讨如何使用EXT树控件结合JSON数据进行数据传递和显示,以及如何处理EXT树的事件响应。 首先,EXT树控件的工作原理是基于JSON数据进行渲染。JSON(JavaScript Object Notation)是一种轻量级的数据交换...
Ext.NET控件是一种将流行的JavaScript库Ext JS与微软的.NET框架相结合的技术,旨在为开发者提供在ASP.NET环境中创建丰富交互式Web应用的能力。通过将Ext JS的功能集成到.NET控件中,开发人员可以利用.NET的强大后端...
Ext JS使用SASS(Syntactically Awesome Style Sheets)预处理器来处理CSS样式,使得样式管理更加高效。 2. **My97 DatePicker**:这是一款轻量级但功能强大的JavaScript日期选择插件,它提供了多种皮肤、日期格式...
EXT日期加时间控件 EXT日期加时间控件
在给定的文件中,`date.html` 可能是包含示例代码或展示如何在网页中使用此控件的HTML文件,`ext-all.js` 是EXT框架的全量版本,包含了所有EXT组件的实现,而`DatePicker.js` 则可能是EXT专门处理日期选择的...
标签"ext 日期控件 时分秒"进一步强调了这个话题的关键点,即EXT JS的日期控件与时间选择的结合,特别是对秒级别的支持。在实际开发中,这样的自定义组件可能以单独的EXT JS插件形式存在,方便其他开发者复用。 在...
时间控件通常会与表单结合使用,通过事件监听和验证机制确保用户输入的时间符合业务规则。 实现这样一个时间控件,开发者可能需要利用ExtJS的以下核心概念和技术: 1. **组件(Component)**:ExtJS中的所有可视化...
EXT中的日期时间控件通常基于EXT的`Ext.form.field.DateTimePicker`类实现,它结合了日期和时间字段的功能。开发者可以通过配置选项来调整控件的显示样式、日期格式、时间间隔等。例如,你可以设置默认的日期格式为...
`dateField`组件是`Ext`提供的一种用于输入日期的控件,它可以被高度定制以满足各种用户界面需求。 首先,让我们了解`dateField`的基本用法。在`Ext`中,`dateField`通常通过创建`Ext.form.field.Date`类的实例来...
在给定的标题和描述中,提到的是一个使用JS编写的日期控件,它可以与文本框进行绑定,用户在选择日期后,无需页面刷新,就能直接在文本框中看到所选日期。 这个控件名为"My97DatePicker",可能是基于JavaScript实现...