easyui自带的日历功能和生日年月日的三级联动

页面效果展示:


js:

<script type="text/javascript" src="easyui/jquery.min.js"></script>

    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript">  
        $(function () {  
            var $day = $("#day"),  
              $month = $("#month"),  
              $year = $("#year");  


            <!--出始化年-->  
            var dDate = new Date(),  
              dCurYear = dDate.getFullYear(),  
              str = "";  
            for (var i = dCurYear - 100; i < dCurYear + 1; i++) {  
                if(i==dCurYear){  
                    str = "<option value=" + i + " selected=true>" + i + "</option>";  
                }  
                else{  
                    str = "<option value=" + i + ">" + i + "</option>";  
                }  
                $year.append(str);  
            }  
  
            <!--出始化月-->  
            for (var i = 1; i <= 12; i++) {  
  
                if (i == (dDate.getMonth() + 1)) {  
                    str = "<option value=" + i + " selected=true>" + i + "</option>";  
                } else {  
                    str = "<option value=" + i + ">" + i + "</option>";  
                }  
                $month.append(str);  
            }  
            <!--调用函数出始化日-->  
            TUpdateCal($year.val(), $month.val());  
            $("#year,#month").bind("change", function(){  
                TUpdateCal($year.val(),$month.val());  
            });  
        });  
  
        <!--根据年月获取当月最大天数-->  
        function TGetDaysInMonth(iMonth, iYear) {  
            var dPrevDate = new Date(iYear, iMonth, 0);  
            return dPrevDate.getDate();  
        }  
  
        function TUpdateCal(iYear, iMonth) {  
            var dDate = new Date(),  
                daysInMonth = TGetDaysInMonth(iMonth, iYear),  
                str = "";  
  
            $("#day").empty();  
  
            for (var d = 1; d <= parseInt(daysInMonth); d++) {  
  
                if (d == dDate.getDate()) {  
                    str = "<option value=" + d + " selected=true>" + d + "</option>";  
                } else {  
                    str = "<option value=" + d + ">" + d + "</option>";  
                }  
                $("#day").append(str);  
            }  
        }  
  

    </script>  

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

jsp:

 This is my JSP page. <br><br><br>
    easyui自带的日历功能:<br>
    <form action="user!loginValidate" method="get">
    从<input id="startTime" class="easyui-datetimebox" name="birth1" data-options="required:true,showSeconds:false" value="" style="width:150px">  
   到 <input id="endTime" class="easyui-datetimebox" name="birth2" data-options="required:true,showSeconds:false" value="" style="width:150px">    
<br/>
<br/>
<br/>
生日年月日的三级联动<br>
<select id="year" name="year">
<option >${year}</option>
</select>年  
    <select id="month" name="month">
   
    </select>月  
    <select id="day" name="day"></select>日  
<input type="submit" name="sub" value="提交">
</form>
项目中路径问题:<br>
    ServletPath:<%=request.getServletPath() %><br/>
    获取项目的根路径contextPath:<%=request.getContextPath() %><br>
    <hr/>
   <a href="${contextPath }">项目的根路径path: ---${contextPath }---</a> 
   <br/>
    <a href="${pageContext.request.contextPath }">项目的根路径path: --- ${pageContext.request.contextPath }---</a>




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值