How can one disable future dates from the current date and also disable dates 1 month before the cur-CodePudding

Using Blazor date input how can you disable future dates from the current date and also disable dates 1 month or more before the current date? But display the current date when page loads.

I'm using Blazor-Server-Side.

So far I have the razor page set like this:

<InputDate @bind-Value="viewmodel.Date"  id="date"></InputDate> 
<label> The date </label>
<ValidationMessage For="() => viewmodel.Date" />

And the model like this:

  [Required(ErrorMessage = "Select the date")]        
    public DateTime Date { get; set; } = DateTime.Now;

I have tried 'max' attribute in the input tag to leave an end date but it did not work. I could not find a method to do this. Please let me know how I can solve this in Balzor or if there are other ways to achieve the same results? I would prefer if no jquery was used. Thanks for your help.

CodePudding user response：

If you are happy to do it in the markup, you can use min and max

<input type="date" min="2021-11-01" max="2022-01-31"/>

This example restricts to dates between 1st November 2021 and 31st Jan 2022 - the format yyyy-MM-dd is important in min/max.

You can use variables for the dates in Blazor, but make sure to format them using yyyy-MM-dd.

<InputDate @bind-Value="viewmodel.Date" 
     
    id="date" 
    [email protected](-1).ToString("yyyy'-'MM'-'dd") 
    [email protected]("yyyy'-'MM'-'dd")  
    />

Blazor Repl - Working Sample