Having trouble with using "DatePicker" in MVC5 application

Trang Bartell

Here is my code:

@Html.TextBoxFor(m => m.DTE_EFFECTIVE, new { @type = "date", @class = "form-control datepicker", @Value = Model.DTE_EFFECTIVE.ToShortDateString() })

Here is the page:

The DatePicker worked great. I was able to select a date and saved to the database. However, the only thing displayed was mm/dd/yyyy. How can I get the date to display with the "datepicker"? Thank you for your help.

9 Replies

Know the answer? Post it — somebody with the same question will find it here.

Mageshwaran R5y ago
Hi Bartell,
Please try this code:

RazorPage:
@model Sample.Model.DatepickList
@{
    ViewBag.Title = "DatepickList";
}
    @using (Html.BeginForm("GetDatepickList", "Home", FormMethod.Post))
    {
            <div class="form-group">
                <label class="form-check-label">From Date:label>
                @Html.EditorFor(x => x.FromDate)
  div>

    }
Model.cs:
public class DatepickList
    {
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
        public DateTime FromDate { get; set; }
    }
HomeController:
public ActionResult GetDatepickList(DateTime FromDate)
       {
           DateTime fromDate = DateTime.Now.Date;
           DatepickList datepickList= new DatepickList();
           datepickList.FromDate = fromDate;
           return View(datepickList);
       }
Trang Bartell5y ago
I used your answer as a guide and modified it such as:
1. Added a new field in my model

2. Added the method you mentioned and reference it in the Controller

3.In the view:

4. Convert back to the DateTime field in the model prior to update/insert to the database:
5. Voila

Not sure if that was the right way, but it worked!!. Thanks for your help. I really appreciate it.
Sachin Singh5y ago
please just copy paste as i have done and everything will work guranteed
Trang Bartell5y ago
Thank you so much again for your help, but it's still not working. Couldn't assign a string to a datetime field for one :-). I agree that it must be the formatting issue, but ??
Sachin Singh5y ago
Okk
This is because of the date format , C# has different date format than the date picker so in your Action method
change it like below
public ActionResult COuntChild()
       {
           DateTime pt = System.DateTime.Now; // Your Date insted of current date

           DateTime dt = new DateTime(pt.Ticks); //convert it to long using Ticks

           string newDateFormatted = dt.ToString("yyyy-MM-dd");// format it

           MyTest mt = new MyTest();  // assign to your model

           mt.DTE_EFFECTIVE = newDateFormatted;

           return View(mt);
       }
In the view
@Html.TextBoxFor(m => m.DTE_EFFECTIVE, "{0:yyyy-MM-dd}", new { type = "date",@Value =Model.DTE_EFFECTIVE })
OP:-
Trang Bartell5y ago
Thank you again for your responses, but...Here is more clarification:

Here is my page with a list of records. I would click "EDIT" on one of the record, let's say record 1 with Effective Date = 12/3/1998.


After click "EDIT" on the form above, this form displayed the record but missing the Effective Date.
Sachin Singh5y ago
Http is stateless so no form data is persisted for next request, not only date input but other controls too lost their value. If you want to retain the value then paas the model object populated with data to the view. Public ActionResult Edit(int id) { Var obj=_context.Users.Where(userId==id). SingleOrDefault() ; return View(obj) // better to return partial view for edit } //view @model myproject.Model.Users @Html.TextBoxFor(x=>x.Name,new{@Value='Model.Name}) same is for date input except that it takes yyyy-mm-dd format as value
Trang Bartell5y ago
Sorry I wasn't being clear with my question. So after I selected a date from the "datepicker" and saved to the database, I exited the form and came back in to edit, the date wasn't there, only "mm/dd/yyyy" as shown in my original question. Thanks
Sachin Singh5y ago
do you want a default date?
@Html.TextBoxFor(m => m.DTE_EFFECTIVE, "{0:yyyy-MM-dd}", new { type = "date",@Value ="2020-10-10" })
your model is null at this moment so nothing is displaying untill you select any date.