bootstrap datepicker限制开始结束日期选择

第一次写博客，有点小紧张呢！写得不好，各位不小心看到的客官凑合看吧！不BB了......

之前项目中一直用My97DatePicker日期控件，感觉控制日期选择挺方便。最近参与的一个SpringBoot+Angularjs项目用的是bootstrap datepicker日期控件，想实现在模态框中控制开始结束日期的选择，一开始可以实现开始日期大于等于当前日期，且结束日期大于等于开始日期的效果，但是选择日期后直接关闭模态框，再次打开模态框上次选择的状态没有清除，即再次打开模态框开始结束日期选择的边界是上次选择的日期，不是我想要的效果，自己折腾了一段时间，貌似可以实现目的了。代码贴出来了，有更好的实现方式的客官希望也可以贴下代码学习交流下。

 1 $('#createArrangeDialog').on('shown.bs.modal', function () {
 2         $('#startday').datepicker({
 3             format: 'yyyy-mm-dd',
 4             autoclose : true,
 5             clearBtn: true
 6         }).on('show',function(e){
 7             $('#startday').datepicker('setStartDate', new Date());
 8             if ($('#endday').val() == '') {
 9                 $('#startday').datepicker('setEndDate', null);
10             } else {
11                 $('#startday').datepicker('setEndDate', new Date($('#endday').val()))
12             }
13         }).on('changeDate',function(e){
14             if (e.date) {
15                 $('#endday').datepicker('setStartDate', new Date(e.date.valueOf()));
16             } else {
17                 $('#endday').datepicker('setStartDate', null);
18             }
19         });
20         $('#endday').datepicker({
21             format: 'yyyy-mm-dd',
22             autoclose : true,
23             clearBtn: true
24         }).on('show',function(e){
25             if ($('#startday').val() == '') {
26                 $('#endday').datepicker('setStartDate', new Date());
27             } else {
28                 $('#endday').datepicker('setStartDate', new Date($('#startday').val()));
29             }
30         }).on('changeDate',function(e){
31             if (e.date) {
32                 $('#startday').datepicker('setEndDate', new Date(e.date.valueOf()));
33             } else {
34                 $('#startday').datepicker('setEndDate', null);
35             }
36         });
37 });

 

转载于:https://www.cnblogs.com/eason8023/p/10002561.html