#date_text { background-image: url(images/input.png); background-repeat:no-repeat; width: 198px; height: 27px; border:none; padding-left:5px; cursor:pointer; } #cal_body { width: 198px; height: auto; overflow:hidden; border: solid 1px #CCCCCC; display: none; position:absolute; z-index:10; } .line { width:100%; height:26px; float:left; background-color:#0FF; font-size:14px; } .cube { float:left; width:26px; height:26px; line-height:26px; text-align:center; margin-left:2px; margin-bottom:2px; } .btn { float:left; background-color:#CCC; margin-left:10px; width:20px; height:20px; text-align:center; line-height:20px; border-radius:3px; border:solid 1px; margin-top:2px; cursor:pointer; } .year_month { float:left; margin-left:10px; width:90px; height:19px; text-align:center; line-height:19px; border-radius:6px; } .end_tag { height:26px; line-height:26px; margin-left:10px; }

以前要用到日历控件都是直接从网上下载一套源码来使用，心里一直有个梗，就是想自己动手写一个日历控件，最近刚好来了兴趣，时间上也允许，于是自己摸索写了一个，功能还算完善，界面就凑合了。可能最值得说的一点就是让input控件内部右边显示一个按钮，我是直接给input加了个背景，然后把input的边框去掉实现的。

这个是最初版的，再往后打算做出纯javascript版的，再往后打算用JQuery做一套。

以上所述就是本文的全部内容了，希望大家能够喜欢。