网络编程
位置：首页>> 网络编程>> JavaScript>> 一个jquery日期选取插件源码

一个jquery日期选取插件源码

作者：fanxiaojie　来源：韦伯花园的魔法师　发布时间：2009-12-23 19:15:00　

标签：jquery,日期,插件

为了庆祝自己的博客重新开放，我在这里放一个自己刚刚写的jquery日期插件,

   

也许人们会说：日期选取插件已经这么多了，为什么还要自己写一个啊？

其实我一开始也试图在网上找合适的日期选取插件。但是我发现了两个大问题：那些老外写的插件，多数日期格式是这样子的：DD/MM/YYYY，或者MM/DD/YYYY，而不是中国人习惯的那种写法：YYYY-MM-DD。另外，月份是写成Jan,Feb,,,这样的，而不是“一月”、“二月”。所以我想写一个自己的日期插件。而且我做到了它。

看我是怎样写的吧：以下内容保存为canelder.js

(function($){
$.selectDate=function(obj,settings){var $d=new Date();var DateSettings={date:new Date(),startYear:$d.getFullYear()-10,endYear:$d.getFullYear()+15,dateFormat:"yyyy-mm-dd"};DateSettings=$.extend(DateSettings,settings);if(typeof(DateSettings.date)=="string"){nowDate=new Date();nowDate.setFullYear(parseInt(DateSettings.date.split("-")[0]));nowDate.setMonth(parseInt(DateSettings.date.split("-")[1])-1);nowDate.setDate(parseInt(DateSettings.date.split("-")[2]));}if(typeof(DateSettings.date)=="object"){nowDate=DateSettings.date};var showDate=function(obj){var strYear=new Array();var strMonth=new Array();var mon=new Array('一','二','三','四','五','六','七','八','九','十','十一','十二');for(var i=0;i<12;i++){if(i==nowDate.getMonth()){strMonth.push('<option value="'+(i+1)+'" selected="selected">'+mon[i]+'月</option>');}else{strMonth.push('<option value="'+(i+1)+'">'+mon[i]+'月</option>');}}for(var j=DateSettings.startYear;j<=DateSettings.endYear;j++){if(j==nowDate.getFullYear()){strYear.push('<option value="'+j+'" selected="selected">'+j+'年</option>');}else{strYear.push('<option value="'+j+'">'+j+'年</option>');}}var getDayStr=function(){var year;var month;var nextyear;var nextmonth;year=parseInt($year.val());month=parseInt($mon.val());var selectD=new Date(year,month-1,1);if(month==12){nextyear=year+1;nextmonth=0;}else{nextyear=year;nextmonth=month;}var $ul=$(document.createElement("ul")).addClass('day').appendTo($calenderBody).append('<li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li>');var nextD=new Date(nextyear,nextmonth,1);var $date=$(document.createElement('ul')).addClass('date').appendTo($calenderBody);var $day =parseInt(Math.abs(nextD-selectD)/1000/60/60/24);for(var ii=0;ii<selectD.getDay();ii++){$('<li> </li>').appendTo($date);}for(var nn=1;nn<=$day;nn++){if(nn==nowDate.getDate())$('<li class="today"><a href="#">'+nn+'</a></li>').appendTo($date);else $('<li><a href="#">'+nn+'</a></li>').appendTo($date);}$('li:eq(6),li:eq(13),li:eq(20),li:eq(27),li:eq(34)',$date).addClass('Sat');$('li:eq(0),li:eq(7),li:eq(14),li:eq(21),li:eq(28),li:eq(35)',$date).addClass('Sun');};var changeDate=function(){$calenderBody.empty();getDayStr();$('a',$calenderBody).click(function(){getdate($(this).text());return false;})};var pos=obj.offset();var $calender=$(document.createElement('div')).addClass('calender').appendTo(document.body).css({'left':pos.left+34,'right':pos.top+24});var $close=$('<a href="#">&times;</a>').appendTo($calender).css('float','right').click(function(){$calender.fadeOut();return false;});var $year=$(document.createElement('select')).html(strYear.join("")).appendTo($calender).change(function(){changeDate();});var $mon=$(document.createElement('select')).html(strMonth.join("")).appendTo($calender).change(function(){changeDate();});var $calenderBody=$(document.createElement('div')).addClass('calenderBody').appendTo($calender);getDayStr();$('a',$calenderBody).click(function(){getdate($(this).text());return false;});$('<hr />').appendTo($calender);$('<a href="#">今天</a>').appendTo($calender).click(function(){var y=nowDate.getFullYear();m=parseInt(nowDate.getMonth())+1;d=nowDate.getDate();filldate(y,m,d);return false;});var getdate=function(day){var y=$year.val();var m=$mon.val();var d=day||nowDate.getDate();filldate(y,m,d)};var filldate=function(y,m,d){var returndate=DateSettings.dateFormat.replace("yyyy",y).replace("mm",m).replace("dd",d);$(obj).val(returndate);$calender.fadeOut();return false;}};showDate(obj);}
})(jQuery);

以下内容保存为demo.html

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>simple jQuery date-picker plugin</title>
<style type='text/css'>
.calender {width:168px;height:auto;font-size:12px; margin-right:14px; border-top:1px solid #f8f9fa;border:2px solid #dddddd;padding:4px 6px;background:#a7a9aa;position:absolute;}
.calender ul {list-style-type:none; height:auto;margin:0; padding:0;clear:both;width:168px;}
.calender .day {background-color:#D0FFD0;height:16px;margin:3px 0;}
a{text-decoration:none;}
.calender li{float:left; width:24px; height:18px; line-height:16px; text-align:center;list-style-type:none;}
.calender li a{text-decoration:none; font-family:Tahoma; font-size:12px; color:#333333;display:block;width:22px;height:16px;border-top:1px #ffffff solid;border-left:1px solid #ffffff;border-bottom:1px solid #666666;border-right:1px solid #666666;text-align:center;background:#f5f7f9;}
.calender li.Sat a{color:#2080D0;}.calender li.Sun a{color:#cc0000;}
.calender li.today a{background:#FFF440;font-weight:bold;}
.calender li a:hover {border-left:1px solid #666666;border-top:1px solid #666666;border-bottom:1px solid #ffffff;border-right:1px solid #ffffff;}
.calenderBody {clear:both;width:168px;margin-top:8px;min-height:106px;}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="calender.js"></script>
<script type="text/javascript">
$(function(){$('#date').click(function(){$.selectDate($(this));})})
</script>
</head>
<body>
<input type="text" readonly name="date" id="date"/>
</body>
</html>

这个东东，我在IE6、IE7、IE8、firefox、chrome、safri、opera里都测试过可用了。

调用方法示例：

$.selectDate($(this),{"date":"1999-11-1","startYear":1990,"endYear":1999,dateFormat:"MM/DD/YYYY"});

表示打开九十年代的日历，返回的日期格式是英国式的“MM/DD/YYYY”。dateFormat可用的值有"MM/DD/YYYY"、“DD/MM/YYYY”以及"YYYY-MM-DD",默认值是"YYYY-MM-DD"。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com