CODEWITHSUNDEEP
javascriptjquerydatepicker
Aeykash
Aeykash

Reputation: 135

Disable previous dates in datepicker

I tried to use datepicker for a form on my website from a following link. I want to disable previous dates and only allow user to select date from current date and onward. http://eternicode.github.io/bootstrap-datepicker/?markup=input&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&clearBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&keyboardNavigation=on&forceParse=on#sandbox

$(document).ready(function () { 
            $('#sandbox-container input').datepicker({
                format: "dd/mm/yyyy",
                clearBtn: true,
                minDate: 0, 
                maxDate: "+1M +10D",
                daysOfWeekDisabled: "0,6"

            });
});

I add following code minDate: 0,maxDate: "+1M +10D" to achieve this, but its not working. Also I need to add time in this datepicker if it is possible.

Upvotes: 0

Views: 1907

Answers (6)

Lee001
Lee001

Reputation: 19

jQuery(document).ready(function() {

  $('#sandbox-container').datepicker({
    format: "dd/mm/yyyy",
    clearBtn: true,
    minDate: 0,
    maxDate: "+1M +10D",
    daysOfWeekDisabled: "0,6"

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>


Date :
<input id="sandbox-container" type="text">
I want disable only from 2nd date before current date. Please provide me code for it.

Upvotes: 0

user3545750
user3545750

Reputation: 51

Please find the details

Html code for date

<input type="text" id="dateRange" />

JS code

 $("#dateRange").datepicker({
        changeMonth: true,
        changeYear: true,
        hideIfNoPrevNext: true,
        dateFormat: "mm/dd/yy",
        minDate: 0
    });

The will disable all the dates less current date

Upvotes: 0

ROR
ROR

Reputation: 441

Please use $('#sandbox-container') instead of $('#sandbox-container input').

jQuery(document).ready(function() {

  $('#sandbox-container').datepicker({
    format: "dd/mm/yyyy",
    clearBtn: true,
    minDate: 0,
    maxDate: "+1M +10D",
    daysOfWeekDisabled: "0,6"

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>


Date :
<input id="sandbox-container" type="text">

Please visit below links:

http://www.dotnetlearners.com/blogs/view/98/JQuery-Date-Picker-example-to-disable-previous-dates.aspx

Upvotes: 4

user2598136
user2598136

Reputation:

Try this

$('#sandbox-container input')
  .datepicker({
     format: "dd/mm/yyyy",
     minDate: new Date(),                
   });

Upvotes: 1

Kush
Kush

Reputation: 949

Simplest solution is to set today's date as minDate in datepicker as below. This will block all the dates prior to today's date.

$('#sandbox-container input')
  .datepicker({
     format: "dd/mm/yyyy",
     minDate: new Date(),                
   });

Above is sample code just to illustrate how can you set minDate

Upvotes: 1

Ruprit
Ruprit

Reputation: 743

Try this is disable past dates

var dateToday = new Date();
$(document).ready(function () { 
            $('#sandbox-container input').datepicker({
                format: "dd/mm/yyyy",
                clearBtn: true,
                 minDate: dateToday,                
                daysOfWeekDisabled: "0,6"

            });
});

Upvotes: 1

Related Questions