Custom DateTime Format in ASP.NET Core MVC 5

Create ASP.NET Core MVC 5 Project

On the Visual Studio, select Create a new project from Get Started

Select ASP.NET Core Web Application

Input Project Name and select Location for new project

Select ASP.NET Core 5.0 Version and select ASP.NET Core Empty Template. Click Create button to finish

Add Configurations

Open Startup.cs file and add new configurations as below:

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace LearnASPNETCoreMVC5
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllersWithViews();
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Demo}/{action=Index}/{id?}");
            });
        }
    }
}

Entities Class

Create new folder named Models. In Models folder, create new entities class as below:

Account Entity

Create new class named Account.cs as below:

using System;

namespace LearnASPNETCoreMVC5.Models
{
    public partial class Account
    {
        public string Username { get; set; }
        public string Password { get; set; }
        public string FullName { get; set; }
        public DateTime Birthday { get; set; }
    }
}                

Account MetaData

Create new class named AccountMetaData.cs as below:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.ModelBinding;
using System;
using System.ComponentModel.DataAnnotations;
using System.Globalization;
using System.Threading.Tasks;

namespace LearnASPNETCoreMVC5.Models
{
    public class AccountMetaData
    {
        [ModelBinder(BinderType = typeof(CustomDateTimeModelBinder))]
        [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
        public DateTime Birthday { get; set; }
    }

    [ModelMetadataType(typeof(AccountMetaData))]
    public partial class Account
    {
    }

    public class CustomDateTimeModelBinder : IModelBinder
    {
        public Task BindModelAsync(ModelBindingContext bindingContext)
        {
            var displayFormatString = bindingContext.ModelMetadata.DisplayFormatString;
            var value = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);
            if (!string.IsNullOrEmpty(displayFormatString) && !string.IsNullOrEmpty(value.FirstValue))
            {
                displayFormatString = displayFormatString.Replace("{0:", "").Replace("}", "");
                var date = DateTime.ParseExact(value.FirstValue, displayFormatString, CultureInfo.InvariantCulture);
                bindingContext.Result = ModelBindingResult.Success(date);
            }
            return Task.CompletedTask;
        }
    }

}                

Create Controller

Create new folder named Controllers. In this folder, create new controller named AccountController.cs as below:

using LearnASPNETCoreMVC5.Models;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Diagnostics;

namespace LearnASPNETCoreMVC5.Controllers
{
    [Route("account")]
    public class AccountController : Controller
    {
        [Route("add")]
        [Route("")]
        [Route("~/")]
        public IActionResult Add()
        {
            var account = new Account { 
                Birthday = DateTime.Now
            };
            return View("Add", account);
        }

        [HttpPost]
        [Route("save")]
        public IActionResult Save(Account account)
        {
            Debug.WriteLine("Account Info");
            Debug.WriteLine("username: " + account.Username);
            Debug.WriteLine("password: " + account.Password);
            Debug.WriteLine("full name: " + account.FullName);
            Debug.WriteLine("birthday: " + account.Birthday.ToString("yyyy-MM-dd"));
            return RedirectToAction("add");
        }
    }
}                

Create View

Create new folder named Views. In this folder, create new folder named Account and add new views as below:

Index View

In Account folder, create new view named Index.cshtml as below:

@model LearnASPNETCoreMVC5.Models.Account

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
    $(function () {
        $("#birthday").datepicker({
            dateFormat: 'dd/mm/yy'
        });
    });
</script>

<h3>Register</h3>
<form method="post" asp-controller="account" asp-action="save">
    <table>
        <tr>
            <td>Username</td>
            <td><input type="text" asp-for="Username" /></td>
        </tr>
        <tr>
            <td>Password</td>
            <td><input type="password" asp-for="Password" /></td>
        </tr>
        <tr>
            <td>Full Name</td>
            <td><input type="text" asp-for="FullName" /></td>
        </tr>
        <tr>
            <td>Birthday</td>
            <td><input type="text" asp-for="Birthday" id="birthday" /></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td><input type="submit" value="Save" /></td>
        </tr>
    </table>
</form>

Create Razor View Imports

Select Views folder and right click to select Add\New Item Menu

Select Web\ASP.NET in left side. Select Razor View Imports item and click Add button to Finish

In _ViewImports.cshtml file and TagHelpers library as below:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Structure of ASP.NET Core MVC 5 Project

Run Application

Access Index action in Account controller with following url: http://localhost:48982

Output

Click Save button submit form to Save action in Account controller with following url: http://localhost:48982/account/save

Output

Account Info
username: acc
password: 123
full name: Name 1
birthday: 2022-01-22