第二個datePicker不能選擇一個小於第一個datePicker的日期

Question

作為標題，我在項目中實現了兩個datePicker，我的目標是第二個datePicker無法選擇在第一個datePicker中選擇的日期之前的日期。

碼：

    <div class="col-md-4">
    <form name="NOME_FORM" method="post" action="registra_campagne.php" class="text-center border border-light p-5" onsubmit="return validateForm()">
    <p class="h4 mb-4">Durata Campagna</p>
    <div class="md-form">
    <!--The "from" Date Picker -->
    <input name="data_inizio" placeholder="Data inizio" type="text" id="date-picker-example" class="form-control datepicker">
    <label for="date-picker-example">Inizio</label>

    </div>
    <div class="md-form">
    <!--The "to" Date Picker -->
    <input name="data_fine" placeholder="Data Fine" type="text" id="date-picker-example2" class="form-control datepicker">
    <label for="date-picker-example2">Fine</label>
    </div>
    <input class="btn btn-info btn-block" name="submit" type="submit" value="Aggiungi"><br>
    </form>
    </div>
    <script type="text/javascript">




    // Data Picker Initialization
    $('.datepicker').pickadate({
    min : new Date(),
    onClose: function(){
    $('#date-picker-example2').pickadate({
    min : $('.datepicker').val()
    })
    }
    });


    $('.datepicker').pickadate({
    // Escape any “rule” characters with an exclamation mark (!).
    format: 'yyyy/mm/dd',
    formatSubmit: 'Y/m/d',
    hiddenPrefix: 'prefix__',
    hiddenSuffix: '__suffix'
    })


    $('.datepicker').pickadate({
    closeOnSelect: false,
    closeOnClear: false

    });
    $('#input_starttime').pickatime({
    twelvehour: true

    });
    $('#input_endtime').pickatime({
    darktheme: true,
    twelvehour: false

    });
    </script> 

我將不勝感激，因為到目前為止，唯一實現的功能是使用datePicker的用戶無法選擇當前日期之前的日期

Answer 1

我不滿意要查看有關日期選擇器的文檔。 這不是很容易理解，但是日期選擇器本身做得很好，仍然勝過任何本機替代方案。

他是您需要設置的內容以及一些其他提示：

$("#date2").datepicker({ // initialization, you pass an option object to the datepicker function
changeMonth: true,          // with this you can change months on click

changeYear: true,            //  change year on click

yearRange: "1930:2018",       // your year range , this is what you need
showAnim: "slide",            // give the datpicker calendary UI an animation
onSelect: calcDiff,           // here you can pass you own callback functions, this is mine, you do not need this
onClose: move,                 // another of my own

minDate: null,                 // do not set this if you want to limit the range
maxDate: null                   // do not set this
});

您需要做的是options對象中的yearRange：“ 1930：2018”。

您可以檢查一下，上面一個是datepicker實例，下面是非常差的HTML / JS實現

https://codepen.io/damPop/pen/oayEdg?editors=0010

好的，這是另一個較短的codepen：

https://codepen.io/damPop/pen/vQbprR?editors=1010

在第8行中，您為第一個日期選擇器實例yearRange設置了范圍：“ 1990：2010”。

在第28行中，對第二個輸入元素yearRange執行相同的操作：“ 1991：2010”