ext里可以选择年月日时分秒的控件资源-CSDN下载

共14个文件

gif：7个

js：3个

css：3个

4星 · 超过85%的资源需积分: 15 99 浏览量 2011-05-17 16:34:52 上传评论收藏 58KB ZIP 举报

在EXT（Ext JS）这个强大的JavaScript框架中，时间控件是一种常见的组件，用于用户界面中进行日期和时间的选择。EXT提供了多种这样的控件，其中一种是能够选择年、月、日、时、分、秒的高级时间选择器。标题中的"ext里可以选择年月日时分秒的控件"很可能指的是EXT中的`Ext.picker.Date`或者更具体地，可能是`Ext.picker.DateTimePicker`组件。 `Ext.picker.Date`是EXT中基础的日期选择器，而`Ext.picker.DateTimePicker`则增加了对时间选择的支持，让用户能够精确到小时、分钟甚至秒。这种控件对于需要用户输入特定时间的Web应用非常有用，比如事件调度、会议预定或者时间记录等场景。在EXT项目中实现这个功能，首先需要引入EXT库，然后创建一个DateTimePicker实例，配置相应的选项。例如： ```javascript var dateTimePicker = Ext.create('Ext.picker.DateTimePicker', { fieldLabel: '选择日期和时间', width: 300, value: new Date(), // 默认值为当前时间 showTime: true, // 开启时间选择 showSeconds: true, // 显示秒 format: 'Y年M月d日 H:i:s' // 日期时间格式 }); ``` 这里，`showTime`和`showSeconds`属性分别控制是否显示时间和秒，`format`属性则定义了日期时间的显示格式，可以根据需求进行调整。在实际应用中，你可能还需要监听`select`事件来获取用户选定的日期和时间，以便进一步处理： ```javascript dateTimePicker.on('select', function(picker, value) { console.log('选择的日期和时间：', value.format('Y年M月d日 H:i:s')); }); ``` 压缩包中的"CalendarLite"可能是一个简化版的日历组件，它可能提供了一个轻量级的解决方案来实现类似的功能。使用这个组件时，你需要按照其提供的API和文档进行集成和定制。 EXT的时间控件提供了一种直观且灵活的方式来让用户在Web应用中选择日期和时间，结合适当的配置和事件处理，可以满足各种复杂的需求。在EXT的项目中，熟练掌握这些控件的使用，对于提升用户体验和提高工作效率具有重要意义。

资源推荐

资源详情

资源评论

收起资源包目录

ext-CalendarLite_2.0.7.zip （14个子文件）

CalendarLite

css

core.css 6KB

ie6.css 341B

calendarlite.css 5KB

image

glass-bg.gif 873B

left-btn.gif 870B

btn-arrow-light.gif 916B

tool-sprites.gif 4KB

row-over.gif 823B

hd-sprite.gif 1KB

right-btn.gif 871B

calendarlite.html 3KB

javascript

calendarlite.js 31KB

ext-base.js 42KB

ext-core.js 94KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>日历测试</title> <script type="text/javascript" src="javascript/ext-base.js"></script> <script type="text/javascript" src="javascript/ext-core.js"></script>  <script type="text/javascript" src="javascript/calendarlite.js"></script>   <link rel="stylesheet" type="text/css" href="css/layout.css" /> <link rel="stylesheet" type="text/css" href="css/core.css" />   <link rel="stylesheet" type="text/css" href="css/calendarlite.css" /> </head> <body> <button id='action_a'> 显示日期</button> <br/> <br/> <br/> <br/> <button id='action_b'> 显示日期+时间 (英文,指定日期开始周计数)</button> <br/> <div id="status"> </div> <br/> <br/> <br/> <form action=""> <input id="test" style="width:200px;" /><button id='action_c'> 关联到input</button> </form> <script type="text/javascript"> //<![CDATA[ Ext.onReady(function() { Date.patterns = { ISO8601Long:"Y-m-d H:i:s", ISO8601Short:"Y-m-d", ShortDate: "n/j/Y", LongDate: "l, F d, Y", FullDateTime: "l, F d, Y g:i:s A", MonthDay: "F d", ShortTime: "g:i A", LongTime: "g:i:s A", SortableDateTime: "Y-m-d\\TH:i:s", UniversalSortableDateTime: "Y-m-d H:i:sO", YearMonth: "F, Y" }; /* 只显示日期 */ var c=new Ext.ux.CalendarLite(); Ext.get('action_a').on('click',function(evt){ //显示在 x y 坐标 c.show(600,50); evt.stopEvent(); }); //选择后处罚 select 事件 c.on('select',function(selectedDate) { alert('you selected :' + selectedDate.toLocaleString()); //隐藏掉 this.hide(); }); c.on('week',function(selectedWeek) { alert('you selected week :' + selectedWeek); //隐藏掉 this.hide(); }); /* 显示日期+时间 */ var c2=new Ext.ux.CalendarLite({ enableTime:true, code:'en', weekStartDate:new Date(97,6,13) }); Ext.get('action_b').on('click',function(evt){ //显示在 x y 坐标 c2.show(600,400); evt.stopEvent(); }); //选择后处罚 select 事件 c2.on('select',function(selectedDate) { alert('you selected :' + selectedDate.toLocaleString()); //隐藏掉 this.hide(); }); c2.on('week',function(selectedWeek) { alert('you selected week :' + selectedWeek); //隐藏掉 this.hide(); }); /* 关联到input */ var c3=new Ext.ux.CalendarLite({ enableTime:true, weekStartDate:new Date(97,6,13) }); Ext.get('action_c').on('click',function(evt){ //显示在 x y 坐标 c3.show('test'); evt.stopEvent(); }); //选择后处罚 select 事件 c3.on('select',function(selectedDate,cur_input) { alert('you selected :' + selectedDate.toLocaleString()); cur_input.dom.value=selectedDate.toLocaleString(); //隐藏掉 this.hide(); }); c3.on('week',function(selectedWeek,cur_input) { alert('you selected week :' + selectedWeek); cur_input.dom.value=selectedWeek; //隐藏掉 this.hide(); }); }); //]]> </script> </body> </html>

评论收藏

内容反馈