Bootstrap Datepicker 防止日期格式更改 + 结束日期晚于开始日期答案

【问题标题】：Bootstrap Datepicker prevent date format changing + end date later than start dateBootstrap Datepicker 防止日期格式更改 + 结束日期晚于开始日期
【发布时间】：2018-01-21 03:41:51
【问题描述】：

我正在使用Bootstrap Datepicker，但很难阻止客户选择开始日期之前的结束日期+反之亦然（开始日期在结束日期之后）。我尝试了几个script changes，但都没有运气。

希望documentation 有更好的例子。日期范围应该排除这种错误的选择能力似乎很常见。

我还想在首先选择结束日期时填充开始日期。它正在工作，但将所需的格式从 dd mm yyy 更改为 mm dd yyyy。如果它还插入选定的结束日期 - 开始日期 1 年，那就太好了。

Made a CodePen here.

(function($) {
    "use strict";

  //INPUTS
  let startDateInput = $('#date-picker-container input[name="start"]');
  let endDateInput = $('#date-picker-container input[name="end"]');

  //INPUT VALUES
  let startDateValue = startDateInput.val();
  let endDateValue = endDateInput.val();


  $(startDateInput, endDateInput).datepicker({
    format: "dd/mm/yyyy",
    maxViewMode: 3
  });

  $(startDateInput).datepicker()
    .on('changeDate', function(e) {

      if($(endDateInput).val().length <= 0) {

        $(endDateInput).datepicker('show');
        $(endDateInput).val($(this).val()); //PLUS ONE DAY FROM SELECTED VALUE

      }

      $(this).datepicker('hide');

  });


  $(endDateInput).datepicker()
    .on('changeDate', function(e) {

      if($(startDateInput).val() <= 0) {

        $(startDateInput).datepicker('show');
        $(startDateInput).val($(this).val()); //MINUS ONE YEAR FROM SELECTED VALUE

      }

      $(this).datepicker('hide');

  });

})(jQuery);

【问题讨论】：

Bootstrap 4.0.0-alpha.6 已经过时了。 Alpha 版和以下 Beta 版之间有很多重大变化。最新版本是 Bootstrap 4.0.0。最终的。更新可能是个好主意。
我强烈推荐这个插件。它很容易操纵。 daterangepicker.com
查看此答案希望对您有所帮助stackoverflow.com/a/63277340/6373156

标签： javascript jquery twitter-bootstrap bootstrap-datepicker

【解决方案1】：

做这样的事情怎么样。

我自己的自定义范围函数。您可以自定义它回来。 :)

$(document).ready(function(){

  $.calendar_max_min = function(){

    var ths = $(this);
    var caltarget = ths.data("target");
    var calcheck = ths.data("calcheck");
    var calmin  = $(caltarget+"[data-type='min']").prop("value");
    var calmax  = $(caltarget+"[data-type='max']").prop("value");
         if(!calcheck){
           ths.attr("data-calcheck","true");
           ths.datepicker({
           format: 'dd-mm-yyyy',
           startDate: calmin,
           endDate: calmax
            });
            ths.datepicker("show"); // trigger manual. because we set it after click;
         }else{
            ths.datepicker("destroy"); // destoy old format. and reformat option
            if(ths.data("type") === "min") calmin = ''; // if the click item is the min. can change value
            if(ths.data("type") === "max") calmax = ''; // if the click item is the max. can change value

           ths.attr("data-calcheck","true");
           ths.datepicker({
           format: 'dd-mm-yyyy',
           startDate: calmin,
           endDate: calmax
            });
            ths.datepicker("show"); // trigger manual. because we set it after click;
         }
  };

  $(".my_calendar").on("click",$.calendar_max_min);

});

这是 jsfiddle 示例：https://jsfiddle.net/synz/g2yohfb6/

【讨论】：