Pass (Send) jQuery DatePicker selected value to Controller in ASP.Net MVC

Last Reply on Apr 11, 2019 03:16 AM By dharmendr

Posted on Apr 10, 2019 04:24 PM

Hey everyone,

I have a datepicker and when I don't use datepicker I get the date value in my view but with it it just displays the format MM/dd/yyyy so I am wondering how can I get my datepicker to show the saved value when I load the view.

        [Required]
        [Display(Name = "Username")]
        public string UserName { get; set; }

        [DataType(DataType.Date),
            DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}",
            ApplyFormatInEditMode = true)]
        [Display(Name = "Birthday")]
        public DateTime Birthday { get; set; }

        [DataType(DataType.DateTime)]
        [Display(Name = "Date Created")]
        public DateTime DateCreated { get; set; } 

 

    <script>
        $(function () {
            // DATEPICKER JQUERY ADDITION
            $(".datepicker").datepicker({
                dateFormat: "MM/dd/yy",
                changeYear: true,
                shownOn: "button"
            }).css("display", "inline-block")
                .next("button").button({
                    icons: { primary: "ui-icon-calendar" },
                    label: "Select a Date",
                    text: false
                });
            // DATETIMEPICKER JQUERY ADDITION
            $(".datetimepicker").datetimepicker({
                dateFormat: 'MM/dd/yyyy',
                timeFormat: 'hh:mm:ss',
                timeInput: true,
            });
        })
    </script> 
    <div class="col-md-10">
        @Html.EditorFor(model => model.Birthday, new { htmlAttributes = new { @class = "form-control datepicker" } })
        @Html.ValidationMessageFor(model => model.Birthday, "", new { @class = "text-danger" })
    </div>

 

Posted on Apr 11, 2019 03:16 AM

Hi bigbear,

Check this example. Now please take its reference and correct your code.

Namespaces

using System.ComponentModel.DataAnnotations;
using System.ComponentModel;

Model

public class User
{
    [Required]
    [DisplayName("User Name")]
    public string UserName { get; set; }

    [DataType(DataType.Date), DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
    [DisplayName("Birth Date")]
    public DateTime Birthday { get; set; }

    [DataType(DataType.DateTime)]
    [DisplayName("Date Created")]
    public DateTime DateCreated { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        User user = new User();
        user.UserName = "Dharmendra";
        return View(user);
    }

    [HttpPost]
    public ActionResult Index(User user)
    {
        ViewData["BirthDate"] = user.Birthday.ToString("MM/dd/yyyy");
        ViewData["CreatedDate"] = user.DateCreated.ToString("MM/dd/yyyy");
        return View();
    }
}

View

<html>
<head>
    <title>Index</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script>
        $(function () {
            $("#DateCreated").attr("class", "form-control datepicker");
            // DATEPICKER JQUERY ADDITION
            $(".datepicker").datepicker({
                dateFormat: "MM/dd/yy",
                changeYear: true,
                shownOn: "button",
            })
            .css("display", "inline-block")
            .next("button")
            .button({
                icons: { primary: "ui-icon-calendar" },
                label: "Select a Date",
                text: false
            });
        })
    </script>
</head>
<body>
    <% using (Html.BeginForm("Index", "Home")) {%>
    <table>
        <tr>
            <td><%: Html.LabelFor(model => model.UserName) %></td>
            <td><%: Html.TextBoxFor(model => model.UserName, new { @class = "form-control" })%></td>
        </tr>
        <tr>
            <td><%: Html.LabelFor(model => model.Birthday)%></td>
            <td><%: Html.TextBoxFor(model => model.Birthday, new { @class = "form-control datepicker" })%></td>
        </tr>
        <tr>
            <td><%: Html.LabelFor(model => model.DateCreated)%></td>
            <td><%: Html.EditorFor(model => model.DateCreated, new { @class = "form-control datepicker" })%></td>
        </tr>
        <tr>
            <td colspan="2" align="center"><input type="submit" value="Save" class="btn btn-primary" /></td>
        </tr>
    </table>
    <% } %>
    <%if (ViewData["BirthDate"] != null) {%>
    <b>Selected Birth Date : </b><%=ViewData["BirthDate"] %>
    <% } %>
    <br />
    <%if (ViewData["CreatedDate"] != null) {%>
    <b>Selected Created Date : </b><%=ViewData["CreatedDate"]%>
    <% } %>
</body>
</html>

Screenshot