1. 程式人生 > >使用jquery實現開始日期小於結束日期

使用jquery實現開始日期小於結束日期

首先需要引入jquery.js:

<script type="text/javascript" src="${ctx}/common/js/lib/jquery.js"></script>
<script type="text/javascript" src="${ctx}/common/js/lib/jquery.ui.js"></script>

然後建立兩個input標籤:

投保起期:<input type="datetime" id="startDate" name="startDate" />

投保止期:<input type="datetime" id="endDate" name="endDate" />

然後給他們新增事件(下面是我自己寫的一個簡單的日期選擇介面):

$(function(){
$("#startDate").datepicker({
dateFormat: "yy-mm-dd", prevText: "上月", nextText: "下月", 
dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'], 
dayNames: ['日', '一', '二', '三', '四', '五', '六'],
monthNamesShort: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
changeMonth: true,
changeYear: true,
yearRange: "c-100:c",
onSelect:function(dateText,inst){
      $("#endDate").datepicker("option","minDate",dateText);
   },
maxDate: 0
});
$("#endDate").datepicker({
dateFormat: "yy-mm-dd", prevText: "上月", nextText: "下月", 
dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'], 
dayNames: ['日', '一', '二', '三', '四', '五', '六'],
monthNamesShort: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
changeMonth: true,
changeYear: true,
yearRange: "c-100:c",
onSelect:function(dateText,inst){
       $("#startDate").datepicker("option","maxDate",dateText);
   },
   maxDate: 1

});
}); 

最後實現效果: