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

Question

我想通过 ajax 调用

为 bootstrap 日期选择器加载最小日期和最大日期

Bootstrap 日期选择器配置：

$(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 and 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" />

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

Bootstrap Datepicker load max and min date using Ajax

javascript

ajax

jquery

bootstrap-datepicker