如果选择当月的第一天，则从日期选择器传递的日期不正确

Question

这里的第一个问题，所以要温柔:)

jquery 和日期选择器相当新，这个让我很困惑，所以希望有更多知识的人可以提供帮助。

基本上，我有 2 个日期选择器，人们可以在其中选择下一个 2 个付款日期，但如果有人从日期选择器 2 (#incomeNextDate2) 中选择 2 月 1 日或 3 月 1 日，那么第一个日期选择器中的日期 (#incomeNextDate1 ) 显示 01/01/2021 或 02/01/2021。我假设这是 datepicker 2 中的 onselect 函数的问题，但无法解决问题所在。日期选择器的 jquery 如下：

$("#incomeNextDate1").datepicker({
            dateFormat: 'dd/mm/yy',
            defaultDate: +4,
            changeMonth: false,
            minDate: 0,
            maxDate: +40,
            prevText: '<i class="fa fa-chevron-left"></i>',
            nextText: '<i class="fa fa-chevron-right"></i>',
            onSelect: function( selectedDate ) {
                date1 = $('#incomeNextDate1').datepicker('getDate');
                var date2 = $('#incomeNextDate1').datepicker('getDate');
                date1.setDate(date1.getDate()+4);
                date2.setDate(date2.getDate()+45);
                $( "#incomeNextDate2" ).datepicker( "option", "maxDate", date2 );
                $( "#incomeNextDate2" ).datepicker( "option", "minDate", date1 );
                $('#incomeNextDate1').trigger('blur');
            }
        });
        
        $("#incomeNextDate2").datepicker({
            dateFormat: 'dd/mm/yy',
            minDate: +4,
            maxDate: +80,
            changeMonth: false,
            prevText: '<i class="fa fa-chevron-left"></i>',
            nextText: '<i class="fa fa-chevron-right"></i>',            
            onSelect: function( selectedDate ) {
                var days = Math.floor((new Date(selectedDate) - new Date()) / (1000*60*60*24));

                $( "#incomeNextDate1" ).datepicker( "option", "maxDate", Math.min(days, 35) );
                $('#incomeNextDate2').trigger('blur');
            }
        });

我应该补充一点，日期是 01/01/2021 或 02/01/2021 应该是不可能的，因为它不应该是今天之前的日期，一旦发生，日期选择器就会变得无法使用，因为我不能不再选择其他日期或更改月份。

Answer 1

我在这里为你做了一些很酷的东西......

我定义了一些变量来轻松设置最小/最大日期。

这是使用moment.js，当涉及到日期时我总是推荐它，因为它使日期操作更加容易。

let dp_1 = $("#incomeNextDate1");
let dp_2 = $("#incomeNextDate2");

// Min/max from today for DP_1
let minDaysFromToday = 4;
let maxDaysFromToday = 45;

// Min/max from selected date in DP_1 for DP_2
let minSeconDate = 7;
let maxSecondDate = 21;

let today = moment();
let DP1_min = today.add(minDaysFromToday, "d").format("DD/MM/yyyy");
let DP1_max = today.add(maxDaysFromToday, "d").format("DD/MM/yyyy");

console.log(`${DP1_min} - ${DP1_max}`);

dp_1.datepicker({
  dateFormat: "dd/mm/yy",
  minDate: DP1_min,
  maxDate: DP1_max,
  
  /* Those can only be TEXT because it is used as a title attribute. */
  /* It cannot be some fontAwesome icons */
  prevText: "PREVIOUS TEXT",
  nextText: "NEXT TEXT",

  onSelect: function (selectedDate) {
    let selected = moment(selectedDate, "DD/MM/yyyy");

    let DP2_min = selected.add(minSeconDate, "d").format("DD/MM/yyyy");
    let DP2_max = selected.add(maxSecondDate, "d").format("DD/MM/yyyy");
    console.log(`${DP2_min} - ${DP2_max}`);

    // Set DP_2 min/max
    dp_2.datepicker("option", { minDate: DP2_min, maxDate: DP2_max });

    // Remove any DP_2 date and focus it
    setTimeout(function () {
      dp_2.val("").focus();
    }, 100);
  }
});

dp_2.datepicker({
  dateFormat: "dd/mm/yy",
  onSelect: function (selectedDate) {
    console.log(`Selected dates are ${dp_1.val()} and ${dp_2.val()}`);
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<input type="text" id="incomeNextDate1"/>
<input type="text" id="incomeNextDate2"/>