bootstrap-datepicker in dd/mm/yyyy - 选择的日期在设置 minDate 或 maxDate 后显示为 mm/dd/yyyy

Question

我正在动态创建 html 并预填充一些选项卡。这包括每个选项卡上的开始和结束日期，使用 bootstrap-datepicker 作为 dd/mm/yyyy。当我更改开始日期时，设置了结束日期中的 minDate。但是，当我 select 一个新的结束日期时，它显示为 mm/dd/yyyy。如果我 select 结束日期先到开始日期（设置了 maxDate 并且当我 select 一个新的开始日期，它显示为 mm/dd/yyyy），这同样适用。

我创建 html（在一个或多个选项卡上）：

    //Start Date
    contents += '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">';
    contents += '<div class="form-group">';
    contents += '<label class="control-label control-label-left col-lg-5 col-md-5 col-sm-12 col-xs-12" for="startDate0a">Start Date<span class="req"> *</span></label>';
    contents += '<div class="input-group date datepicker1" id="datepicker1">';
    contents += '<input type="text" class="form-control" id="startDate0a" name="startDate" placeholder="Start Date" value="" required>';
    contents += '<span class="input-group-addon">';
    contents += '<span class="glyphicon glyphicon-calendar"></span>';
    contents += '</span>';
    contents += '</div>';
    contents += '</div>';
    contents += '</div>';
    //End Date
    contents += '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">';
    contents += '<div class="form-group">';
    contents += '<label class="control-label control-label-left col-lg-5 col-md-5 col-sm-12 col-xs-12" for="endDate0a">End Date<span class="req"> *</span></label>';
    contents += '<div class="input-group date datepicker2" id="datepicker2">';
    contents += '<input type="text" class="form-control" id="endDate0a" name="endDate" placeholder="End Date" value="" required>';
    contents += '<span class="input-group-addon">';
    contents += '<span class="glyphicon glyphicon-calendar"></span>';
    contents += '</span>';
    contents += '</div>';
    contents += '</div>';
    contents += '</div>';
    contents += '</div>';

然后我捕捉到日期的变化并设置最大或最小日期：

    $(document).on('click', '.datepicker1' , function () {
        var date1ID = $(this).attr('id')
        var date2ID =  $(this).attr('id').replace("datepicker1", "datepicker2");
        $('#'+date1ID).datepicker({
            showOn: "both",
            format: 'dd/mm/yyyy',
            todayHighlight: true,
        }).on('changeDate', function (selected) {
                var minDate = new Date(selected.date.valueOf());
                $('#'+date2ID).datepicker('setStartDate', minDate);//set min date
        }).datepicker("show");
    });

    $(document).on('click', '.datepicker2', function () {
        var date2ID = $(this).attr('id')
        var date1ID =  $(this).attr('id').replace("datepicker2", "datepicker1");
        $('#'+date2ID).datepicker({
            showOn: "both",
            format: 'dd/mm/yyyy',
            todayHighlight: true,
        }).on('changeDate', function (selected) {
                var maxDate = new Date(selected.date.valueOf());
                $('#'+date1ID).datepicker('setEndDate', maxDate);//sets max date
        }).datepicker("show");
    });

我的cdn是：

        <!-- Bootstrap Date Picker-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" />

我已经在以下位置尝试过解决方案：

$.datepicker.setDefaults({
    dateFormat: 'dd-mm-yy',
});

即

$(document).on('click', '.datepicker1' , function () {
    var date1ID = $(this).attr('id')
    var date2ID =  $(this).attr('id').replace("datepicker1", "datepicker2");
    $.datepicker.setDefaults({
        dateFormat: 'dd-mm-yy',
    });
    $('#'+date1ID).datepicker({
        showOn: "both",
        format: 'dd/mm/yyyy',
        todayHighlight: true,
    }).on('changeDate', function (selected) {
            $.datepicker.setDefaults({
                dateFormat: 'dd-mm-yy',
            });
            var minDate = new Date(selected.date.valueOf());
            $('#'+date2ID).datepicker('setStartDate', minDate);//set min date
    }).datepicker("show");
});

Answer 1

您可以将整个 datepicker 代码移到 click 事件之外。然后，在 on('changeDate', function(selected) { 中获取下一个或上一个的输入，即：endDate 或 startDate，然后使用该 ID 为其他输入设置最大和最小日期。

演示代码 :

var contents = ""
//Start Date
contents += '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">';
contents += '<div class="form-group">';
contents += '<label class="control-label control-label-left col-lg-5 col-md-5 col-sm-12 col-xs-12" for="startDate0a">Start Date<span class="req"> *</span></label>';
contents += '<div class="input-group date datepicker1" id="datepicker1">';
contents += '<input type="text" class="form-control" id="startDate0a" name="startDate" placeholder="Start Date" value="" required>';
contents += '<span class="input-group-addon">';
contents += '<span class="glyphicon glyphicon-calendar"></span>';
contents += '</span>';
contents += '</div>';
contents += '</div>';
contents += '</div>';
//End Date
contents += '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">';
contents += '<div class="form-group">';
contents += '<label class="control-label control-label-left col-lg-5 col-md-5 col-sm-12 col-xs-12" for="endDate0a">End Date<span class="req"> *</span></label>';
contents += '<div class="input-group date datepicker2" id="datepicker2">';
contents += '<input type="text" class="form-control" id="endDate0a" name="endDate" placeholder="End Date" value="" required>';
contents += '<span class="input-group-addon">';
contents += '<span class="glyphicon glyphicon-calendar"></span>';
contents += '</span>';
contents += '</div>';
contents += '</div>';
contents += '</div>';
contents += '</div>';

$("div.rows").html(contents)
//for date picker1
$(".datepicker1 input").datepicker({
  showOn: "both",
  format: 'dd/mm/yyyy',
  todayHighlight: true,
}).on('changeDate', function(selected) {
  var minDate = new Date(selected.date.valueOf());
  var date2ID = $(this).closest(".col-lg-6").next().find("input").attr("id") //get id of input..next to this
  $('#' + date2ID).datepicker('setStartDate', minDate);
})
//for date picker2
$(".datepicker2 input").datepicker({
  showOn: "both",
  format: 'dd/mm/yyyy',
  todayHighlight: true,
}).on('changeDate', function(selected) {
  var minDate = new Date(selected.date.valueOf());
  var date1ID = $(this).closest(".col-lg-6").prev().find("input").attr("id") //get input prev to this..
  var maxDate = new Date(selected.date.valueOf());
  $('#' + date1ID).datepicker('setEndDate', maxDate);
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" />
<div class="rows"></div>

bootstrap-datepicker in dd/mm/yyyy - 选择的日期在设置 minDate 或 maxDate 后显示为 mm/dd/yyyy

bootstrap-datepicker in dd/mm/yyyy - selected date is displayed as mm/dd/yyyy after minDate or maxDate is set

jquery

datepicker

twitter-bootstrap-3