Change INPUT TextBox Type Date format in Razor View in ASP.Net Core MVC

pandeygolu4200
 
on Sep 14, 2022 12:43 AM
Sample_170360.zip
2083 Views

I need to display DOB Field in my Razor form and i have used razor syntax for displaying date, but when i click on calendar it shows me date in dd/mm/yyyy format, i need to display in it MM/dd/yyyy.

Without using jQuery date picker i need to display.

@Html.TextBoxFor(c => c.DOB, new { id = "dob",type = "date",@class="form-control" })

 

[Required(ErrorMessage = "DOB is Required")]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy/MM/dd}", ApplyFormatInEditMode = true)]
public DateTime? DOB { get; set; 

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Sep 14, 2022 03:11 AM
on Sep 16, 2022 02:27 AM

Hi pandeygolu420...,

Refer below example.

Model

public class CustomerModel
{
    public Basic Basic { get; set; }
    public Detail Detail { get; set; }

    public int ActiveIndex { get; set; }
}

public class Basic
{
    [Required(ErrorMessage = "Name is Required")]
    public string Name { get; set; }
}

public class Detail
{
    [Required(ErrorMessage = "Country is Required")]
    public string Country { get; set; }

    [Required(ErrorMessage = "DOB is Required")]
    [DataType(DataType.Date, ErrorMessage = "DOB is Required")]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    public DateTime? DOB { get; set; }
}

Controller

public IActionResult Index()
{
    CustomerModel model = new CustomerModel();
    model.ActiveIndex = 1;
    return View(model);
}

[HttpPost]
public IActionResult Index(CustomerModel model)
{
    if (ModelState.IsValid)
    {
        model.ActiveIndex = 2;
        return View("Index", model);
    }
    else
    {
        return View(model);
    }
}

View

@model Multiple_Model_Submit_MVC_Core.Models.CustomerModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-transparent py-4 px-4">
        <div class="d-flex align-items-center">
            <i class="fas fa-align-left primary-text fs-4 me-3" id="menu-toggle"></i>
            <h2 class="fs-4 m-0">Add Provider</h2>
        </div>
    </nav>
    <div class="master-tab-wrapper provider-wrapper">
        <div class="container-fluid px-4">
            <div class="stepper-wrapper">
                <div class="card p-3 mb-3">
                    <ul class="nav nav-tabs mt-3" data-bs-tabs="tabs" id="myTab">
                        <li class="nav-item me-2">
                            <a class="nav-link active" aria-current="true" data-bs-toggle="tab" href="#step1">
                                Step 1
                                <h6>Personal Details</h6>
                            </a>
                            @Html.ValidationMessage("CustomError", new { @class = "text-danger" })
                        </li>
                        <li class="nav-item me-2">
                            <a class="nav-link" data-bs-toggle="tab" href="#step2">
                                Step 2
                                <h6>License, Certifications & More</h6>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#step3">
                                Step 3
                                <h6>Primary/Sub Specialities</h6>
                            </a>
                        </li>
                    </ul>
                    <form method="post" enctype="multipart/form-data" asp-controller="Home" asp-action="Index" class="tab-content mt-3">
                        <div class="tab-pane active" id="step1">
                            <div class="provider-details-wrapper">
                                <h6>Personal Details</h6>
                                <div class="row">
                                    <div class="col-lg-3 col-md-4">
                                        <div class="form-group">
                                            <label for="Name">Name</label>
                                            @Html.TextBoxFor(c => c.Basic.Name, new { @class = "form-control", id = "txtName", placeholder = "Enter Name" })
                                            <span asp-validation-for="Basic.Name" class="text-danger"></span>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-4">
                                        <div class="form-group">
                                            <label for="Country">Country</label>
                                            @Html.TextBoxFor(c => c.Detail.Country, new { @class = "form-control", id = "txtCountry", placeholder = "Enter Country" })
                                            <span asp-validation-for="Detail.Country" class="text-danger"></span>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-4">
                                        <div class="form-group">
                                            <label for="DOB">DOB</label>
                                            @Html.TextBoxFor(c => c.Detail.DOB, "{0:yyyy-MM-dd}", new { id = "txtDOB", type = "date", @class = "form-control" })
                                            <span asp-validation-for="Detail.DOB" class="text-danger"></span>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-end mt-5">
                                        <a href="manage-provider.html" class="btn cancel-btn me-3">Back</a>
                                        <input type="submit" class="btn add-btn" value="Save & next" id="btnSaveNext">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="step2">
                            <div class="provider-details-wrapper">
                                <h6>License, Certifications & Documents</h6>
                                <div class="row">
                                    <div class="col-lg-3 col-md-4">
                                        <div class="form-group">
                                            <label for="firstname">Document Name</label>
                                            <input type="text" class="form-control" id="firstname">
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-4">
                                        <label for="state">State</label>
                                        <div class="form-group">
                                            <select class="form-control form-select">
                                                <option>Noida</option>
                                                <option value="1"></option>
                                                <option value="2"></option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-4">
                                        <div class="form-group">
                                            <label for="isuuedate">Isuue Date</label>
                                            <input type="date" class="form-control" id="isuuedate">
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-4">
                                        <div class="form-group">
                                            <label for="tax">Expiration Date</label>
                                            <input type="date" class="form-control" id="tax">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xl-12 col-lg-12 col-md-12 mt-3">
                                        <button class="btn disabled-btn me-3 mb-2">
                                            Drag file here, or Click to Upload
                                        </button>
                                        <button class="btn upload-btn px-5">Upload</button>
                                    </div>
                                </div>                                
                                <div class="d-flex justify-content-end mt-5">
                                    <a href="manage-provider.html" class="btn cancel-btn me-3">Back</a>
                                    <a href="manage-provider.html" class="btn save-btn">Save & next</a>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="step3">
                            <div class="provider-details-wrapper">
                                <h6>Primary/Sub Specialities Details</h6>
                                <div class="d-flex justify-content-end mt-5">
                                    <a href="manage-provider.html" class="btn cancel-btn me-3">Back</a>
                                    <a href="manage-provider.html" class="btn save-btn px-4">Save</a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="position-fixed top-0 end-0 p-3" style="z-index: 11;display:none;">
        <div id="liveToastdelete" class="toast hide " role="alert" aria-live="assertive" aria-atomic="true"
             data-bs-animation="true" data-bs-autohide="true">
            <div class="toast-header bg-white">
                <strong class="me-auto text-dark">Provider has been Added Succesfully.</strong>
                <small class="text-dark"></small>
                <button type="button" class="btn-close" id="closebtn" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('#myTab li:nth-child('+@Model.ActiveIndex+') a').tab('show');
        });
    </script>
</body>
</html>

Screenshot

Note: The browsers display format is set as per your local machines calendar format.

Since you are using input type Date browser considers its own internal datepicker.

So every browser has its own styling, which makes for a different user experience across platforms.

So it is impossible to change the format in Date Input.

As HTML5 date input specification refers to the RFC 3339 specification, which specifies a full-date format equal to yyyy-mm-dd.

This format is used by the value HTML attribute.

Reference: https://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format