DEV Community

Mohammed Ahmed Hussien
Mohammed Ahmed Hussien

Posted on

4 1

Set min Date to Today in Date Input Field, By Tag Helper in ASP.NET Core

Here I will show you how to set date input field's min date to today by Tag Helper in asp.net core.
Create a new class name it InputDateTagHelper (or any name you like it).
Update the InputDateTagHelper.cs class with the following code statements:

[HtmlTargetElement("input", Attributes ="is-accept-old-day")]
    public class InputDateTagHelper : TagHelper
    {
        [HtmlAttributeName("is-accept-old-day")]
        public bool OldDay { get; set; } = false;
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            if (!OldDay)
            {

                var dateTime = DateTime.Now;
                var dd = dateTime.Day;
                var mm = dateTime.Month;
                var yyyy = dateTime.Year;

                string newDay = Convert.ToString(dd);
                string newMonth = Convert.ToString(mm);

                if (dd < 10)
                {
                    newDay =  $"0{newDay}";
                }
                if(mm < 10)
                {
                    newMonth = $"0{mm}";
                }
                var today = $"{yyyy}-{newMonth}-{newDay}";
                output.Attributes.SetAttribute("min", today);
            }
        }
    }
Enter fullscreen mode Exit fullscreen mode

The previous code is accept a boolean field OldDay if the field is false then set a min attribute to Date Input field and set it's value to date of today.

To test this new tag helper in your .cshtml file, you have to register it inside _ViewImport.cshtml file first, Here is the code:

@addTagHelper Platform.Infrastructure.*, Platform
Enter fullscreen mode Exit fullscreen mode

The Platform is my ProjectName and the Infrastructure is the folder that I put the InputDateTagHelper.cs class inside it

So, now you can use the InputDateTagHelper like so:

<input type="date" is-accept-old-day="false" />
Enter fullscreen mode Exit fullscreen mode

Here I force the input field to accept the today as a min date by passing false to is-accept-old-day field

The HTML output is

<input type="date" min="2021-08-13">
Enter fullscreen mode Exit fullscreen mode

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay