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

Question

我正在使用 Bootstrap Datepicker but having much difficulty preventing client from selecting an end date that is prior to the start date + vice versa (start date is after end date). I have tried a few ，但运气不好。

希望 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/

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

Bootstrap Datepicker prevent date format changing + end date later than start date

javascript

jquery

twitter-bootstrap

bootstrap-datepicker