/**
|
@name Edo.controls.DatePicker
|
@class
|
@typeName datepicker
|
@description 日期选择组件
|
@extend Edo.containers.Box
|
*/
|
Edo.controls.DatePicker = function(config){
|
/**
|
@name Edo.controls.DatePicker#beforedatechange
|
@event
|
@description 日期改变前事件
|
@property {Date} date 日期值
|
*/
|
/**
|
@name Edo.controls.DatePicker#datechange
|
@event
|
@description 日期改变事件
|
@property {Date} date 日期值
|
*/
|
/**
|
@name Edo.controls.DatePicker#dateselection
|
@event
|
@description 日期选择改变事件,由界面激发
|
@property {Date} date 日期值
|
*/
|
|
Edo.controls.DatePicker.superclass.constructor.call(this);
|
|
this.viewDate = new Date();
|
};
|
Edo.controls.DatePicker.extend(Edo.containers.Box,{
|
componentMode: 'control',
|
/**
|
@name Edo.controls.Date#valueField
|
@property
|
@default date
|
*/
|
valueField: 'date',
|
/**
|
@name Edo.controls.DatePicker#weekStartDay
|
@property
|
@type Number
|
@description 第一个列星期日
|
*/
|
weekStartDay: 0,
|
weeks: ['日','一','二','三','四','五','六'],
|
|
/**
|
@name Edo.controls.DatePicker#valueField
|
@property
|
@default date
|
*/
|
valueField: 'date',
|
/**
|
@name Edo.controls.DatePicker#width
|
@property
|
@default 177
|
*/
|
width: 185,
|
|
minWidth: 185,
|
defaultWidth: 185,
|
minHeight: 160,
|
defaultHeight: 190,
|
|
/**
|
@name Edo.controls.DatePicker#padding
|
@property
|
@default [0,0,0,0] ( [left, top, right, bottom] )
|
*/
|
padding: [0, 0, 0, 0],
|
/**
|
@name Edo.controls.DatePicker#verticalGap
|
@property
|
@default 0
|
*/
|
verticalGap: 0,
|
|
elCls: 'e-box e-datepicker e-div',
|
/**
|
@name Edo.controls.DatePicker#date
|
@property
|
@type Date
|
@description 当前选中的日期,默认是今天
|
*/
|
/**
|
@name Edo.controls.DatePicker#viewDate
|
@property
|
@type Date
|
@description 当前的视图日期
|
*/
|
|
/**
|
@name Edo.controls.DatePicker#format
|
@property
|
@type String
|
@default 'Y-m-d'
|
@description 格式化显示日期字符串
|
*/
|
format: 'Y-m-d',
|
|
yearFormat: 'Y年',
|
monthFormat: 'm月',
|
|
todayText: '今天',
|
clearText: '清除',
|
autoSelectDate: true,
|
//clearVisible: true,
|
/**
|
@name Edo.controls.DatePicker#required
|
@property
|
@type Boolean
|
@default true
|
@description 不能为空
|
*/
|
required: true,
|
|
valueFormat: false,
|
|
footerVisible: true,
|
headerVisible: true,
|
footerHeight: 35,
|
headerHeight: 25,
|
|
isWorkingDate: function(date){
|
var day = date.getDay();
|
return !(day == 0 || day == 6);
|
},
|
|
dateRenderer: function(v, r, c, i, d, t){
|
var h = t.rowHeight-3;
|
var cls = (v.viewdate.getMonth() != v.date.getMonth() ? 'e-datepicker-outmonthday' : '');
|
if(!t.owner.isWorkingDate(v.date)) c.cls = ' e-datepicker-noworkingday';
|
else c.cls = '';
|
return '<a style="line-height:'+h+'px;100%" class="'+cls+'" href="javascript:;" hidefocus>'+v.date.getDate()+'</a>';
|
},
|
|
getValue: function(){
|
var v = Edo.controls.DatePicker.superclass.getValue.call(this);
|
if(v && this.valueFormat) v = v.format(this.format);
|
return v;
|
},
|
|
within: function(e){ //传递一个事件对象,判断是否在此控件的点击区域内.
|
//var dom = DomQuery.findParent(e.target, '.e-datepicker-pupselect', 2);
|
|
var r1 = this.monthpop ? e.within(this.monthpop) : false;
|
var r2 = this.yearpop ? e.within(this.yearpop) : false;
|
|
return Edo.controls.DatePicker.superclass.within.call(this, e) || r1 || r2;
|
},
|
//private
|
monthClickHandler: function(e){
|
var dh = Edo.util.Dom;
|
var doc = document, bd = doc.body;
|
if(!this.monthpop){
|
var s = '<div class="e-datepicker-pupselect">';
|
for(var i=1; i<=12; i++){
|
s += '<a href="#" onclick="return false">'+i+'</a>';
|
}
|
s += '</div>';
|
|
//var s = '<div class="e-datepicker-pupselect"><a href="javascript://void(0);">1</a><a href="javascript://void(0);">2</a><a href="javascript://void(0);">3</a><a href="javascript://void(0);">4</a><a href="javascript://void(0);">5</a><a href="javascript://void(0);">6</a><a href="javascript://void(0);">7</a><a href="javascript://void(0);">8</a><a href="javascript://void(0);">9</a><a href="javascript://void(0);">10</a><a href="javascript://void(0);">11</a><a href="javascript://void(0);">12</a></div>';
|
this.monthpop = Edo.util.Dom.append(bd, s);
|
|
}
|
this.monthpop.style.display = 'block';
|
var bs = dh.getBox(this.monthEl);
|
//var xy =dh.getXY(this.header);
|
var xy = this.headerCt.getBox();
|
dh.setXY(this.monthpop, [bs.x,xy.y+bs.height]);
|
|
function onmousedown(e){
|
|
if(e.within(this.monthpop)){
|
var d = this.viewDate.clone();
|
d.setMonth(parseInt(e.target.innerHTML)-1);
|
this._setViewDate(d);
|
}
|
//dh.remove.defer(10, dh, [this.monthpop]);
|
//dh.remove(this.monthpop);
|
//this.monthpop = null;
|
this.monthpop.style.display = 'none';
|
dh.un(doc, 'mousedown', onmousedown, this);
|
}
|
dh.on(doc, 'mousedown', onmousedown, this);
|
},
|
yearClickHandler: function(e){
|
var dh = Edo.util.Dom;
|
var doc = document, bd = doc.body;
|
var date = this.viewDate;
|
function createYear(){
|
var year = date.getFullYear();//在当前年上+-4
|
if(!this.yearpop){
|
var sb = ['<div class="e-datepicker-pupselect">'];
|
sb.push('<a class="pre" href="#" onclick="return false" >-</a>');
|
for(var i=year-4; i<=year+4; i++){
|
sb.push('<a href="#" onclick="return false">',i,'</a>');
|
}
|
sb.push('<a class="next" href="#" onclick="return false" >+</a>');
|
this.yearpop = Edo.util.Dom.append(bd, sb.join(''));
|
}else{
|
var j = 1;
|
var cs = this.yearpop.childNodes;
|
for(var i=year-4; i<=year+4; i++){
|
cs[j++].innerHTML = i;
|
}
|
}
|
this.yearpop.style.display = 'block';
|
}
|
createYear.call(this);
|
|
var bs = dh.getBox(this.yearEl);
|
var xy = this.headerCt.getBox();
|
dh.setXY(this.yearpop, [bs.x,xy.y+bs.height]);
|
|
var index = 0, tt = null;
|
var sf = this;
|
function updateYear(){
|
date = date.add(Date.YEAR, index);
|
createYear.call(sf);
|
}
|
|
function onmouseup(e){
|
clearInterval(tt);
|
|
dh.un(doc, 'mouseup', onmouseup, this);
|
}
|
|
function onmousedown(e){
|
var remove = false;
|
if(e.within(this.yearpop)){
|
var t = e.target;
|
if(dh.hasClass(t, 'pre')){
|
|
dh.on(doc, 'mouseup', onmouseup, this);
|
index = -1;
|
updateYear();
|
tt = setInterval(updateYear, 100);
|
|
}else if(dh.hasClass(t, 'next')){
|
dh.on(doc, 'mouseup', onmouseup, this);
|
index = 1;
|
updateYear();
|
tt = setInterval(updateYear, 100);
|
|
}else{
|
var d = this.viewDate.clone();
|
var y = parseInt(e.target.innerHTML);
|
if(isNaN(y)) return;
|
d.setFullYear(y);
|
this._setViewDate(d);
|
remove = true;
|
}
|
}else{
|
remove = true;
|
}
|
|
if(remove){
|
//dh.remove.defer(10, dh, [this.yearpop]);
|
//this.yearpop = null;
|
this.yearpop.style.display = 'none';
|
|
dh.un(doc, 'mousedown', onmousedown, this);
|
}
|
|
}
|
|
dh.on(doc, 'mousedown', onmousedown, this);
|
|
},
|
preMonth: function(e){
|
this._setViewDate(this.viewDate.add(Date.MONTH, -1));
|
},
|
nextMonth: function(e){
|
this._setViewDate(this.viewDate.add(Date.MONTH, 1));
|
},
|
preYear: function(e){
|
this._setViewDate(this.viewDate.add(Date.YEAR, -1));
|
},
|
nextYear: function(e){
|
this._setViewDate(this.viewDate.add(Date.YEAR, 1));
|
},
|
selectToday: function(e){
|
this._setDate(new Date());
|
this.fireEvent('dateselection',{
|
type: 'dateselection',
|
source: this,
|
date: this.date
|
});
|
},
|
clearDate: function(){
|
this.set('date', null);
|
},
|
_onMouseDown: function(e){
|
if(e.within(this.leftYearEl)) this.preYear(e);
|
else if(e.within(this.rightYearEl)) this.nextYear(e);
|
else if(e.within(this.leftEl)) this.preMonth(e);
|
else if(e.within(this.rightEl)) this.nextMonth(e);
|
else if(e.within(this.monthEl)) this.monthClickHandler(e);
|
else if(e.within(this.yearEl)) this.yearClickHandler(e);
|
else if(e.within(this.daysCt)) this.daysCtClickHandler(e);
|
|
e.stopDefault();
|
},
|
_onBeforeTableCellSelectionChange: function(e){
|
|
var cell = e.value;
|
if(cell){
|
var d = cell.date;
|
|
if(!this.date || (d.format(this.format) != this.date.format(this.format))){
|
if(this.autoSelectDate){
|
this._setDate(d);
|
this.fireEvent('dateselection',{
|
type: 'dateselection',
|
source: this,
|
date: this.date
|
});
|
}
|
return false;
|
}
|
|
}
|
},
|
init: function(){
|
|
//trace("datepicker init!!!");
|
var year = this.viewDate.format(this.yearFormat), month = this.viewDate.format(this.monthFormat);
|
|
//创建内置的对象
|
this.setChildren([
|
{
|
type: 'div',width: '100%',height: this.headerHeight,
|
html: '<table class="e-datepicker-header" border="0" cellpadding="0" cellspacing="0" ><tr><td width="10%" style="text-align:center;"><a hidefocus href="javascript:;" class="e-datepicker-year-left"></a></td><td class="e-datepicker-year">'+year+'</td><td width="10%" style="text-align:center;"><a hidefocus href="javascript:;" class="e-datepicker-year-right"></a></td><td ></td><td width="10%" style="text-align:center;"><a hidefocus href="javascript:;" class="e-datepicker-left"></a></td><td class="e-datepicker-month">'+month+'</td><td width="10%" style="text-align:center;"><a href="javascript:;" hidefocus class="e-datepicker-right"></a></td></tr></table>'
|
},
|
{
|
type: 'table',enableCellSelect: true,enableSelect: false,cellPaddingLeft: 0,cellPaddingRight: 0,enableHoverRow: false,cls: 'e-datepicker-body',style: 'border:0',width: '100%',height: '100%',verticalScrollPolicy: 'off',horizontalScrollPolicy: 'off',minHeight: 134,verticalLine: false,horizontalLine: false,autoColumns: true,enableDragDrop: false,
|
columns: this.createDateColumns(),
|
onbeforecellselectionchange: this._onBeforeTableCellSelectionChange.bind(this)
|
},
|
{
|
layout: 'horizontal',type: 'box',cls: 'e-datepicker-foot',border:[1,0,0,0],width: '100%',height: this.footerHeight,verticalAlign: 'middle',horizontalAlign: 'center',padding: 0,
|
children: [
|
{
|
type: 'button',width: 50,height:22,text: this.todayText,
|
onclick: this.selectToday.bind(this)
|
},
|
{type: 'space', width: '10%', visible: !this.required},
|
{
|
type: 'button',visible: !this.required,width: 50,height:22,text: this.clearText,
|
onclick: this.clearDate.bind(this)
|
}
|
]
|
}
|
]);
|
this.headerCt = this.getChildAt(0);
|
this.table = this.getChildAt(1);
|
this.footCt = this.getChildAt(2);
|
|
this.headerCt.set('visible', this.headerVisible);
|
this.footCt.set('visible', this.footerVisible);
|
|
this.table.owner = this;
|
|
this.on('click', this._onMouseDown, this);
|
|
this.table.set('rowHeight', this.getDateHeight());
|
this.table.set('data', this.createViewData());
|
|
Edo.controls.DatePicker.superclass.init.c(this);
|
},
|
createDateColumns: function(){
|
var columns = [];
|
|
for(var i = this.weekStartDay, dataIndex = 0, l=this.weekStartDay+7; i<l; i++, dataIndex++){
|
var week = i >= 7 ? i-7 : i;
|
columns.add({
|
header: this.weeks[week],
|
enableMove: false,
|
enableSort: false,
|
enableResize: false,
|
headerAlign: 'center',
|
dataIndex: dataIndex,
|
//width: '100%',
|
renderer: this.dateRenderer.bind(this)
|
});
|
}
|
return columns;
|
},
|
//根据viewdate的year,month,生成一个7列6行的dataTable数据,用于表格生成
|
createViewData: function(){
|
var data = [];
|
|
var date = this.viewDate.add(Date.DAY, -this.viewDate.getDate()+1); //获得本月第一天
|
date = date.add(Date.DAY, -date.getDay() + this.weekStartDay); //获得当前周的第一天
|
|
//
|
|
var h = this.getDateHeight();
|
|
for(var j=0; j<5; j++){
|
var record = [];
|
//record.__height = h;
|
for(var i = this.weekStartDay,l=this.weekStartDay+7; i<l; i++){
|
record.add({
|
viewdate: this.viewDate,
|
date: date
|
});
|
|
if(j==0 && record.length==1) this.startDate = date.clone();
|
if(j==4 && record.length==7) this.finishDate = date.clone();
|
|
date = date.add(Date.DAY, 1);
|
}
|
data.add(record);
|
}
|
|
//this.viewData = data;
|
|
return data;
|
},
|
_setWeekStartDay: function(value){
|
this.weekStartDay = value;
|
},
|
_setViewDate: function(value){
|
if(typeof value == 'string') {
|
value = Date.parseDate(value, this.format);
|
}
|
if(!Edo.isDate(value)) return;
|
if(this.viewDate != value){
|
this.viewDate = value;
|
if(this.inited){
|
this.table.set('data', this.createViewData());
|
//this.refresh(); //在syncSize的时候会自动调用,所以注释掉
|
}
|
}
|
},
|
_setDate: function(value){
|
if(typeof value == 'string') {
|
value = Date.parseDate(value, this.format);
|
}
|
if(!Edo.isDate(value)) {
|
value = null;
|
if(this.required) return false;
|
}
|
if(this.date != value){
|
|
if(this.fireEvent('beforedatechange', {
|
type: 'beforedatechange',
|
source: this,
|
date: value
|
}) == false) return;
|
|
this.date = value;
|
|
this._setViewDate.defer(100, this, [this.date ? this.date.clone() : new Date()]);
|
|
this.changeProperty('date', value);
|
this.fireEvent('datechange', {
|
type: 'datechange',
|
source: this,
|
date: value
|
});
|
}
|
},
|
refresh: function(){
|
var year = this.viewDate.format(this.yearFormat), month = this.viewDate.format(this.monthFormat);
|
|
if(this.el){
|
this.yearEl.innerHTML = year;
|
this.monthEl.innerHTML = month;
|
}
|
|
var rowHeight = this.getDateHeight();
|
this.table.set('rowHeight', rowHeight);
|
|
this.table.deferRefresh();
|
|
this.viewSelectDate(true);
|
|
},
|
viewSelectDate: function(select){
|
var row = col = -1;
|
var view = this.table.data.view;//this.createViewData();
|
var dateFormat = this.date ? this.date.format('Y-m-d') : null;
|
for(var i=0, l=view.length; i<l; i++){
|
var r = view[i];
|
for(var j=0; j<7; j++){
|
if(r[j].date.format('Y-m-d') == dateFormat){
|
row = i;
|
col = j;
|
break;
|
}
|
}
|
}
|
if(row != -1 && col != -1){
|
if(select !== false){
|
this.table.selectCell(row, col)
|
}else{
|
this.table.deselectCell(row, col)
|
}
|
}
|
|
|
},
|
syncSize: function(){
|
Edo.controls.DatePicker.superclass.syncSize.call(this);
|
|
|
this.refresh();
|
},
|
getDateHeight: function(){
|
var h = this.table ? (this.realHeight - (this.footerVisible ? this.footerHeight : 0) - (this.headerVisible ? 28 : 0) - this.table.getHeaderHeight()) / 5 : 23;
|
|
return h;
|
},
|
render: function(p){
|
Edo.controls.DatePicker.superclass.render.call(this, p);
|
|
var hel = this.headerCt.el.firstChild; //!!!
|
|
var tds = hel.rows[0].cells;
|
this.leftEl = Edo.util.Dom.getbyClass('e-datepicker-left', hel);
|
this.rightEl = Edo.util.Dom.getbyClass('e-datepicker-right', hel);
|
|
this.monthEl = Edo.util.Dom.getbyClass('e-datepicker-month', hel);
|
this.yearEl = Edo.util.Dom.getbyClass('e-datepicker-year', hel);
|
|
this.leftYearEl = Edo.util.Dom.getbyClass('e-datepicker-year-left', hel);
|
this.rightYearEl = Edo.util.Dom.getbyClass('e-datepicker-year-right', hel);
|
|
|
// this.table.set('data', this.createViewData());
|
// this.viewSelectDate(true);
|
}
|
|
});
|
|
Edo.controls.DatePicker.regType('datepicker');
|
