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
