Disable past dates in razor pages date type, minDate is not working

user_2499589 0
Viewed 268

I want to disable past dates of calendar in razor pages. I gave minDate option. It was not working. Still the past dates are available.

<input id="DateRequestDeadLine" asp-for="RequestFormMaster.RequestDeadLine" type="date" class="form-control form-control-sm"/>
    
  $( "#DateRequestDeadLine" ).datepicker({
         minDate: 0
     });

Any help would be appreciated. Thanks, Teena

SOLUTION**********

Just added min attribute via javascript. The below code will add 5 days to Today.And make sure that min attribute is in 'yyyy-mm-dd' format.

var endDate = "", noOfDaysToAdd = 5, count = 0;
                while (count < noOfDaysToAdd) {
                    endDate = new Date(startDate.setDate(startDate.getDate() + 1));
                    if (endDate.getDay() != 0 && endDate.getDay() != 6) {
                        //Date.getDay() gives weekday starting from 0(Sunday) to 6(Saturday)
                        count++;
                    }
                }

                var dd = String(endDate.getDate()).padStart(2, '0');
                var mm = String(endDate.getMonth() + 1).padStart(2, '0'); //January is 0!
                var yyyy = endDate.getFullYear();
                endDate = dd + '/' + mm + '/' + yyyy;
                var minDate = yyyy + '-' + mm + '-' + dd;
                
                document.getElementById("DateRequestDeadLine").style.display = "block";
                document.getElementById("DateRequestDeadLine").min = minDate;

Thanks,Teena

razor-pages asp.net-core datepicker
1 Answers

Maybe you can try to change your datepicker references.Here is a working demo:

cshtml:

<input id="DateRequestDeadLine" asp-for="RequestFormMaster.RequestDeadLine" type="date" class="form-control form-control-sm" />
@section Scripts
{
    <link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
          rel='stylesheet'>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>

    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
    </script>
<script>
    $(function () {
    $("#DateRequestDeadLine").datepicker({
        minDate: 0
    });
})
</script>
}

cshtml.cs:

public class xxxModel : PageModel
{
   
    [BindProperty]
    public RequestFormMaster RequestFormMaster { get; set; }

    public IActionResult OnGet()
    {
        
        return Page();
    }
    
}

public class RequestFormMaster {
    public DateTime RequestDeadLine { get; set; }
}

result: enter image description here

user_135937360
Related