CalendarLite 轻量级的Ext 日历

[置顶] Lite-Ext 适合WebPage的轻量级Ext

在 google code 持续更新，这里停止

演示@google code  

 

 

利用ext core 以及 界面设计素材 重新简化实现 Ext 日历 ，单用的话可节省网络带宽。

 

实现要点：

1.Date api ，某日属于周几，某月有几天
2.td text-align:center (ie 必须为td 指定宽度才居中)
3.按照星期构建表格，注意前后月边界问题
4.table ie处理问题，需要强制指定用dom操作
5.colSpan cellSpacing hideFocus (colspan cellspacing ie dom 设置 有问题 ,直接html 属性小写没问题)

 

 

 

 

 

 

 

 

 

 

 

 

 

/*
	Author: http://yiminghe.iteye.com/blog/379727
	v1.0(20090424) 按照ext DatePicker素材及思想简化重新实现日历选择器，尚未实现：键盘导航，小时分钟选择，
		1.Date api ，某日属于周几，某月有几天
		2.td text-align:center (ie 必须为td 指定宽度才居中)
		3.按照星期构建表格，注意前后月边界问题 
		4.table ie处理问题，需要强制指定用dom操作
		5.colSpan cellSpacing hideFocus (colspan cellspacing ie dom 设置 有问题 ,直接html 属性小写没问题)
	
	v1.5(20090518) 同年月选择处理，添加了时分秒选择,尚未实现：键盘导航
	v1.8(20090620) 整合日期和时间输入,布局调整,添加关联输入框功能
	v2.0(20090723) 国际化支持，支持code配置使用语言，界面优化调整，添加从指定时间开始周计数，否则就1,2,3排序
	v2.0.5(20090804) 添加功能:失去焦点，就隐藏
	v2.0.6(20090901) 31号出错修正
	v2.0.7(20090903) z-index change to 99999
*/

 

使用代码

 

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(){
		//显示在 x y 坐标
		c.show(600,50);
	});
	
	//选择后处罚 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(){
		//显示在 x y 坐标
		c2.show(600,400);
	});
	
	//选择后处罚 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();
	});
       
});

 

使用注意：

 

鼓励尽量重用，比如多个 input 的 onclick 都 show 一个 日历

 

评论

1 楼 bopeng 2009-06-20  

试试还不错