Disable Specific Date and all the past dates in Razor pages

Question

i want to disable specific dates and all the past dates in Razor pages calendar. I have database table to store the specific dates, i want to fetch from there and disable the dates in the razor pages calendar.

<input asp-for="ManageBooking.BookingDate" class="form-control" min="@DateTime.Now.ToString("yyyy-MM-dd")" />

this is what i will be doing for disabling all the past dates, but i want to disbale certain dates that will be reading from Database.

Any help would be appreciated,

Thanks, Teena John

Answer 1

Hi @Blooming Developer

<input asp-for="ManageBooking.BookingDate" class="form-control" min="@DateTime.Now.ToString("yyyy-MM-dd")" />

When using the above code, the rendered html element's type is datetime-local. For the datetime-local or date type elements, we can only use min or max attribute to disable the date range. We can't disable the specific date directly.

To disable specific date, you can try to use date picker package, such as Bootstrap DatePicker.

Refer to the following sample:

DisableDate.cshtml:

@page "/disabledate"
@model RazorAspNet6Sample.Pages.DisableDateModel
<div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="manageBooking.BookingDate" class="control-label"></label>
               @* <input asp-for="manageBooking.BookingDate" class="form-control " min="@DateTime.Now.ToString("yyyy-MM-ddThh:mm:ss")" />*@
                <input asp-for="manageBooking.BookingDate" value="@Model.manageBooking.BookingDate.ToString("yyyy-MM-dd")" type="text" class="form-control datepicker" />
                <input type="hidden" id="disabledate" value="@Model.manageBooking.DisabledDate"/>
                <span asp-validation-for="manageBooking.BookingDate" class=" text-danger"></span>
            </div> 
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

@section Scripts{
        <!-- Bootstrap 4 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- Bootstrap Datepicker CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <!-- Bootstrap 4 JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <!-- Bootstrap Datepicker JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript">
        $(function(){ 
            var datesForDisable = $("#disabledate").val().split(",");

            $('.datepicker').datepicker({
                format: 'yyyy-mm-dd',
                autoclose: true,
                todayHighlight: true,
                startDate: new Date(), //set the start date.
                datesDisabled: datesForDisable  //set the disabled date.
            }); 
        });
    </script>
}

DisableDate.cshtml.cs:

    public class DisableDateModel : PageModel
    {
        [BindProperty]
        public ManageBooking manageBooking { get; set; }
        public void OnGet()
        {
            var disabledatelist = new List<DateTime>()
                {
                    DateTime.Now.AddDays(3),
                    DateTime.Now.AddDays(5),
                };
            manageBooking = new ManageBooking()
            {
                BookingDate=DateTime.Now,
                DisabledDate = string.Join(",", disabledatelist.Select(c => c.ToString("yyyy-MM-dd")).ToArray())
            };
        }
        public async Task<IActionResult> OnPostAsync()
        {
            if (!ModelState.IsValid)
            {
                return Page();
            }
             
            return RedirectToPage("./Index");
        }
    }

    public class ManageBooking
    {
        public DateTime BookingDate { get; set; }
        public string DisabledDate { get; set; }
    }

The result as below: the specific date (2023-1-19 and 2023-1-21) is disabled.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion