`
yghjoe
  • 浏览: 20469 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

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"               
 	});
});
分享到:
评论

相关推荐

    ext js calendar 日历

    Ext JS Calendar 日历是一款强大的日历控件,适用于构建具有丰富功能的日程管理应用。它提供了多种视图,包括月视图、日视图和周视图,允许用户灵活查看和管理时间安排。本文将深入探讨Ext JS Calendar的核心组件、...

    带时分秒的EXT日期控件

    /** * 此组件为带时分秒的日期控件,在原DateTimeField修改 * 此功能较以前版本增加功能 * 1,在GRID中使用时,增加单元格处于编辑状态时的初始化此控件值 * 2,增加操作日选择器时初始化时分秒功能 * 3,增加点击...

    EXT js 4带时间的日期控件

    3. **使用时间选择器插件**:EXT JS 提供了一个时间选择器插件(`Ext.picker.DateTimePicker`),可以与日期控件一起使用,为用户提供一个完整的日期和时间选择器。我们可以在控件的配置中添加`useTimePicker: true`...

    ext日期时间控件2

    在实际应用中,EXT日期时间控件2通常与其他EXT组件如表格、表单等结合使用,构建复杂的用户界面。例如,在一个日程管理应用中,用户可以通过这个控件来设定事件的开始和结束时间。开发者可以通过配置项来定制控件的...

    ext 日期时间控件

    你可以通过查看这个文件来学习如何在实际项目中集成和使用EXT的日期时间控件。 总之,EXT日期时间控件是一个强大且灵活的组件,它在网页应用中提供了便捷的日期和时间选择功能。理解并熟练掌握其使用方法和配置,...

    ext日期控件时分秒

    在EXT JS这个强大的JavaScript框架中,日期控件是常见的组件之一,用于用户输入或选择日期。然而,标准的EXT JS日期字段(DateTimeField)默认仅支持日和月的选择,不包含时间部分,即小时、分钟和秒。为了解决这个...

    Ext日期控件显示农历,及其周末高亮显示

    扩展Ext日期控件,使其显示农历、让星期六、星期天高亮显示。 先有两种实现方式,一为重写Date.DatePicker和Ext.form.DateField控件的相应方法、另一种为单独做一个扩展扩建。 本JS文件在Ext3.1测试通过、若果要在...

    Ext时间日期选择控件,精确到秒

    EXTJS提供了多种时间日期选择控件,如`MyTimeField.js`、`TimePicker.js`和`DateTimePicker.js`,这些文件分别对应不同的功能和使用场景。 1. `MyTimeField.js`:这是一个自定义的时间字段组件,可能扩展了EXTJS的...

    Ext日期时间控件 Spinner控件 Ext代码 Extjs Grid

    接下来是`Spinner控件`,它通常被用作数值的增加或减少按钮,可以与`Ext.form.field.Number`结合使用。`Spinner`控件提供了一个直观的方式来改变数值,用户可以通过点击向上或向下的箭头进行增减。`Spinner`控件允许...

    Ext DateField控件 - 只选择年月

    此外,这个控件也与工具相关,因为它是一个可以复用的代码模块,可以整合到各种基于Ext JS的Web应用中,作为日期选择功能的一部分。开发者可以通过引入`monthPick.js`,简单配置即可在表单中添加只选择年月的...

    ext 树控件+数据库

    本文将深入探讨如何使用EXT树控件结合JSON数据进行数据传递和显示,以及如何处理EXT树的事件响应。 首先,EXT树控件的工作原理是基于JSON数据进行渲染。JSON(JavaScript Object Notation)是一种轻量级的数据交换...

    Ext .net控件

    Ext.NET控件是一种将流行的JavaScript库Ext JS与微软的.NET框架相结合的技术,旨在为开发者提供在ASP.NET环境中创建丰富交互式Web应用的能力。通过将Ext JS的功能集成到.NET控件中,开发人员可以利用.NET的强大后端...

    ext JS集成My97DatePicker日期控件

    Ext JS使用SASS(Syntactically Awesome Style Sheets)预处理器来处理CSS样式,使得样式管理更加高效。 2. **My97 DatePicker**:这是一款轻量级但功能强大的JavaScript日期选择插件,它提供了多种皮肤、日期格式...

    EXT日期加时间控件

    EXT日期加时间控件 EXT日期加时间控件

    EXT 时间控件

    在给定的文件中,`date.html` 可能是包含示例代码或展示如何在网页中使用此控件的HTML文件,`ext-all.js` 是EXT框架的全量版本,包含了所有EXT组件的实现,而`DatePicker.js` 则可能是EXT专门处理日期选择的...

    ext 时间控件带有时分秒的控件

    标签"ext 日期控件 时分秒"进一步强调了这个话题的关键点,即EXT JS的日期控件与时间选择的结合,特别是对秒级别的支持。在实际开发中,这样的自定义组件可能以单独的EXT JS插件形式存在,方便其他开发者复用。 在...

    Ext时间控件.rar

    时间控件通常会与表单结合使用,通过事件监听和验证机制确保用户输入的时间符合业务规则。 实现这样一个时间控件,开发者可能需要利用ExtJS的以下核心概念和技术: 1. **组件(Component)**:ExtJS中的所有可视化...

    ext 下拉日期时间控件

    EXT中的日期时间控件通常基于EXT的`Ext.form.field.DateTimePicker`类实现,它结合了日期和时间字段的功能。开发者可以通过配置选项来调整控件的显示样式、日期格式、时间间隔等。例如,你可以设置默认的日期格式为...

    Ext扩展dateField时间控件,可以选择年月日、年月、年、月

    `dateField`组件是`Ext`提供的一种用于输入日期的控件,它可以被高度定制以满足各种用户界面需求。 首先,让我们了解`dateField`的基本用法。在`Ext`中,`dateField`通常通过创建`Ext.form.field.Date`类的实例来...

    JS写的日期控件,可以和文本框绑定

    在给定的标题和描述中,提到的是一个使用JS编写的日期控件,它可以与文本框进行绑定,用户在选择日期后,无需页面刷新,就能直接在文本框中看到所选日期。 这个控件名为"My97DatePicker",可能是基于JavaScript实现...

Global site tag (gtag.js) - Google Analytics