jQuery下拉日期选择插件js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery下拉日期选择插件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery下拉日期选择插件</title>
<link rel="stylesheet" href="css/zzsc.css" type="text/css" />
<link rel="stylesheet" href="css/zzsc2.css" type="text/css" title="ui-theme" />
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="js/daterangepicker.jQuery.js"></script>
<script type="text/javascript">	
	$(function(){
		$('input').daterangepicker({arrows:true}); 
	});
</script>
</head>
<body>
<center><br>
<input type="text" value="4/23/99" id="zzsc" />	
</center>
</body>
</html>

CSS代码(zzsc.css):

body{font-size:62.5%;}
input{width:196px;height:1.1em;display:block;}
.ui-daterangepickercontain{position:absolute;z-index:999;}
.ui-daterangepickercontain .ui-daterangepicker{float:left;padding:5px !important;width:auto;display:inline;background-image:none !important;clear:left;}
.ui-daterangepicker ul,.ui-daterangepicker .ranges,.ui-daterangepicker .range-start,.ui-daterangepicker .range-end{float:left;padding:0;margin:0;}
.ui-daterangepicker .ranges{width:auto;position:relative;padding:5px 5px 40px 0;margin-left:10px;}
.ui-daterangepicker .range-start,.ui-daterangepicker .range-end{margin-left:5px;}
.ui-daterangepicker button.btnDone{margin:0 5px 5px 0;position:absolute;bottom:0;right:0;clear:both;cursor:pointer;font-size:1.1em;}
.ui-daterangepicker ul{width:17.6em;background:none;border:0;}
.ui-daterangepicker li{list-style:none;padding:1px;cursor:pointer;margin:1px 0;}
.ui-daterangepicker li.ui-state-hover,.ui-daterangepicker li.ui-state-active{padding:0;}
.ui-daterangepicker li.preset_0{margin-top:1.5em !important;}
.ui-daterangepicker .ui-widget-content a{text-decoration:none !important;}
.ui-daterangepicker li a{font-weight:normal;margin:.3em .5em;display:block;}
.ui-daterangepicker li span{float:right;margin:.3em .2em;}
.ui-daterangepicker .title-start,.ui-daterangepicker .title-end{display:block;margin:0 0 .2em;font-size:1em;padding:0 4px 2px;}
.ui-daterangepicker .ui-datepicker-inline{font-size:1em;}
.ui-daterangepicker-arrows{padding:2px;width:204px;position:relative;}
.ui-daterangepicker-arrows input.ui-rangepicker-input{width:158px;margin:0 2px 0 20px;padding:2px;height:1.1em;}
.ui-daterangepicker-arrows .ui-daterangepicker-prev,.ui-daterangepicker-arrows .ui-daterangepicker-next{position:absolute;top:2px;padding:1px;}
.ui-daterangepicker-arrows .ui-daterangepicker-prev{left:2px;}
.ui-daterangepicker-arrows .ui-daterangepicker-next{right:2px;}
.ui-daterangepicker-arrows .ui-daterangepicker-prev:hover,.ui-daterangepicker-arrows .ui-daterangepicker-next:hover,.ui-daterangepicker-arrows .ui-daterangepicker-prev:focus,.ui-daterangepicker-arrows .ui-daterangepicker-next:focus{padding:0;}

附件:下载该文件资源,减少时间成本(增值服务)