CODEWITHSUNDEEP
twitter-bootstrapdatepickerbootstrap-datepicker
Dashamlav
Dashamlav

Reputation: 245

How to disable all dates prior to a specific day in the DatePicker?

I am new to using Bootstrap datepicker. I have two datepickers in my page: FromDate and ToDate. I want the all the dates that are prior to a specific date called lastDate to be disabled in the FromDate datepicker only. I have the following code:

Razor

<input type='text' asp-for="FromDate" class="form-control date-picker" placeholder="Click here..." id="fromDate" name="fromDate" required checkdate data-date-form>

jQuery

var lastDate = @ViewBag.LastDate;

$('.datepicker').datepicker({
    startDate: lastDate

});

Upon implementing this, I am still able to select dates prior to the lastDate. I understand that .datepicker is referring to the datepicker class. However, I am not sure if I can use #fromDate ID in place of .datepicker.

Upvotes: 0

Views: 410

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

The standard date format is: “mm/dd/yyyy”

If your lastDate does not respect that format you need to specify your specific format:

$('#fromDate').datepicker({
   format: 'dd/mm/yyyy',
   startDate: '18/08/2018'
});


$('#fromDate').datepicker({
    format: 'dd/mm/yyyy',
    startDate: '18/08/2018'
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

    <input type='text' asp-for="FromDate" class="form-control date-picker" placeholder="Click here..."
           id="fromDate" name="fromDate" required checkdate data-date-form>

Upvotes: 1

Related Questions