DatePicker 的UI开发及基于Eht开发平台框架的应用

今天介绍下 采用 jQuery所开发的DatePicker 组件和基于Eht开发平台框架对DatePicker组件的应用，在讲述如何开发之前，先给大家show下DatePicker组件开发出来的效果。

具体demo验证地址：http://demo.ehtsoft.com/

 
点击年 2013 的效果

上面图的开发原理如下：

计算当前日期的一号的位置及大小月闰年情况，同时计算上一个月在本次显示所剩的天数及下一个月应显示的天数

DatePicker 代码如下：（Eht 对象为Eht开发平台框架中的UI核心对象，具体见下载 http://www.ehtsoft.com/module/webpage/eht-download.jsp  ,DatePicker 演示地址：http://demo.ehtsoft.com/）

 

 

Eht.DatePicker=function(options){

var dp = this;

var defaults = {

selector:null,

year:null,

month:null,

format:"yyyy-MM-dd",

yearprev:40,

yearnext:20,

show:true,

selectedDate:function(value){},

width:170,

closeButton:true

};

this.options = $.extend(defaults,options);

this.header = $("<div class='eht-date-picker-head'><table align='center'><tr><td style='width:30px;text-align:left;'><span id='date-year-prev'></span></td><td id='date-year'>year</td><td id='date-month'></td><td style='width:30px;text-align:right;'><span id='date-year-next'></span></td></tr></table></div>");

this.yearpanel = $("<div class='eht-date-picker-year-panel'></div>");

this.table=$("<table class='eht-date-picker-table'>");

this.footer=$("<div style='text-align:right;'><span><a href='#' id='date-current' style='color:#00f;font-size:11px;'>今天</a></span>&nbsp;&nbsp;<span><a href='#' id='date-close' style='color:#00f;font-size:11px;'>关闭</a></span></div>");

this.selector = this.options.selector==null?$("<div style='border:0px;width:"+this.options.width+"px;'></div>"):$(this.options.selector);

if(this.options.show==true){

this.selector.show();

}else{

this.selector.hide();

}

this.selector.children().remove();

this.selector.css({"border":"0px","width":this.options.width+"px","background-color":"#fff"});

this.selector.append(this.header);

this.selector.append(this.table);

this.selector.append(this.footer);

if(this.options.selector==null){

$(document.body).append(this.selector);

}

this.date = new Date();

this.selectDate = new Date();

this.months = $("<select>");

for(var i=1;i<=12;i++){

this.months.append("<option value='"+i+"'>"+i+"月</option>");

}

this.header.find("#date-month").append(this.months);

this.setDate(this.options.year, this.options.month);

if(this.options.show==true){

this.selector.show("show");

}

this.months.change(function(){

dp.setDate(dp.header.find("#date-year").text(), $(this).val());

});

this.header.find("#date-year-prev").css("cursor","pointer");

this.header.find("#date-year-prev").click(function(){

dp.setDate(dp.date.getFullYear()-1, dp.months.val());

});

this.header.find("#date-year-next").css("cursor","pointer");

this.header.find("#date-year-next").click(function(){

dp.setDate(dp.date.getFullYear()+1, dp.months.val());

});

this.header.find("#date-year").css("cursor","pointer");

this.header.find("#date-year").click(function(){

if(!$(this).attr("yearpanelshow")){

dp.yearpanel.children().remove();

dp.yearpanel.remove();

var l = dp.header.position().left;

var t = $(this).position().top+$(this).outerHeight();

if(dp.header.offset().left + 375 > $(window).width()){

l = $(window).width() - (dp.header.offset().left + 380);

}

dp.yearpanel.css({position:"absolute",left:l,top:t});

var yearTable = $("<table>");

for(var i=0;i<7;i++){

yearTable.append("<tr></tr>");

}

var row = 0;

for(var y=$(this).text()-dp.options.yearprev;y<$(this).text()-0+dp.options.yearnext;y++){

var td = $("<td>"+y+"</td>");

if(y==$(this).text()-0){

td.addClass("eht-date-picker-selected");

}

if(row==7){

row=0;

}

yearTable.find("tr").eq(row).append(td);

row++;

td.click(function(){

dp.setDate($(this).text(), dp.months.val());

});

}

dp.yearpanel.append(yearTable);

dp.selector.append(dp.yearpanel);

dp.yearpanel.hide();

dp.yearpanel.show("show");

$(this).attr("yearpanelshow",true);

}else{

dp.yearpanel.hide("show",function(){

dp.yearpanel.children().remove();

dp.yearpanel.remove();

});

$(this).removeAttr("yearpanelshow");

}

});

this.footer.find("#date-current").click(function(e){

dp.selectDate = new Date();

dp.setDate(dp.selectDate.getFullYear(), dp.selectDate.getMonth()+1);

if(dp.options.selectedDate){

dp.options.selectedDate(dp.selectDate.format(dp.options.format));

}

dp.selectedDate(dp.selectDate.format(dp.options.format));

});

if(this.options.closeButton==true){

this.footer.find("#date-close").show();

}else{

this.footer.find("#date-close").hide();

}

this.footer.find("#date-close").click(function(){

dp.close();

});

};

Eht.DatePicker.prototype.selectedDate=function(value){

};

Eht.DatePicker.prototype.removeYPanel=function(){

this.yearpanel.children().remove();

this.yearpanel.remove();

this.header.find("#date-year").removeAttr("yearpanelshow");

};

Eht.DatePicker.prototype.show=function(value){

this.selector.show(100);

if(value){

var reg = new RegExp("\\d{4}-\\d{1,2}-\\d{1,2}");

if(reg.test(value)){

this.selectDate= new Date(value.replace(/\-/g,"/"));

}

}else{

this.selectDate = new Date();

}

this.setDate(this.selectDate.getFullYear(), this.selectDate.getMonth()+1);

};

Eht.DatePicker.prototype.setDate=function(year,month){

this.removeYPanel();

if(year==undefined || year==null || ""==year){

year = new Date().getFullYear();

}

if(month==undefined || month==null || ""==month){

month = new Date().getMonth();

}else{

month = month - 1;

}

this.header.find("#date-year").text(year);

this.months.val(month+1);

this.date.setFullYear(year, month,1);

this._showpicker();

};

Eht.DatePicker.prototype.setPosition=function(comp){

if(comp){

var left = comp.position().left;

var top = Eht.offsetBottom(comp) + 1;

if(left + this.options.width > $(window).width()){

left = $(window).width() - this.options.width - 10;

}

if(top + 190 > $(window).height()){

top =  $(window).height() - 190 - comp.outerHeight() - 1;

}

this.selector.css({"position":"absolute","left":left,"top":top});

}

};

Eht.DatePicker.prototype._showpicker=function(){

var dp = this;

this.table.children().remove();

var maxdate=isMaxMonth(this.date.getMonth()+1)?31:30;

if(this.date.getMonth()==1){

if(isRunnan(this.date.getFullYear())){

maxdate = 29;

}else{

maxdate = 28;

}

}

var prevDate = new Date(this.date.getFullYear(),this.date.getMonth()-1);

var prevmaxdate = isMaxMonth(prevDate.getMonth()+1)?31:30;

if(prevDate.getMonth()==1){

if(isRunnan(prevDate.getFullYear())){

prevmaxdate = 29;

}else{

prevmaxdate = 28;

}

}

var nextDate = new Date(this.date.getFullYear(),this.date.getMonth()+1);

var tr = $("<tr class='eht-date-picker-title'>");

tr.append("<td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td>");

this.table.append(tr);

var v = 0;

var nextdate = 1;

var prevday = prevmaxdate - this.date.getDay()+1;

if( this.date.getDay()==0){

prevday = prevday - 7;

}

for(var i=0;i<42;i++){

if(i%7==0){

tr = $("<tr class='eht-date-picker-day'>");

this.table.append(tr);

}

if(this.date.getDay()==i){

v = 1;

}

var td = $("<td align='center'></td>");

if(v==0 || (this.date.getDay()==0 && i<7)){

td.html(prevday++);

td.attr("year",prevDate.getFullYear());

td.attr("month",prevDate.getMonth()+1);

td.css({"color":"#aaa"});

}

if(v > maxdate){

td.html(nextdate++);

td.attr("year",nextDate.getFullYear());

td.attr("month",nextDate.getMonth()+1);

td.css({"color":"#aaa"});

}

if(this.date.getDay()!=0){

if(v!=0 && v <= maxdate){

td.attr("year",this.date.getFullYear());

td.attr("month",this.date.getMonth()+1);

if(this.selectDate.getDate()==v && 

this.selectDate.getFullYear()==this.date.getFullYear() && 

this.selectDate.getMonth()==this.date.getMonth()){

td.addClass("eht-date-picker-current");

}

td.html(v);

v++;

}

}else if(i>=7){

if(v!=0 && v <= maxdate){

td.attr("year",this.date.getFullYear());

td.attr("month",this.date.getMonth()+1);

if(this.selectDate.getDate()==v && 

this.selectDate.getFullYear()==this.date.getFullYear() && 

this.selectDate.getMonth()==this.date.getMonth()){

td.addClass("eht-date-picker-current");

}

td.html(v);

v++;

}

}

tr.append(td);

td.click(function(){

$(this).parent().parent().find("td").removeClass("eht-date-picker-selected");

$(this).addClass("eht-date-picker-selected");

var value = new Date($(this).attr("year"),$(this).attr("month")-1,$(this).text());

if(dp.options.selectedDate){

dp.options.selectedDate(value.format(dp.options.format));

}

dp.selectedDate(value.format(dp.options.format));

});

}

function isRunnan(year){

return (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));

}

function isMaxMonth(month){

var rtn = false;

var maxmonth=[1,3,5,7,8,10,12];

for(var i=0;i<maxmonth.length;i++){

if(maxmonth[i]==month){

rtn = true;

break;

}

}

return rtn;

}

};

Eht.DatePicker.prototype.close=function(){

this.selector.hide(50);

};

 
 上面代码是DatePicker的全部代码了

下面介绍下DatePicker在Eht开发框架平台的Form表单中的应用

<div id="form">

<input type="text" ehtType="date"/>

</div>

ehtType="date" 表示 该 input 组件为 DatePicker 组件，通过Eht.Form 类就可以生成如图的用法

 具体调用方法：new Eht.Form({"selector":"#form"});

具体demo见 http://demo.ehtsoft.com/    DatePicker