1200字范文 > jquery输入框日历时间插件

jquery输入框日历时间插件

时间：2019-04-06 00:43:19

相关推荐

jquery输入框日历时间插件

废话不多说，直接上代码！！

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jQuery输入框弹出日历时间插件DEMO演示</title><link href="css/dateTime.css" rel="stylesheet"></head><body><div class="mycontainer"><input id="date" placeholder="请选择日期" type="text"><input id="time" placeholder="请选择时间" type="text"><input id="datetime" placeholder="请选择日期和时间" type="text"></div><script src="js/jquery.min.js" type="text/javascript"></script><script src="js/dateTime.min.js" type="text/javascript"></script><script type="text/javascript">$("#date").datetime({type: "date",value: [, 9, 31],success: function (res) {console.log(res)}})$("#time").datetime({type: "time",value: [12, 28]})$("#datetime").datetime({type: "datetime",value: [, 7, 15, 15, 30]})</script></body></html>

dateTime.css文件内容

@charset "utf-8";*{margin:0; padding:0;}body, html body {color: #262626;font: 12px/1.5 Microsoft YaHei,tahoma,arial,Hiragino Sans GB,sans-serif;}body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {margin: 0; padding: 0; font-family: "微软雅黑"; }fieldset, img {border: 0; }ul, ol, li {list-style: none; font-family:'Microsoft YaHei'; }address, caption, cite, code, dfn, em, strong, th, var, optgroup {font-style: normal; font-weight: normal; }h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal; }input, button, textarea, select, optgroup, option {font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; background-color: #fff; border: none;}a{text-decoration:none;}a:hover{text-decoration: none;}input, button, textarea{*font-size: 100%;}ol, ul {list-style: none; }/* tables still need 'cellspacing="0"' in the markup */table,tr,td {border-collapse: collapse; border-spacing: 0; margin:0;padding:0;}caption, th {text-align: left; }.clearfix {clear: both; zoom:1;}.clearfix:after {display: block; clear: both; content: "\0020"; visibility: hidden; height: 0; }.mycontainer{width:960px;margin:40px auto;}.dateTimeWrap{display: none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;background: #494a4a;padding:10px;position: fixed;left:0;top:0;z-index:999;font-size:14px;color:#e2e2e2;width:240px;}.datePart li.curDay{color:#1ea0fa;}#dayDat li:hover{border:2px double #fff;background: #1ea0fa;color:#fff;}#dateTime{*float:left}.dateTimeHead{*overflow:hidden;padding:8px 0px 4px;}.datePart li{border:2px double transparent;float: left;cursor: default;vertical-align: middle;width: 30px;height: 26px;text-align: center;line-height: 26px;}.datePart ul{overflow: hidden;}.changeMonth{float: right}.changeMonth #pre,.changeMonth #next{display: inline-block;width:20px;height:20px;cursor: default;color:#333;background: #fff;text-align: center;line-height:20px;}.changeMonth #next{margin-left: 10px;}.dateTimeFoot span,.timeFooter span{cursor: pointer;display: inline-block;background: #fff;color: #333;height:20px;line-height: 20px;width:50px;text-align: center;margin-left: 6px;float:right;}.timePart{text-align:center;color:#333;line-height: 22px;}.timePart p,.timePart ul{background: #fff;}.timePart>ul>li{float: left;width:119px;background: #fff;color:#333;border:1px solid #ccc;border-right:none;}.timePart ul{overflow: hidden;}.timePart>ul>li p{line-height: 30px;border-bottom:1px solid #ccc;}.timePart ol{height:180px;overflow-y: hidden;*overflow-y: auto;overflow-x: hidden;}.timePart ol:hover{overflow-y:auto;}.timePart ol:hover li{padding-left:17px;*padding-left:0;}.timePart ol li{line-height: 30px;}.timePart ol li.cur{background: #1ea0fa;color: #fff}.dateTimeFoot,.timeFooter{overflow:hidden;margin-top: 10px;height: 20px;}.timeFooter span{width:80px;}.timeFooter #ensure{width:50px;}.dateTimeFoot .selTime,.timeFooter .selTime{float:left;margin-left:0;display:none;}.selTime{width:80px!important;}#yearSelect{margin-right: 6px;}.darkgrey{color:#d0d0d0 !important;}.mycontainer input{border:1px solid #ccc;padding:6px 10px;}

jquery.min.js文件自行下载

dateTime.min.js文件内容：

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。