纯JS日历插件 - 素材火

一款纯JS日历插件，点击页面的输入框即可弹窗日历窗口，点选任意日期，即可将选择的结果显示在输入框里。

分类：日期时间 > 日期控件难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需设置好页面的样式，代码如下：

body{margin: 0;padding: 0;}
.everyWeekDay .weekday,.everyDay .days {/*解决span不支持width属性*/display: -moz-inline-box;display: inline-block;margin: 5px 0 0 20px;text-align: center;width: 20px;border: 1px solid #F7F7F7;cursor: pointer;}		
.marginTop{margin-top: 5px;}
.selectStyle{padding-left: 10px;border: none;border-radius: 3px;outline: none;appearance: none;-moz-appearance: none;-webkit-appearance: none;margin: 0 10px 0 10px;width: 60px;border-color: #0FB9EF;color: #0FB9EF;}

页面的body部分，需设置一个input输入框来触发日历插件并显示选择结果，代码如下：

<input type="text" id="txt_calendar" style="margin-left: 20px;margin-top: 20px;background-color: #cfcfcf;border: none;border-radius: 5px;height: 25px;padding-left: 10px;outline:none;" readonly="readonly" onfocus="showDate()"/>

页面的底部，需引入JS日历插件，代码如下：

<script type="text/javascript" src="js/dateJs.fei.js" ></script>