jQuery Date Picker - disable past dates

Question

I am trying to have a date Range select using the UI date picker   in the from to field people should not be able to view or select dates previous to the present day   This is my code     function         var dates        from   to    datepicker           defaultDate    1w           changeMonth  true          numberOfMonths  1          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                            Can some one tell me how to disable dates previous the to the present date

User · Answer

jQuery API documentation - datepicker

The minimum selectable date. When set to null, there is no minimum.

Multiple types supported:

Date: A date object containing the minimum date.
Number: A number of days from today. For example 2 represents two days from today and -1 represents yesterday.
String: A string in the format defined by the dateFormat option, or a relative date.
Relative dates must contain value and period pairs; valid periods are y for years, m for months, w for weeks, and d for days. For example, +1m +7d represents one month and seven days from today.

In order not to display previous dates other than today

$('#datepicker').datepicker({minDate: 0});

User · Answer

By setting startDate  new Date        date-picker   datepicker       defaultDate    1w       changeMonth  true      numberOfMonths  1              startDate  new Date

User · Answer

You must create a new date object and set it as minDate when you initialize the datepickers   lt label for  from  gt From lt  label gt   lt input type  text  id  from  name  from   gt   lt label for  to  gt to lt  label gt   lt input type  text  id  to  name  to   gt   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               Edit - from your comment now it works as expected http   jsfiddle net nicolapeluchetti dAyzq 1

User · Answer

This is easy way to do this      datepicker   datepicker  setStartDate   new Date       also we can disable future days      datepicker   datepicker  setEndDate   new Date

User · Answer

set startDate attribute of datepicker  it works  below is the working code    function        datepicker   datepicker       startDate   -0m        endDate    2d     on  changeDate   function ev           sDate1   text     datepicker   data  date             datepicker   datepicker  hide

User · Answer

mindate  attribute should be used to disable passed dates in jquery datepicker      minDate  new Date   Or minDate   0  is the key for this    Ex     function              datepicker    datepicker  minDate  new Date            OR    function            datepicker    datepicker  minDate  0

User · Answer

Live Demo  try this           from   datepicker                  minDate  0          beforeShow  function               this  datepicker  option    maxDate       to   val                          to   datepicker                 defaultDate    1w           beforeShow  function               this  datepicker  option    minDate       from   val             if      from   val             this  datepicker  option    minDate   0

User · Answer

just replace your code   old code       dateSelect   datepicker       showOtherMonths  true      selectOtherMonths  true      changeMonth  true      changeYear  true      showButtonPanel  true      dateFormat   yy-mm-dd         new code       dateSelect   datepicker       showOtherMonths  true      selectOtherMonths  true      changeMonth  true      changeYear  true      showButtonPanel  true      dateFormat   yy-mm-dd       minDate  0

User · Answer

Use the  minDate  option to restrict the earliest allowed date  The value  0  means today  0 days from today            document  ready function                  txtdate   datepicker               minDate  0                                           Docs here  http   api jqueryui com datepicker  option-minDate

User · Answer

Just to add to this   If you also need to prevent the user to manually type a date in the past  this is a possible solution  This is what we ended up doing  based on  Nicola Peluchetti s answer   var dateToday   new Date         myDatePickerInput   change function          var updatedDate     this  val        var instance     this  data  datepicker        var date     datepicker parseDate instance settings dateFormat      datepicker  defaults dateFormat  updatedDate  instance settings        if  date  lt  dateToday              this  datepicker  setDate   dateToday               What this does is to change the value to today s date if the user manually types a date in the past

User · Answer

I have created function to disable previous date  disable flexible weekend days  Like Saturday  Sunday   We are using beforeShowDay  method of jQuery UI datepicker plugin    x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D  var NotBeforeToday   function date    x000D    var now   new Date      this gets the current date and time x000D    if  date getFullYear      now getFullYear    amp  amp  date getMonth      now getMonth    amp  amp  date getDate    gt   now getDate    amp  amp   date getDay    gt  0  amp  amp  date getDay    lt  6    x000D     return  true      x000D    if  date getFullYear    gt   now getFullYear    amp  amp  date getMonth    gt  now getMonth    amp  amp   date getDay    gt  0  amp  amp  date getDay    lt  6   x000D     return  true      x000D    if  date getFullYear    gt  now getFullYear    amp  amp   date getDay    gt  0  amp  amp  date getDay    lt  6   x000D     return  true      x000D    return  false      x000D     x000D   x000D   x000D  jQuery   datepicker   datepicker   x000D    beforeShowDay  NotBeforeToday x000D          x000D   x000D   x000D      Here today s date is 15th Sept  I have disabled Saturday and Sunday

User · Answer

Declare dateToday variable and use Date   function to set it   then use that variable to assign to minDate which is parameter of datepicker    var dateToday   new Date       function              datepicker    datepicker           numberOfMonths  3          showButtonPanel  true          minDate  dateToday               That s it     Above answer was really helpful     keep it up guys

User · Answer

you can simply use startDate   today   it working fine for me

User · Answer

you have to declare current date into variables like this     function         var date   new Date        var currentMonth   date getMonth        var currentDate   date getDate        var currentYear   date getFullYear            datepicker   datepicker       minDate  new Date currentYear  currentMonth  currentDate

User · Answer

date    datetimepicker  startDate new Date     datetimepicker  update   new Date       new Date     function get the todays date previous date are locked  100  working

User · Answer

datepicker-dep   datepicker       minDate  0       minDate 0 works for me

[jquery] jQuery Date Picker - disable past dates

Examples related to jquery

Examples related to jquery-ui

Examples related to datepicker

Examples related to uidatepicker

Examples related to jquery-ui-datepicker