past dates are not hiding in date picker?

Question

Hello Everyone I'm beginner in Jquery and javascript.In my project I have to use bootstrap.I have tried to execute datepicker to hide past datesDate picker is working even though past dates are not hiding..I have attached the below the code..

<!--html:-->
    <div class="form-group">
        <div class="col-sm-3 control-label">
            <label for="FromDate" class="control-label">FromDate:</label>
        </div>
        <div class="col-sm-4">
            <div class="input-group date">
                <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                </div>
                <input type="text" name="fromDate" id="fromDate" class="form-control pull-right" data-validation-engine="validate[required]" />
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-3 control-label">
            <label for="ToDate">ToDate:</label>
        </div>
        <div class="col-sm-4">
            <div class="input-group date">
                <div class="input-group-addon"> <i class="fa fa-calendar"></i>
                </div>
                <input type="text" name="toDate" id="toDate" class="form-control pull-right" data-validation-engine="validate[required]"
                    onchange="report();" />
            </div>
        </div>

    </div>
                    
                    
                    
<!--script:-->
    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        // Date picker
        $('#fromDate').datepicker({
            autoclose: true,
            todayHighlight: true,
            format: 'dd-M-yyyy'
        });
        $('#toDate').datepicker({
            autoclose: true,
            todayHighlight: true,
            format: 'dd-M-yyyy'
        });


        $('#fromDate').datepicker({ minDate: new Date() });

        $('#toDate').datepicker({ minDate: new Date() });

        /*]]>*/
    </script>

Thanks!!

possible duplicate to https://stackoverflow.com/questions/15757918/disable-past-dates-on-datepicker — Sanjit Bhardwaj, Jan 19 '19 at 10:32
Possible duplicate of [disable past dates on datepicker](https://stackoverflow.com/questions/15757918/disable-past-dates-on-datepicker) — Andrea Carraro, Jan 19 '19 at 12:36

score 0 · Answer 1 · answered Jan 19 '19 at 10:38

0

var dateToday = new Date();
var dates = $("#from, #to").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    minDate: dateToday,
    onSelect: function(selectedDate) {
        var option = this.id == "from" ? "minDate" : "maxDate",
            instance = $(this).data("datepicker"),
            date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
        dates.not(this).datepicker("option", option, date);
    }
});

Try the above piece of code

answered Jan 19 '19 at 10:38

Akarsha Rao

78
8

I have used this code also Even though it's not working.should I add any jquery class – demo developers Jan 19 '19 at 10:42
Might be the ids did not match. You have specified #fromDate but the code marked here is #from – Alaksandar Jesus Gene Jan 19 '19 at 10:57

score 0 · Answer 2 · answered Jan 19 '19 at 11:00

I replicated your code and it is working fine.

Can be more clear on the versions and packages you use.

For Datepicker which package you use. I used jquery ui For bootstrap you have used v3 (which is not a consideration here), but the latest version is 4

http://jsfiddle.net/0oL2yh6r/1/

jQuery(document).ready(function(){
    $( "#fromDate" ).datepicker({
    minDate: new Date(),
   autoclose : true,
          todayHighlight : true,
          format : 'dd-M-yyyy'
  });
});

past dates are not hiding in date picker?

2 Answers2