引導日期選擇器負載最大值和最小值日期使用Ajax

Question

我要加載的最小日期和最大日期爲通過Ajax引導日期選擇器調用

引導DatePicker的配置：

$(document).ready(function() { 
    $('#datepicker').datepicker({ 
     format: 'yyyy-mm-dd', 
     autoclose: true, 
     keyboardNavigation: true, 
     todayHighlight: true, 
     minDate: sdate, 
     maxDate: edate 
    }) 
    .on('changeDate', function() { 
     getMessageDate(); 
    }); 

}); 

Ajax加載最小和最大日期在配置

var sdate; 
var edate; 

$(document).ready(function() { 
(function() { 
     var result; 
     $.ajax({ 
      url: '${pageContext.request.contextPath}/IRSGetDate', 
      async: false, 
      method: 'POST', 
      success: function(data) { 
       result = data; 
      }, 
      complete: function(){ 
       var obj = $.parseJSON(result); 
       sdate = obj['start']; 
       edate = obj['end']; 

      }, 
      error: function(error,text,http){ 
       alert(error + " " + text + " " + http); 
      } 
     }); 
    })(); 
}); 

但它仍然沒有工作，我做錯了什麼？

我還可以添加特定的日期只在啓用選擇器？

Answer 1

試試這個代碼

一些修改代碼中的

• 改變阿賈克斯取得method: 'GET'
• 改變minDate和MaxDate到startDate和endDate

---

$(document).ready(function() { 
(function() { 
     var result; 
     $.ajax({ 
      url: 'https://api.myjson.com/bins/doxkl', 
      async: false, 
      method: 'GET', 
      success: function(data) { 
       result = data; 
      }, 
      complete: function(){ 
       sdate = result[0].start; 
       edate = result[0].end; 
       loadDatepicker(sdate,edate); 
      }, 
      error: function(error,text,http){ 
       alert(error + " " + text + " " + http); 
      } 
     }); 
     function loadDatepicker(sdate,edate){ 
      $('#datepicker').datepicker({ 
      format: 'mm/dd/yyyy', 
      autoclose: true, 
      keyboardNavigation : true , 
      todayHighlight:true, 
      autoclose: true, 
      startDate:sdate, 
      endDate:edate 
      }) 
      .on('changeDate', function() { 
      getMessageDate(); 
      }); 
     } 
    })(); 
}); 

---

我在下面的例子中我已經設置"start": "08/08/2017"和"end": "08/28/2017"

$(document).ready(function() { 
 
(function() { 
 
     var result; 
 
     $.ajax({ 
 
      url: 'https://api.myjson.com/bins/doxkl', 
 
      async: false, 
 
      method: 'GET', 
 
      success: function(data) { 
 
       result = data; 
 
      }, 
 
      complete: function(){ 
 
       sdate = result[0].start; 
 
       edate = result[0].end; 
 
\t \t \t \t loadDatepicker(sdate,edate); 
 
      }, 
 
      error: function(error,text,http){ 
 
       alert(error + " " + text + " " + http); 
 
      } 
 
     }); 
 
     function loadDatepicker(sdate,edate){ 
 
      $('#datepicker').datepicker({ 
 
      format: 'mm/dd/yyyy', 
 
      autoclose: true, 
 
      keyboardNavigation : true , 
 
      todayHighlight:true, 
 
      autoclose: true, 
 
      startDate:sdate, 
 
      endDate:edate 
 
      }) 
 
      .on('changeDate', function() { 
 
      getMessageDate(); 
 
      }); 
 
     } 
 
    })(); 
 
}); 
 

 

 
     

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css"> 
 
<input type="text" type="text" id="datepicker" />