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

我不满要查看有关日期选择器的文档。这不是很容易理解，但是datepicker本身做得很好，仍然胜过任何本地替代方法。

您需要设置他的内容以及一些其他提示：

$("#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”

第二个datePicker不能选择一个小于第一个datePicker的日期

1 个答案: