使用jquery实现开始日期小于结束日期

来源:互联网 发布:卸载windows更新补丁 编辑:程序博客网 时间:2024/05/16 06:26

首先需要引入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

});
}); 

最后实现效果:


1 0