Skip to main content

Date Range picker with disable old dates

 CND Links

<!-- 

 <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>

 <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" /> -->


HTML


<div class="row">

                                  <div class="col-lg-6">

                                    <div class="form-group">

                                        <label for="">Date From</label>

                                        <input id="startDate" />

                                        

                                        

                                    </div>

                                  </div>

                                  <div class="col-lg-6">

                                     <div class="form-group">

                                        <label for="">Date To</label>

                                        

                                        <input id="endDate" />

                                        

                                    </div>

                                  </div>

                                </div>




Javascript code

  var today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());

        $('#startDate').datepicker({

            uiLibrary: 'bootstrap4',

            iconsLibrary: 'fontawesome',

            minDate: today,

            maxDate: function () {

                return $('#endDate').val();

            }

        });

        $('#endDate').datepicker({

            uiLibrary: 'bootstrap4',

            iconsLibrary: 'fontawesome',

            minDate: function () {

                return $('#startDate').val();

            }

        });

Comments