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

Question

As a title I have implemented two datePicker within my project, my goal is that the second datePicker can not select a date before the date selected in the first datePicker.

code:

    <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> 

I would be very grateful because up to now the only feature implemented is that the user who uses the datePicker, can not select a date before the current date

Answer 1

I have had the displeasure to go through the documentation for the datepicker. It is not very easy to understand, but the datepicker itself is well done, still beats any native alternative.

His is what you need to set and some extra tips:

$("#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
});

All you need is yearRange: "1930:2018" in the options object.

You can check this one out, the upper one is a datepicker instance, the bottom is the very poor HTML/JS implementation

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

Ok, here is another, shorter codepen:

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

line 8 you set the range for the first datepicker instance, yearRange: "1990:2010".

On line 28 you do the same for the second input element, yearRange: "1991:2010"