jQuery datepicker to prevent past date

Question

How do I disable past dates on jQuery datepicker  I looked for options but don t seem to find anything that indicates the ability to disable past dates    UPDATE  Thanks yall for the quick response  I tried that with no luck  Days were still not grayed out as I expected and still accept the selected past date    I tried this       datepicker   datepicker   minDate   0        Doesn t work   I tried this       datepicker   datepicker   minDate  new Date         Still doesn t work either    It displays the calendar widget just fine  It just won t gray out or prevent input of past days  I ve attempted the minDate and maxDate in the past with no luck so I figured it must not be them

User · Answer

I am using following code to format date and show 2 months in calendar...

<script>
$(function() {

    var dates = $( "#from, #to" ).datepicker({

        showOn: "button",
        buttonImage: "imgs/calendar-month.png",
        buttonImageOnly: true,                           
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 2,

        onSelect: function( selectedDate ) {




            $( ".selector" ).datepicker({ defaultDate: +7 });
            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", "dateFormat", 'yy-mm-dd' );


        }
    });
});

</script>

The problem is I am not sure how to restrict previous dates selection.

User · Answer

Give zero to mindate and it ll disabale past dates        datepicker    datepicker   minDate  0      Live example  read more here

User · Answer

var givenStartDate       startDate   val            alert  START DATE  givenStartDate           var givenEndDate       endDate   val            alert  END DATE  givenEndDate           var date   new Date            var month   date getMonth   1          var day   date getDate            var currentDate   date getFullYear      -                 month lt 10    0          month    -                 day lt 10    0          day          if givenStartDate  lt  currentDate    givenEndDate  lt  currentDate                          updateButton   attr  disabled   disabled                         if givenStartDate  lt  currentDate  amp  amp  givenEndDate  gt  currentDate                                updateButton   attr  enabled   enabled                           if givenStartDate  gt  currentDate    givenEndDate  gt  currentDate                 updateButton   attr  enabled   enabled                  Try this  If any mistake  please correct me    Thanks all

User · Answer

If you are dealing with a previously bound date picker then setting      datepicker   datepicker   minDate  0       will not work  That syntax is applicable only when you are creating the widget   To set min date for a bound date picker use the following       datePicker   datepicker  option    minDate   0

User · Answer

Try this       datepicker   datepicker   minDate  0       Remove the quotes from 0

User · Answer

You just need to specify a minimum date - setting it to 0 means that the minimum date is 0 days from today i e  today  You could pass the string  0d  instead  the default unit is days      function              date   datepicker   minDate  0

User · Answer

Make sure you put multiple properties in the same line  since you only showed 1 line of code  you may have had the same problem I did    Mine would set the default date  but didn t gray out old dates  This doesn t work       date end   datepicker   defaultDate   31        date end   datepicker   minDate  1      This does both       date end   datepicker   defaultDate   31  minDate  1      1 and  1 work the same  or 0 and  0 in your case    Me   Windows 7 x64  Rails 3 2 3  Ruby 1 9 3

User · Answer

Try setting startDate to the current date  For example       date-pick   datePicker  startDate  01 01 1996

User · Answer

disable future dates      datetimepicker1   datetimepicker               format   DD-MM-YYYY               maxDate  new Date                  disable past dates       datetimepicker2   datetimepicker           format   DD-MM-YYYY           minDate  new Date

User · Answer

This should work  lt input type  text  id  datepicker  gt   var dateToday   new Date        datepicker   datepicker       minDate  dateToday      onSelect  function selectedDate        var option   this id     datepicker     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

User · Answer

Use the minDate option to set the minimum possible date  http   jqueryui com demos datepicker  option-minDate

User · Answer

This works       datepicker   datepicker   minDate   0

User · Answer

I used the min attribute   min       new Date    toISOString   substring 0 10        Here s my code and it worked      lt input type  date  min       new Date    toISOString   substring 0 10       id      invdateId      value      d Invoice Invoice Date  c       gt

User · Answer

datePicker   datePicker  startDate  new Date        This works for me

User · Answer

Remove the quotes surrounding 0 and it will work   Working Code Snippet    x000D   x000D     set minDate to 0 for today s date x000D      datepicker   datepicker   minDate  0     x000D  body   x000D      font-size  12px     just so that it doesn t default to 16px  which is kinda huge     x000D    x000D   lt  -- load jQuery and jQuery UI -- gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 4 jquery min js  gt  lt  script gt  x000D   lt script src  https   ajax googleapis com ajax libs jqueryui 1 11 4 jquery-ui min js  gt  lt  script gt  x000D   x000D   lt  -- load jQuery UI CSS theme -- gt  x000D   lt link rel  stylesheet  href  https   ajax googleapis com ajax libs jqueryui 1 11 4 themes smoothness jquery-ui css  gt  x000D   x000D   lt  -- the datepicker input -- gt  x000D   lt input type  text  id  datepicker  placeholder  Select date    gt  x000D   x000D   x000D

[javascript] jQuery datepicker to prevent past date

Examples related to javascript

Examples related to jquery

Examples related to jquery-ui

Examples related to date

Examples related to datepicker