bootstrap 日期控件起始日期&结束日期相互约束

最新推荐文章于 2024-08-09 08:10:10 发布

困困莎

最新推荐文章于 2024-08-09 08:10:10 发布

阅读量2.3k

点赞数 1

分类专栏：插件

本文链接：https://blog.csdn.net/weixin_41949786/article/details/80451383

版权

插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

引入控件

使用bootstrap的日期控件需要单独引入bootstrap-datetimepicker.min.css和bootstrap-datetimepicker.min.js

详情及文件可以通过下面地址下载：http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

使用场景

单独引入一个日期控件可以参考上面提供的连接地址上的案例。此处介绍的是怎么使用两个日期控件，一个为开始日期，另外一个为结束日期，两个日期之间建立相互约束关系。即开始日期不能大于结束日期，结束日期不能小于开始日期。

使用方法

html代码

js代码如下

  /* 日期插件初始化    */   
     $('#datetimeStart').datetimepicker({
         language:  'zh-CN', 
         format:'yyyy-mm-dd', 
         weekStart: 1, /*以星期一为一星期开始*/
         todayBtn:  1,
         autoclose: 1, 
         minView:2, /*精确到天*/
         pickerPosition: "bottom-left" 
      }).on("changeDate",function(ev){  //值改变事件
         //选择的日期不能大于第二个日期控件的日期
         if(ev.date){
              $("#datetimeEnd").datetimepicker('setStartDate', new Date(ev.date.valueOf()));
          }else{
              $("#datetimeEnd").datetimepicker('setStartDate',null);
          }
      });
      $('#datetimeEnd').datetimepicker({
           language:  'zh-CN', 
           format:'yyyy-mm-dd', 
           weekStart: 1, /*以星期一为一星期开始*/
           todayBtn:  1,
           autoclose: 1, 
           minView:2, /*精确到天*/
           pickerPosition: "bottom-left"
        }).on("changeDate",function(ev){
           //选择的日期不能小于第一个日期控件的日期
           if(ev.date){
                $("#datetimeStart").datetimepicker('setEndDate', new Date(ev.date.valueOf()));
           }else{
                $("#datetimeStart").datetimepicker('setEndDate',new Date());
           }
        });