Change the date format in C# ASP .Net Core MVC

Question

How should I make it readonly

@Html.TextBoxFor(m => m.Leave.FromDate, "{0:dd/MM/yyyy}", new { @class = "form-control  default-date-picker" })

Also is there any way to change the following from MM/dd/yyyy to dd/MM/yyyy

<input asp-for="@Model.Leave.TillDate" type="date" asp-format="{0:yyyy-MM-dd}" class="form-control datepicker" />

I have tried using

 [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]

in the class but it does not work. Thanks!!

Answer 1

You can see my test here,following is an example.

Class:

 public class Date
{   
    public Leave Leave { get; set; }
}
public class Leave
{
    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
    public DateTime? FromDate { get; set; }
   
    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
    public DateTime? TillDate { get; set; }
}

Action:

 public IActionResult Test()
    {
        var model = new Date
        {
            Leave=new Leave
            {
                FromDate=DateTime.Now,
                TillDate=DateTime.Now
            }
        };
        return View(model);
    }

View:

@model Date

@Html.TextBoxFor(m => m.Leave.FromDate, "{0:dd/MM/yyyy}", new { @class = "form-control  default-date-picker" })

<input type="text" asp-for="@Model.Leave.TillDate" class="form-control datepicker" />

@section Scripts{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
     <script>
    $(document).ready(function () {
        $('#Leave_FromDate').datepicker({
            format: 'dd/mm/yyyy',
        }).attr('readonly', 'readonly');
        $('#Leave_TillDate').datepicker({
            format: 'dd/mm/yyyy',
        });
    });
</script>
}

And if you want the first one can't be change,you can set by:

 $('#Leave_FromDate').datepicker({
                format: 'dd/mm/yyyy',
            }).attr('disabled', 'true');

Test Result: