ExtJs中定制日历控件—

效果图：

代码：

     /*********************日历组件部分**************************** begin */
var dateArray = new Array();
var printDateArray = function(){
};
Ext.MyDatePicker = Ext.extend(Ext.DatePicker, {
todayText : '确定',
okText : ' 确定 ',
cancelText : '取消',
todayTip : '{0} (Spacebar)',
minText : 'This date is before the minimum date',
maxText : 'This date is after the maximum date',
format : 'Y-m-d',
disabledDaysText : 'Disabled',
disabledDatesText : 'Disabled',
dayNames : Date.dayNames,
nextText : 'Next Month (Control+Right)',
prevText : 'Previous Month (Control+Left)',
monthYearText : 'Choose a month (Control+Up/Down to move years)',
startDay : 0,
showToday : true,
initComponent : function(){
Ext.MyDatePicker.superclass.initComponent.call(this);
this.value = this.value ?
this.value.clearTime() : new Date().clearTime();
this.addEvents(
'select'
);
if(this.handler){
this.on('select', this.handler,  this.scope || this);
}
this.initDisabledDays();
},
onRender : function(container, position){
var m = [
'<table cellspacing="0" width="90%">',
'<tr>',
'<td class="x-date-left">',
'<a href="#" title="', this.prevText ,'"> </a>',
'</td>',
'<td class="x-date-middle" align="center"></td>',
'<td class="x-date-right">',
'<a href="#" title="', this.nextText ,'"> </a>',
'</td>',
'</tr>',
'<tr>',
'<td colspan="3">',
'<table class="x-date-inner" cellspacing="0">',
'<thead>',
'<tr>'
],
dn = this.dayNames,
i;
for(i = 0; i < 7; i++){
var d = this.startDay+i;
if(d > 6){
d = d-7;
}
m.push('<th><div align="center"><span >', '星期'+dn[d].substr(0,1), '</span></div></th>');//星期标题
}
m[m.length] = '</tr></thead><tbody ><tr>';
for(i = 0; i < 42; i++) {
if(i % 7 === 0 && i !== 0){
m[m.length] = '</tr><tr>';
}
//m[m.length] = '<td><a href="#" hidefocus="on" class="x-date-date" tabIndex="1"><em><span></span></em></a></td>';
m[m.length] = '<td height="40px" align="center" style="border:1 solid #F0F0F0"><h hidefocus="on" class="x-date-date" tabIndex="1" ><em><span></span></em></h></td>';
}
m.push('</tr></tbody></table></td></tr>',
this.showToday ? '<tr><td colspan="3" class="x-date-bottom" align="center"></td></tr>' : '',
'</table><div class="x-date-mp"></div>');
var el = document.createElement('div');
el.className = 'x-date-picker';
el.innerHTML = m.join('');
container.dom.insertBefore(el, position);
this.el = Ext.get(el);
this.eventEl = Ext.get(el.firstChild);
this.prevRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-left a'), {
handler: this.showPrevMonth,
scope: this,
preventDefault:true,
stopDefault:true
});
this.nextRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-right a'), {
handler: this.showNextMonth,
scope: this,
preventDefault:true,
stopDefault:true
});
this.monthPicker = this.el.down('div.x-date-mp');
this.monthPicker.enableDisplayMode('block');
this.keyNav = new Ext.KeyNav(this.eventEl, {
'left' : function(e){
if(e.ctrlKey){
this.showPrevMonth();
}else{
this.update(this.activeDate.add('d', -1));
}
},
'right' : function(e){
if(e.ctrlKey){
this.showNextMonth();
}else{
this.update(this.activeDate.add('d', 1));
}
},
'up' : function(e){
if(e.ctrlKey){
this.showNextYear();
}else{
this.update(this.activeDate.add('d', -7));
}
},
'down' : function(e){
if(e.ctrlKey){
this.showPrevYear();
}else{
this.update(this.activeDate.add('d', 7));
}
},
'pageUp' : function(e){
this.showNextMonth();
},
'pageDown' : function(e){
this.showPrevMonth();
},
'enter' : function(e){
e.stopPropagation();
return true;
},
scope : this
});
this.el.unselectable();
this.cells = this.el.select('table.x-date-inner tbody td');
this.textNodes = this.el.query('table.x-date-inner tbody span');
this.mbtn = new Ext.Button({
text: ' ',
tooltip: this.monthYearText,
renderTo: this.el.child('td.x-date-middle', true)
});
this.mbtn.el.child('em').addClass('x-btn-arrow');
if(this.showToday){
this.todayKeyListener = this.eventEl.addKeyListener(Ext.EventObject.SPACE, this.selectToday,  this);
var today = (new Date()).dateFormat(this.format);
this.todayBtn = new Ext.Button({
renderTo: this.el.child('td.x-date-bottom', true),
text: String.format(this.todayText, today),
tooltip: String.format(this.todayTip, today),
handler: this.selectToday,
scope: this
});
}
this.mon(this.eventEl, 'mousewheel', this.handleMouseWheel, this);
this.mon(this.eventEl, 'click', this.handleDateClick,  this);
this.mon(this.mbtn, 'click', this.showMonthPicker, this);
this.onEnable(true);
},
selectToday : function(){
if(this.todayBtn && !this.todayBtn.disabled){
printDateArray();   //返回结果
}
},
handleDateClick : function(e, t){
//this.fireEvent('select', this, this.value);
},
update : function(date, forceRefresh){
var vd = this.activeDate, vis = this.isVisible();
this.activeDate = date;
if(!forceRefresh && vd && this.el){
var t = date.getTime();
if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
this.cells.removeClass('x-date-selected');
this.cells.each(function(c){
if(c.dom.firstChild.dateValue == t){
c.addClass('x-date-selected');
if(vis){
Ext.fly(c.dom.firstChild).focus(50);
}
return false;
}
});
return;
}
}
var days = date.getDaysInMonth();
var firstOfMonth = date.getFirstDateOfMonth();
var startingPos = firstOfMonth.getDay()-this.startDay;
if(startingPos <= this.startDay){
startingPos += 7;
}
var pm = date.add('mo', -1);
var prevStart = pm.getDaysInMonth()-startingPos;
var cells = this.cells.elements;
var textEls = this.textNodes;
days += startingPos;
// convert everything to numbers so it's fast
var day = 86400000;
var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
var today = new Date().clearTime().getTime();
var sel = date.clearTime().getTime();
var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
var ddMatch = this.disabledDatesRE;
var ddText = this.disabledDatesText;
var ddays = this.disabledDays ? this.disabledDays.join('') : false;
var ddaysText = this.disabledDaysText;
var format = this.format;
if(this.showToday){
var td = new Date().clearTime();
var disable = (td < min || td > max ||
(ddMatch && format && ddMatch.test(td.dateFormat(format))) ||
(ddays && ddays.indexOf(td.getDay()) != -1));
if(!this.disabled){
this.todayBtn.setDisabled(disable);
this.todayKeyListener[disable ? 'disable' : 'enable']();
}
}
var setCellClass = function(cal, cell){
cell.title = '';
var t = d.getTime();
cell.firstChild.dateValue = t;
if(t == today){
cell.className += ' x-date-today';
cell.title = cal.todayText;
}
if(t == sel){
cell.className += ' x-date-selected';
if(vis){
Ext.fly(cell.firstChild).focus(50);
}
}
// disabling
if(t < min) {
cell.className = ' x-date-disabled';
cell.title = cal.minText;
return;
}
if(t > max) {
cell.className = ' x-date-disabled';
cell.title = cal.maxText;
return;
}
if(ddays){
if(ddays.indexOf(d.getDay()) != -1){
cell.title = ddaysText;
cell.className = ' x-date-disabled';
}
}
if(ddMatch && format){
var fvalue = d.dateFormat(format);
if(ddMatch.test(fvalue)){
cell.title = ddText.replace('%0', fvalue);
cell.className = ' x-date-disabled';
}
}
};
var i = 0;
for(; i < startingPos; i++) {
var tempId = "fruit"+i;
d.setDate(d.getDate()+1);
var fvalue = d.dateFormat(format);
textEls[i].innerHTML = '<div align="center"><font size ="2" color = "#8B8378" >'+(++prevStart)+'</font>'+'<br><input type="checkbox" id ="'+tempId+'"  value ="'+fvalue+'"><font size ="2" color = "#8B8378"  >排休</font></div>';
cells[i].className = 'x-date-prevday';
setCellClass(this, cells[i]);
Ext.get(tempId).on('click',function(e,f){
if(Ext.get(f.id).dom.checked){
dateArray[f.id.substring(5,f.id.length)] = f.value;
}else{
dateArray[f.id.substring(5,f.id.length)] = "";
}
});
}
for(; i < days; i++){
var tempId = "fruit"+i;
var intDay = i - startingPos + 1;
d.setDate(d.getDate()+1);
var fvalue = d.dateFormat(format);
textEls[i].innerHTML = '<div align="center"><font size ="2">'+(intDay)+'</font>'+'<br><input type="checkbox" id ="'+tempId+'"  value ="'+fvalue+'"><font size ="2">排休</font></div>';
cells[i].className = 'x-date-active';
setCellClass(this, cells[i]);
Ext.get(tempId).on('click',function(e,f){
if(Ext.get(f.id).dom.checked){
dateArray[f.id.substring(5,f.id.length)] = f.value;
}else{
dateArray[f.id.substring(5,f.id.length)] = "";
}
});
}
var extraDays = 0;
for(; i < 42; i++) {
var tempId = "fruit"+i;
d.setDate(d.getDate()+1);
var fvalue = d.dateFormat(format);
textEls[i].innerHTML = '<div align="center"><font size ="2" color = "#8B8378">'+(++extraDays)+'</font>'+'<br><input type="checkbox" id ="'+tempId+'"  value ="'+fvalue+'"><font size ="2" color = "#8B8378">排休</font></div>';
Ext.get(tempId).on('click',function(e,f){
if(Ext.get(f.id).dom.checked){
dateArray[f.id.substring(5,f.id.length)] = f.value;
}else{
dateArray[f.id.substring(5,f.id.length)] = "";
}
});
cells[i].className = 'x-date-nextday';
setCellClass(this, cells[i]);
}
this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear());
if(!this.internalRender){
var main = this.el.dom.firstChild;
var w = main.offsetWidth;
this.el.setWidth(w + this.el.getBorderWidth('lr'));
Ext.fly(main).setWidth(w);
this.internalRender = true;
// opera does not respect the auto grow header center column
// then, after it gets a width opera refuses to recalculate
// without a second pass
if(Ext.isOpera && !this.secondPass){
main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + 'px';
this.secondPass = true;
this.update.defer(10, this, [date]);
}
}
},
beforeDestroy : function() {
if(this.rendered){
Ext.destroy(
this.keyNav,
this.monthPicker,
this.eventEl,
this.mbtn,
this.nextRepeater,
this.prevRepeater,
this.cells.el,
this.todayBtn
);
delete this.textNodes;
delete this.cells.elements;
}
}
});
Ext.reg('mydatepicker', Ext.MyDatePicker);
var myDate = new Ext.MyDatePicker();
/*********************日历组件部分**************************** end */

引用此组件处：

, {
xtype: 'panel',
style: 'margin-left:50;',
layout: 'column',
id: 'calendarArea',
width: 700,
height: 400,
border: true,
items: [{
layout: 'form',
width: '98%',
height: '98%',
items:[
/** 这里放置日历控件 */
myDate
]
}]
}

日历控件最下方有一个确定按钮，勾选完复选框之后，单击这个【确定】按钮，会返回给页面一个数组dateArray，其格式如下：

",,,,,2013-05-31,2013-06-01,,,,,,,,,,,,2013-06-13,2013-06-14,,,,,,,,,,,,,,2013-06-28,2013-06-29,2013-06-30,2013-07-01";

if(dateArray != null && dateArray != "") {
content = dateArray.join(',');   //数组的话，不识别，要转换成字符串才可以
}

后台逻辑中根据具体的业务来对这个字符串进行分析即可。

ExtJs中定制日历控件——带复选框相关推荐

ExtJs中定制日历控件——带下拉列表
效果图: 日历组件部分代码: /*********************日历组件部分**************************** begin */ var dateArray = new ...
C#ListView控件添加复选框并获取选中的数目
1.添加复选框:listView1.CheckBoxes = true; 2.选中listview并获取选中的数目: private void listView1_ItemChecked(object ...
elementui树形复选框_Element-ui表格树形控件结合复选框实践
Element-ui是现在国内用得比较多的ui框架,其table组件提供了多选以及树形数据的功能,但却没有提供将两者结合的功能,我们先来看下面的图片,本文将介绍以下的功能如何实现以及其中的一些踩坑点. ...
bootstrap中使用日历控件
在bootstrap中使用日历控件可以参照以下资料: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 以下是参照此资料自己做的一 ...
excel日历弄到html,如何在Excel中利用日历控件来快速输入日期
给大家分享了一个利用日历控件在Excel单元格中输入日期的小窍门.大家知道,物流和会计行业的报表,经常需要手工输入一些日期,例如发货日期,在途时间.到达配送中心日期.签收日期等,如果手工输入,难免出错 ...
5、Web 窗体的基本控件——复选框控件和复选组控件（CheckBox 和 CheckBoxList）
5.Web 窗体的基本控件--复选框控件和复选组控件(CheckBox 和 CheckBoxList) 复选框控件和复选组控件(CheckBox 和 CheckBoxList) 前端 <%@ P ...
html 复选框 mysql_Html：实现带复选框的下拉框（一）
概述项目中要用到可多选的下拉框(select),发现HTML中无此控件,故手动模拟实现一下. 模拟所用元素:input,ul,li 代码模拟实现带复选框的下拉列表 body{ margin: 20 ...
HTML复选框里添加下拉框,Html：实现带复选框的下拉框（一）
概述项目中要用到可多选的下拉框(select),发现HTML中无此控件,故手动模拟实现一下. 模拟所用元素:input,ul,li 代码模拟实现带复选框的下拉列表 body{ margin: 20 ...
Material UI 带复选框表格获取选中值（索引）
vue+Material UI 带复选框表格获取选中值(索引) 发现问题解决写在最后发现问题神坑UI框架–Material,这款框架我不晓得为什么会这么坑,有这么多的问题为什么会被推出来,真的 ...

ExtJs中定制日历控件——带复选框

ExtJs中定制日历控件——带复选框相关推荐

最新文章

热门文章