Jquery日历插件制作简单日历

在页面开发过程中，我们经常会遇到需要用户输入日期的操作。通常会提供一个文本框供用户输入，然后编写代码来验证输入的数据并检测它是否是日期类型。这很麻烦，同时用户输入日期也不太方便，影响用户体验。如果在jQuery UI中使用datepicker插件，这些问题就可以轻松解决。Span style=' color: # cc66cc'由这个插件调用。strong语法格式/strong/span如下：

$(".选择器”)。datepicker(选项)；

其中”。选择器”代表DOM元素，一般指文本框。因为插件是用来提供日期选择的，所以它经常绑定到一个文本框，所选的日期显示在文本框中。选择选项是一个对象，与前面插件中的选项相同。通过改变其参数的相应值，可以改变插件功能。在datepicker插件中，选择选项的常用参数如下。

1.更改月份设置一个布尔值。如果Wie为真，标题处会出现一个下拉选择框，可以选择月份。默认值为假。2 .更改年份设置一个布尔值。如果为真，标题上会出现一个下拉选择框，可以选择年份。默认值为false.3. showButtonPanel设置一个布尔值。如果为真，日期下方会显示一个带有两个按钮的面板。一个是“今天”，另一个是“关闭”，默认值为false，表示关闭按钮上的文本信息不会显示。4.closeText设置，这个设置的前提是showButtonPanel的值必须为true，否则效果不会显示。5.日期格式设置文本框中显示的日期格式。可以设置为{dateFormat，' yy-mm-dd'}，表示日期的格式为年-月-日，如2012-10-1 6。设置一个defaultDate值，如{defaultDate 7}，表示在弹出日期选择窗口后，默认日期为当前日期加7天。您可以设置以下方式：“显示”、“sildeDown”、“fadeln”和“后者”，这意味着没有办法弹出日期选择窗口。8.为showWeek设置一个布尔值。如果为真，可以显示每天对应的星期，默认值为假。9.设置年范围。

最近研究了js插件的开发。以前经常看到大神得心应手，随便玩外挂。我觉得如果我达到了那个水平，我愿意开始自己对插件开发的研究。学习了一段时间后，我开始写我的第一个日历插件。因为是初学者的插件开发，所以代码的可读性可能有点差。希望大家以后多提建议，多维护代码，让这个插件更加完整。

只需在下面发布代码。

首先，给插件一个完整的div容器。

Div=' y-total'/div我习惯于在容器的类或id名称中添加自己唯一的前缀，这有助于识别自己的代码，避免与其他同事的风格冲突。

然后开始写风格，可以根据自己的需要进行调整。y-total { height : auto；边界：px实心#;} .y总计返回-BTN {高度：像素；} .y总计return-btndiv { border-right : px solid #；边框-bottom:像素实心#;颜色： #；font-family : '微软雅黑'，PMingLiU，Verdana，Arial，Helvetica，无衬线}。y总计return-btndiv :n th-child(){ border-right : px；} .y总计prev-btn{cursor:指针；宽度：%;向左浮动：文本对齐：中心；} .y总计。时间cursor:指针；float:left宽度：%;文本对齐：中心；} .y总计下一个-btn{cursor:指针；右浮动：宽度：%;文本对齐：中心；} .y总计y-stop {位置：绝对值；左边距：像素；背景-颜色：红色；color: # fff}。y-total # datatab { clear : both；宽度：%;} .y-total #数据选项卡TD { height : px字体系列： '微软雅黑，普明柳，凡尔达纳，阿里亚尔，Helvetica，无衬线；颜色： #；border:像素固体# DDD；font-size : px文本对齐：中心；}第三步，就是插件的代码了

脚本(函数($){ var美化器=函数(val，options){ this。val=val这个。default={ ' width ' : ' px ' } this。p=$ .extend({}，this.defaults，options)；这个$ div=$(' div class=' return-BTN '/div ')；这个。prev=$(' div class=' prev-BTN '前一页/div ')；这个。time=$(' div class=' time '/div ')；这个。next=$(' div class=' next-BTN '后一页/div ')；这个。tab=$(' table id=' datatab ' tr/tr/table ')；}美女ier。prototype={ getDate : function(){ var vals=this。valsvar t=这个。时间到了。attr(' class ')；var标签=这个。选项卡。attr(' id ')；这个$div.append(this.prev，this.time，this。接下来)；$(这个。p .美元这个)。追加（这个$div，this.tab).宽度(这个。宽度)；var I=Getinfo(vals)；$('.t ).文字(val。年'-[我]'-[我])；$('.前btn .下一个——BTN ' .click(function(){ returnAction($(this)，t，vals，tab)})；setDateInfo(选项卡);init(val，tab)；} } /*加载时将日期放入任务描述中*/函数init(val，tab){ var w=新日期(val。年'，'月'，').getDay()//获取本月第一天是星期几var l=(w==？w-)新日期(vals.year，vals.month，getDate()；//需要铺上任务描述的个数var t=数学。天花板(l/);对于(var I=；它；I){ $("# "选项卡)。追加(' tr class=' y-tr '/tr ')；} $('.y-tr ').每个（函数(){ for(var I=；我；我){ $(这个)。追加(' TD/TD ')；} })设置值(瓦尔，新日期(vals.year，vals.month，getDate()，w)；}函数setvalue(val，l，w){ for(var I=；il；i ){ var space=w==？I-: I-w；$('td ').eq(空间)。文本;if(i==val.day){ $('td ').eq(空间)。css('color '，' red ')；} } }函数getInfo(vals){ var info=[]；信息。推动(val。月？瓦尔。月： ' '值。月)；信息。推动(val。一天？瓦尔。第：天。日)；返回信息；}函数setDateInfo(tab){ var m=[' '，'一','二','三','四','五','六','日'];对于(var I=；我；I){ $("# "选项卡)。find('tr:eq()').追加(' td星期m[I]'/TD ')；} } /*上一页，下一页的点击事件*/function returnAction($this，t，val，tab){ if($ this。attr(' class ')=' prev-BTN '){ if(val。月){ val。月份=；瓦尔。year-=；} else { val。month-=；} } else if($ this。attr(' class ')==' next-BTN '){ if(val。月){ val。月份=；瓦尔。年份=；} else { val。月份=；} } var v=Getinfo(val)；$('.t ).文本(瓦尔。year "-v[]" "-v[])；$('.y-tr ').移除();init(val，tab)；} $ .fn。work=function(选项){ var t=new Date()；var DateVal={ ' year ' :t。getfullyear()，' month' : t.getMonth()，' day ' :t。getdate()} var objs=new美容师(DateVal，options)；objs。GetDate()；} })(jQuery)/脚本那么，插件就差不多完成了，现在只需要调用插件的方法就可以了

脚本$('。y-total ').作品({ '$this' :).y-total '，' width' : 'px '，//控制容器的宽度});/script效果如图：