CODEWITHSUNDEEP
c#.netasp.net-core
Waller
Waller

Reputation: 476

Disable dates from datepicker

I have a datepicker:

            <input required type="datetime-local" asp-for="BookStartDate" 
            min="@DateTime.Now.AddDays(+1).Date.ToString("yyyy-MM-dd" + "T09:00")" 
            max="2025-12-30T16:30" 
            value="@DateTime.Now.AddDays(+2).Date.ToString("yyyy-MM-dd" + "T09:00")" />

Is there a way to disable dates that are already stored in mydatabase? This is a booking app so, if the date was booked by other user, I want it to be disabled (not available to pick). Booked date TBL looked like this:

CREATE TABLE [dbo].[BookedDate](
[Id] [int] NOT NULL,
[BkdDate] [datetime] NULL,
[BkdBy] [nchar](10) NULL) ON [PRIMARY]

Upvotes: 0

Views: 619

Answers (1)

Chen
Chen

Reputation: 5114

It seems hard to disable a specific day just by using type="datetime-local", its most common use is to set max and min values to disable out-of range dates.

Perhaps you can add an onchange event to the input to get the current value. If the value already exists, a pop-up box is used to alert you.

You can also use the jquery date picker, and then use the beforeShowDay property to disable some dates. For example,

//Pass your stored date to the view
var unavailableDates = ["2022-10-14", "2022-10-15", "2022-10-16"];
    
    $(function() {
        $("#datepicker").datepicker({
            beforeShowDay: function(date){
                dmy = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
                if(unavailableDates.indexOf(dmy) != -1){
                    return false;
                }
                else{
                    return true;
                }
            }
        });
    });

Upvotes: 1

Related Questions