在输入日期的时候我们经常需要日期控件，jQueryUI的datapicker就是一个很好的日期控件。
1.简单的datepicker控件
目录结构:(要将images图片放到css目录下面)
代码:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 限制日期范围</title> <link rel="stylesheet" href="../css/jquery-ui.css"> <script src="../js/jquery.js"></script> <script src="../js/jquery-ui.js"></script> <link rel="stylesheet" href="../css/jquery_ui.style.css"> <script>$(function() { $("#from").datepicker({ changeMonth: true, //显示查询月是输入框 changeYear: true, //显示查询年的输入框 showButtonPanel: true, //显示今天按钮 monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十月", "十二月"], dateFormat: "yy-mm-dd", //设置日期格式 dayNamesMin: ["日","一", "二", "三", "四", "五", "六"], maxDate: "+0M +0d", //最大日期可设为五个月五天之后 }); });</script> </head> <body> <p>日期：<input type="text" id="from"></p> </body> </html>
结果:
2.datepicker结合bootstrap的模态框使用
在模态框中需要设置z-index，否则会出现日期控件被模态框覆盖
如果想不能键盘输入设置readonly属性，但是设置readonly属性之后，bootstrap的样式会将其变为灰色，
需要修改背景色为白色即可。
HTML设置文本框且设为只读，修改背景色为白色
<div class="input-group"> <span class="input-group-addon">购 建 日 期</span> <input type="text" class="form-control datepicker" style="z-index: 9999;background-color: #ffffff" placeholder="请输入购建日期" id="buytime2" name="buytime2" readonly="readonly"> </div>
JS动态开启日期控件
/* 日期控件* */ $(function() { $(".datepicker").datepicker( { // changeMonth : true, // changeYear : true, showButtonPanel : true, monthNamesShort : [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十月", "十二月" ], dateFormat : "yy-mm-dd", // 设置日期格式 dayNamesMin : [ "一", "二", "三", "四", "五", "六", "日" ], // maxDate : "+0M +0d", // 最大日期可设为五个月五天之后 }); });
效果:
688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
