时间戳

首页 > 解决方案 > dd/mm/yyyy 中的 bootstrap-datepicker - 设置 minDate 或 maxDate 后，所选日期显示为 mm/dd/yyyy

jquery - dd/mm/yyyy 中的 bootstrap-datepicker - 设置 minDate 或 maxDate 后，所选日期显示为 mm/dd/yyyy

问题描述

我正在动态创建 html 并预填充一些选项卡。这包括使用 bootstrap-datepicker 作为 dd/mm/yyyy 在每个选项卡上的开始和结束日期。当我更改开始日期时，会在结束日期中设置 minDate。但是，当我选择一个新的结束日期时，它显示为 mm/dd/yyyy。如果我首先选择结束日期到开始日期（设置了 maxDate 并且当我选择新的开始日期时它显示为 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、minDate、maxDate + dateformat 问题

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

IE，

$(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");
});

标签： jquerytwitter-bootstrap-3datepicker

解决方案

您可以将整个datepicker代码移到clickevent 之外。然后，在里面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>

推荐阅读