Bootstrap Datepicker使用Ajax加载最大和最小日期

Question

我想通过ajax调用加载引导日期选择器的最小日期和最大日期

Bootstrap 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

试试这个代码

您的代码中做了一些更正

• 更改了ajax 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; 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" />