因工作需要自己写了个可填，可选，可自定义的日期下拉菜单..样式不太行..勿砸.贴代码...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>select.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript" language="JavaScript"> $(document).ready(function(){ $(".select_button").click(function(){ setDisAll();//先把显示的下拉菜单隐藏掉 $(this).parent().addClass("zIndex"); //给父div加一个zIndex提高层的优先级 $(this).parent().siblings().find("ul").slideUp("fast");//点击当前的下拉按钮时收起其它下拉 $(this).parent().siblings().removeClass("zIndex");//取消其它下拉的层优先级让上面的层永远在最上层 $(this).prev().slideDown("fast"); return false; }); $(".myli").click(function(){ $(this).parent().parent().find(".selected").val($(this).find("a").html());//给下拉框赋值 $(".option-wrap").slideUp("fast",function(){ $(".select").removeClass("zIndex"); }); return false; }); $(".myliz").click(function(){ if($(this).attr("className").indexOf("myliz_bg")<0) { $(this).parent().find(".myliz_no").removeClass("myliz_no").removeClass("myliz_bl").addClass("myliz_bl"); $(this).removeClass("myliz_bg").addClass("myliz_bg"); }else { $(this).parent().find(".myliz_bl").removeClass("myliz_no").removeClass("myliz_bl").addClass("myliz_no"); $(this).removeClass("myliz_bg"); } return false; }); $(".selected").click(function(){ $(this).parent().addClass("zIndex"); //给父div加一个zIndex提高层的优先级 $(this).parent().siblings().find("ul").slideUp("fast");//点击当前的下拉按钮时收起其它下拉 $(this).parent().siblings().removeClass("zIndex");//取消其它下拉的层优先级让上面的层永远在最上层 $(this).prev().slideDown("fast"); return false; }); $(".qd").click(function(){ var ary=$(this).parent().find('input[type="text"]'); var reg=/^(/d{4})-(/d{2})-(/d{2})$/; var ero=""; if(ary[0].value=="") { ero="开始日期不能为空！"; $(this).parent().find(".ero").html(ero); return false; } if(!isDate_yyyyMMdd(ary[0].value)){ $(this).parent().find(".ero").html("请保证开始日期格式为yyyy-mm-dd或正确的日期!"); return false; } if(ary[1].value=="") { ero="截止日期不能为空！"; $(this).parent().find(".ero").html(ero); return false; } if(!isDate_yyyyMMdd(ary[1].value)){ $(this).parent().find(".ero").html("请保证截止日期格式为yyyy-mm-dd或正确的日期!"); return false; } $(this).parent().parent().parent().parent().find(".selected").val(ary[0].value+"至"+ary[1].value); setDisAll(); }); $(".qx").click(function(){ setDisAll(); return false; }); $(".disdate_bl").click(function(){ return false; }); // $('input[type="text"]').val("123") $("body").click(function(){//点击body任意位置收起下拉菜单 setDisAll(); return false; }); function setDisAll() { $(".option-wrap").slideUp("fast",function(){ $(".select").removeClass("zIndex"); $(".myliz").removeClass("myliz_bg"); $(".myliz_bl").removeClass("myliz_bl").addClass("myliz_no"); $(".ero").html(""); }); } /** * 判断是否为正确的日期格式。 * 日期格式为yyyy-MM-dd或者为yyyy/MM/dd。 * * @param str 需要检查的日期字符串 * @return false : 传入的字符串不是正确日期格式 * 例如：22dkdk * 2010-2-29 * true ：传入的字符串是正确日期格式 * 例如：2010-2-28 * 2010/2/28 * 2010-07-28 * 2010/7/28 * 2012-02-29 * */ function isDate_yyyyMMdd(str) { var reg = /^([0-9]{1,4})(-|//)([0-9]{1,2})/2([0-9]{1,2})$/; var r = str.match(reg); if(r==null)return false; var d= new Date(r[1], r[3]-1,r[4]); var newstr=d.getFullYear()+r[2]+(d.getMonth()+1)+r[2]+d.getDate(); var yyyy = parseInt(r[1], 10); var mm = parseInt(r[3], 10); var dd = parseInt(r[4], 10); var compstr = yyyy+r[2]+mm+r[2]+dd; return newstr==compstr; } }); </script> <style type="text/css"> <!--样式 --> #selectDiv {padding-top:10px;} .select {width:147px;height:18px;border:1px solid #aaaaaa;margin:0 auto;position:relative;background:#fff;margin-bottom:5px;} a.select_button {display:block;background:#D3D3D3;width:23px;height:20px;position:absolute;right:-2px;top:-1px;text-align:center;text-decoration:none;} a.select_button:active{background:#D3D3D3;} a.select_button:hover{background-color:#ffa500} .option-wrap {position:absolute;width:147px;margin:0;padding:0;top:18px;display:none;border:1px solid #ccc;left:-1px;background:#fff;} .option-wrap li {list-style:none;} .option-wrap a {display:block;height:20px;font:12px/20px "宋体";color:#333;padding-left:10px;text-decoration:none;} .option-wrap a:hover {background:#ccc;color:#fff;} .selected {font:12px/20px "宋体";color:#333;margin:0;padding-top:2px;height:16px;border:none;} .zIndex {z-index:10000;} .disdate_bl{ width:140px; display:block; margin-top:5px; font:12px/20px "宋体";color:#333;padding-left:10px; } .myliz_no{ display:none; } .myliz_bl{ display:block; } .myliz_bg{ background:#D3D3D3; } .text{ width:100px; height:18px; } .qd{ height:22px; font:12px/20px "宋体";color:#333;padding-left:10px; margin-top:5px; text-align:center; width:40px; padding-left:3px; padding-top:0px; } .qx{ height:22px; font:12px/20px "宋体";color:#333;padding-left:10px; margin-top:5px; text-align:center; width:40px; padding-left:3px; padding-top:0px; } .ero{ color:red; } </style> </head> <body> <div id="selectDiv"> <div class="select"> <input type="text" class="selected" value="请选择..." id="xxx" /> <ul class="option-wrap"> <li class="myli"><a href="#">今天</a></li> <li class="myli"><a href="#">7天</a></li> <li class="myli"><a href="#">最近30天</a></li> <li class="myliz"><a href="#">自定义</a></li> <li class="myliz_no"> <div class="disdate_bl"> <div class="ero"></div> 从:<input type="text" class="text" name="startTime" /><br /> 到:<input type="text" class="text" name="endTime" /> <br /> <input type="button" class="qd" value="确定" ><input class="qx" type="button" value="取消" > </div> </li> </ul> <a class="select_button" href="javascript:void(0);">↓</a> </div><!--select--> </div> <div id="selectDiv"> <div class="select"> <input type="text" class="selected" value="请选择..." id="xxx" /> <ul class="option-wrap"> <li class="myli"><a href="#">今天</a></li> <li class="myli"><a href="#">7天</a></li> <li class="myli"><a href="#">最近30天</a></li> <li class="myliz"><a href="#">自定义</a></li> <li class="myliz_no"> <div class="disdate_bl"> <div class="ero"></div> 从:<input type="text" class="text" name="startTime" /><br /> 到:<input type="text" class="text" name="endTime" /> <br /> <input type="button" class="qd" value="确定" ><input class="qx" type="button" value="取消" > </div> </li> </ul> <a class="select_button" href="javascript:void(0);">↓</a> </div><!--select--> </div> </body> </html>
