第二个 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
});

您只需要选项对象中的 yearRange: "1930:2018"。

你可以看看这个，上面是一个 datepicker 实例，下面是很差的 HTML/JS 实现

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

好的，这是另一个更短的代码笔：

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

第 8 行设置第一个 datepicker 实例的范围，yearRange: "1990:2010"。

在第 28 行，您对第二个输入元素 yearRange: "1991:2010" 执行相同操作