Second datePicker can not select a date less than the first 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

ptts · Answer 1 · 2018-12-01T20:46:26.617

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"

I'm sorry, I'm trying to figure out why by implementing your script, my second datePicker still allows you to select a date before the first datePicker — okok, Dec 01 '18 at 20:28
I hope its clear now, just copy mine and take it from there, there are 2 errors in yours. — ptts, Dec 01 '18 at 20:47
Sir, this completely alters the logic of the project so far made, using me as MDBootstrap framework, the jquery version used 3.2.1 goes contrary to your code, not initializing the datePicker ..... bad situation !! — okok, Dec 01 '18 at 20:51

Second datePicker can not select a date less than the first datePicker

1 Answers1