使用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
});
});
最後實現效果: