jQuery日历插件制作了一个简单的日历。
在开发网页的过程中，需要用户输入日期的操作是经常遇到的，通常的做法是提供一个文本框（文本）为用户输入，然后编写代码来验证输入数据并检测它是否是一种数据类型，这是比较麻烦的，同时时，用户输入的日期，操作不太方便，影响用户体验。如果你使用Datepicker（日历）在jQuery UI插件，可以解决这些问题。插件的语法如下：（美元。选择器）。Datepicker（选项）；
说的。选择DOM元素，一般指的是文本框，因为插件是提供选择的日期，所以往往在一个文本框绑定后，会选择的日期是在文本框中显示，选择选项与选项前插入一个对象，通过改变其相应的值参数，从而实现插件功能的变化，在DatePicker插件，选择选项，常用的参数如下
1、changemonth设置一个布尔值，如果wietrue，你可以在标题下拉选择框，你可以选择一个月，默认值是false
2、ChangeYear设置一个布尔值，如果是真的，你可以在标题下拉选择框，你可以选择一年，默认为false
3、showbuttonpanel设置一个布尔值。如果是真的，它显示日期下方的面板，并且有两个按钮。一个是今天，另一个按钮是关闭的，默认值是false，这意味着它没有显示。
4、closetext设置关闭按钮的文本信息。这个设定的前提是，showbuttonpanel值必须是真实的，否则效果不能被显示。
5、日期格式设置文本框中显示的日期格式（文本），它可以被设置为{日期格式，'yy-mm-dd}，这意味着日期的格式是年月日，如2012-10-1。
6、defaultdate设置默认值，如{ defaultdate + 7 }，即弹出日期选择窗口后，默认的日期加7天为当前日期。
7、showanim集的方式来显示或隐藏弹出日期选择窗口。有办法设置，显示，sildedown，和fadeln，这意味着没有一个弹出日期窗口
8、showweek设置一个布尔值，如果为真，可以显示相应的周刊，默认值是false
9、yearrange设置今年的范围
在JS插件的研究最近开发的，用来看人，插件都是信手拈来，玩，如果达到这个水平的感觉很好，开始了他在plug-in.after一段时间的开发研究，并开始写自己的第一个日历插件，因为它是学习插件开发，代码的可读性可能有点，我希望上帝能Tidianyijian，在维护代码，这个插件更完整。
下面的代码是张贴的。
首先，给插件一个完整的div容器
我过去常常把类或ID名放在容器中，并添加自己独特的前缀，这有助于识别它们的代码，避免与其他同事发生冲突。
然后开始编写样式，并且可以根据需要调整样式。
。y-total {高度：汽车；边界：PX固体#；}
。y-total。返回按钮{身高：PX；}
。y-total。返回按钮> div {边界：PX固体边界下：PX固体#；# #；颜色；字体微软雅黑
。y-total。返回按钮> div：nth-child（）{边界：PX；}
。y-total。沪指BTN {光标：指针；宽度：%；浮动：左；文本对齐：中心；}
。y-total。时间：{光标指针；浮动：左；宽度：%；文本对齐：中心；}
下一个按钮。y-total。{光标：指针；浮动权；宽度：%；文本对齐：中心；}
。y-total。y-stop {位置：绝对；margin-left: px；背景颜色：红色；颜色：# FFF；}
。y-total # datatab {明确：两；宽度：%；}
。y-total # datatab TD {身高：PX；字体：微软雅黑，PMingLiU，Verdana，Arial，Helvetica，sans-serif；颜色：#；边界：PX固体# DDD；字体大小：PX；文本对齐：中心；}
第三步是插件的代码。
（函数（$）{）
VaR美容=功能（VAL，选项）{
this.vals =瓦尔斯；
this.defaults = { {
宽度
}
这个P（this.defaults，美元。延长= {}，选项）；
这个。$ = $（ ）；
this.prev = $（上一页）；
this.time = $（）；
this.next = $（后一页）；
this.tab = $（）；
}
beautifier.prototype = { {
主调：函数（）{
VaR值= this.vals；
var t = this.time.attr（类）；
var标签= this.tab.attr（ID）；
这div.append美元（this.prev，this.time，这下）；
$（，P.美元）。追加（这美元的div，这个选项卡）。Width（这。p.width）；
var i = getInfo（VALS）；
$（。，+ T）。文本（VAL。年+-+我{ } +-+我{ }）；
$（。沪指按钮，按钮。接下来）。Click（function（）{ returnaction（$（this），T，丘壑，标签）}）；
setdateinfo（标签）；
init（VALS TAB）；
}
}
当加载日期在
函数init（VALS TAB）{
无功W =新的日期（年+VAL。
var = L（W = =：W）新+日期（vals.year，瓦尔斯。月）（。getdate）； / /数与TD
var t = math.ceil（L /）；
对于（var i =；i < t；i + +）{
$（+选项卡# ）（。追加）；
}
$（。y-tr）。每个（函数（）{）
对于（var i；i；<；++）{
$（这个）；
}
}）
setValue（VAL，新的日期（vals.year，瓦尔斯。月）。GetDate（），W）；
}
函数值（缬氨酸、L、W）{
对于（var i =；i < +；+ +）{
var；
Eq（空格）；
如果（我= = val.day）{
Eq（空格）。Css（颜色）
}
}
}
函数GetInfo（VALS）{
var；
Info.push（vals.month > vals.month：+ VAL。月）；
Info.push（vals.day > vals.day：+ VAL。天）；
返回的信息；
}
功能setdateinfo（TAB）{
var
对于（var i；i；<；++）{
$（+选项卡# （找）（TR：情商）（。追加）周+ M {我} + ）；
}
}
单击事件*。
功能returnaction（$，T，Val，标签）{
如果（$ this.attr（类）= =PREV按钮）{
如果（val.month <）{
val.month =；
val.year - =；
其他{ }
val.month - =；
}
} else if（$ this.attr（类）= =下一个按钮）{
如果（val.month >）{
val.month =；
val.year + =；
其他{ }
val.month + =；
}
}
var v = getInfo（Val）；
$（。，+ T）。文本（val.year +-+ V { } +-+ V { }）；
$（。y-tr ）删除（）；
init（瓦尔，TAB）；
}
美元。fn.work =功能（选项）{
新的日期（）；
Var DateVal = { {
年：t.getfullyear（），
月：t.getmonth（）+，
天：t.getdate（）
}
var obj =新的美容（DateVal选择）；
Objs.getDate ();
}
}（jQuery）
因此，插件几乎完成了，现在调用插件的方法就可以了。
$（。y-total 工作（{）。
美元：y-total 。
宽度
}）；
结果如下：