Question

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

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

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

(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防止日期格式更改+结束日期晚于开始日期

1 个答案: