jquery.datepick日历控件

so_brave

jquery.datepick日历控件

首先应该导入jquery.datepick的css和js文件，可以在这个地址中下载http://plugins.jquery.com/project/datepick 下载datepick插件包；还有下载一个jQuery.js包。
在页面中引入下面的文件

1. @import "<%=request.getContextPath()%>/css/jquery.datepick.css";
   
2. <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquerydate/jquery-latest.pack.js"></script>
   
3. <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquerydate/jquery.datepick.pack.js"></script>
   
4. <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquerydate/jquery.datepick-zh-CN.js"></script>
   
5. 
   
6. 
   
7. <script type="text/javascript">
   
8. $(function() {   //页面加载完成之后自动调用的方法。
   
9. var startDate = new Date();
   
10. startDate.setDate(startDate.getDate()-1);//用户只可以选择从昨天开始的时间
    
11. var endDate = new Date();
    
12. endDate.setDate(endDate.getDate()+4);//限定用户可选时间的范围
    
13.         $('#beginDate').datepick({minDate: startDate,maxDate: endDate});
    
14.         $('#endDate').datepick({minDate: new Date(),maxDate: endDate});  
    
15. });
    
16. </script>

复制代码

开始时间:

1. <input id="beginDate" name="beginDate" class="inputbg" value="<c:if test="${flagvalue6 !=''}">${flagvalue6}</c:if><c:if test="${flagvalue6 ==''||flagvalue6==null}">${date_10}</c:if>" type="text" size="15" maxlength="10" readonly="1" style="height:18"/>

复制代码

至截止时间:

1. <input id="endDate" name="endDate" class="inputbg" value="<c:if test="${flagvalue7 !=''}">${flagvalue7}</c:if><c:if test="${flagvalue7 ==''||flagvalue7==null}">${dateStr}</c:if>" type="text" size="15" maxlength="10" readonly="1" style="height:18"/>

复制代码

这个地址介绍的这个控件非常的详细，大家可以看一下
http://www.my97.net/dp/demo/index.htm

星期六的深夜68

谢谢分享

bokezyyx

不错的控件知识，感谢分享