如何使用jQuery和CSS3创建一个日历控件

在body标签之前，我们添加jQuery代码。这里我们需要调用“datepicker”，需要上面定义的div的id属性。我们在这里添加了几个选项：inline-使日历默认可见，无需单击或输入控件firstDay-将星期一设置为一周的开始showOtherMonths-用其他月份的日期填充表格以填充表格有关选项的更多说明，请参阅文档。现在日历看起来像这样：#p#Step2-Container让我们首先删除所有空白、填充、边框等。:.ui-datepicker,.ui-datepickertable,.ui-datepickertr,.ui-datepickertd,.ui-datepickerth{margin:0;padding:0;border:none;border-spacing:0;}让这个日历看起来更好，添加背景颜色、圆角、阴影、字体等：.ui-datepicker{display:none;width:294px;padding:35px;cursor:default;text-transform:uppercase;font-family:Tahoma;font-size:12px;背景:#141517;-webkit-边框半径:3px;-moz-边框半径:3px;边框半径:3px;-webkit-box-shadow:0px1px1pxrgba(255,255,255,.1),inset0px1px1pxrgb(0,0,0);-moz-box-shadow:0px1px1pxrgba(255,255,255,.1),inset0px1px1pxrgb(0,0,0);b牛阴影：0px1px1pxrgba(255,255,255,.1),inset0px1px1pxrgb(0,0,0);}现在日历看起来像这样：#p#第3步-标题我们将更改日历标题（月、年）的颜色、添加边框和一些基本样式：。ui-datepicker-header{position:relative;padding-bottom:10px;border-bottom:1pxsolid#d6d6d6;}.ui-datepicker-title{text-align:center;}.ui-datepicker-month{position:relative;padding-right:15px;color:#565656;}.ui-datepicker-year{padding-left:8px;color:#a8a8a8;}我们将使用“before伪选择器”添加绿色圆圈这允许我们在月份元素之前插入内容，然后我们可以格式化和设置内容的位置：.ui-datepicker-month:before{display:block;position:absolute;top:5px;right:0;width:5px;height:5px;content:'';background:#a5cd4e;background:-moz-linear-gradient(top,#a5cd4e0%,#6b8f1a100%);background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,#a5cd4e),color-stop(100%,#6b8f1a));背景:-webkit-linear-gradient(top,#a5cd4e0%,#6b8f1a100%);背景:-o-linear-渐变（顶部，#a5cd4e0%，#6b8f1a100%）；背景：-ms-线性渐变（顶部，#a5cd4e0%，#6b8f1a100%）；背景：线性渐变（顶部，#a5cd4e0%，#6b8f1a100%）；-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}现在日历控件看起来像这样：#p#Step4-Prev和Next按钮我们将使用背景图像来格式化下一个和上一个箭头，我们将上一个放在左边，下一个放在右边：.ui-datepicker-prev,.ui-datepicker-next{position:absolute;top:-2px;padding:5px;cursor:pointer;}.ui-datepicker-prev{left:0;padding-left:0;}.ui-datepicker-next{right:0;padding-right:0;}.ui-datepicker-prevspan,.ui-datepicker-nextspan{显示：块；宽度：5px；高度：10px；文本缩进：-9999px；背景图像：url(../img/arrows.png);}.ui-datepicker-prevspan{background-position:0px0px;}.ui-datepicker-nextspan{background-position:-5px0px;}.ui-datepicker-prev-hoverspan{background-position:0px-10px;}.ui-datepicker-next-hoverspan{background-position:-5px-10px;}现在日历看起来像这样：#p#第5步-日历样式我们将在天数和周数中添加顶部和底部填充并更改颜色：.ui-datepicker-calendarth{padding-top:15px;padding-bottom:10px;text-align:center;font-weight:normal;color:#a8a8a8;}让我们给“天数网格”添加padding，修改颜色，给每个数字添加透明边框，这是很有必要的，因为我们要给选中的数字加上边框，为了防止页面跳转，我们提前给所有的数字加上透明边框：.ui-datepicker-calendartd{padding:07px;text-align:center;行高：26px;}.ui-datepicker-calendar.ui-state-default{display:block;width:26px;outline:none;text-decoration:none;color:#a8a8a8;border:1pxsolidtransparent;}对于当前选定的日期，我们要将边框和文本的颜色更改为绿色。对于其他月份的日期，我们需要改成深一点的颜色：.ui-datepicker-calendar.ui-state-active{color:#6a9113;border:1pxsolid#6a9113;}.ui-datepicker-other-month.ui-state-default{color:#565656;}这样我们的日历就制作完成了，下图就是最终的效果：可以点击这里查看这个日历的demo。