Home > Software design >  Bootstrap datepicker disable dates for certain fields
Bootstrap datepicker disable dates for certain fields

Time:01-26

I have series of bootstrap date fields like this

<input id="TxtNextReviewDate" type="text" asp-for="RequestFormMaster.NextReviewDate" >
<input id="DateSalesRequest" asp-for="SLAInformation.SalesDateOfSubmission" type="text"   />
<input id="DateFinalInfoReceived" asp-for="SLAInformation.SalesFinalInfoReceived" type="text"   />

i want to disable past dates for Next Review Date Calendar(First Calendar input).For the rest i should able to select the past dates.

This is how i am disabling the past dates, its disabling other date field also.how can i restrict this for only one field?

<script>
    var date = new Date();
    date.setDate(date.getDate());

    $('.datepicker').datepicker({
        format: 'dd/mm/yyyy',
        startDate: date
        
    });

    
</script>

Thanks, Teena

CodePudding user response:

how can i restrict this for only one field?

Three Datepicker inputs contains different id. You can use id selector to distinguish the datepicker.

startDate: date cannnot disable the past date selection, it just set the Datepicker's start date. You need use minDate: 0 to disable past date selection.

Change your code like below:

$('#DateSalesRequest,#DateFinalInfoReceived').datepicker({
    format: 'dd/mm/yyyy'
});

$('#TxtNextReviewDate').datepicker({
    format: 'dd/mm/yyyy',
    minDate: 0
});

Result: enter image description here


minDate is not working for me. However i managed to fix the issue. Thanks for the hint.

<script>
    var date = new Date();
    date.setDate(date.getDate());

    $('#TxtNextReviewDate').datepicker({
        format: 'dd/mm/yyyy',
        startDate: date        
    });
    
    $('#TxtLastDate,#TxtDateFinalApproval').datepicker({
        format: 'dd/mm/yyyy',
        
    });
</script>
  •  Tags:  
  • Related