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

Question

我正在使用 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);

Answer 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/