Populate alternate Field using jQuery DatePicker in MVC3 Razor

Home » jQuery DatePicker » Populate alternate Field using jQuery DatePicker in MVC3 Razor

Populate alternate Field using jQuery DatePicker in MVC3 Razor

Posted by 20Fingers2Brains on Tags: jQuery DatePicker

In this article we will see how to show the date selected in the datepicker textbox in some other container.
Often we have requirement where we want to show same date in different formats.
We cannot show same date in different formats in same container (like textbox).
In order to achieve this we can create another textbox and can show same date selected in other format.
We will see this feature integrated with MVC3 Razor application.

Following are the steps :

ViewModel :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace jQueryDatePicker.Models
{
    public class Register
    {
        public DateTime DOB { get; set; }
    }
}

We have created a ViewModel. We will bind this ViewModel to our view. The poperty defined in the ViewModel will be rendered as control. We will use this property to use DatePicker.

View :

@model jQueryDatePicker.Models.Register
@{
    Layout = "../Shared/_Layout.cshtml";
}

<!DOCTYPE html>
@Html.EditorFor(Model => Model.DOB)

<input type="text" id="alternate" />

<script type="text/javascript">

    $(document).ready(function () {
        $("#DOB").datepicker({
            altField: "#alternate",
            altFormat: "DD, d MM, yy"
        });
    });
</script>

In the View, we have binded the ViewModel. We are using EditorFor to render control for our DOB property. We have also created one textbox. On selecting the date from datepicker, the alternate textbox will show the date in different format.

Layout :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.8.3.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.widget.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
</head>

<body>
    @RenderBody()
</body>
</html>

Demo :

Click inside first textbox to open datepicker.

When you select date after opening the datepicker. The date gets displayed in the textbox also date gets displayed in alternate textbox with spcified format.

By this way we can display the selected field in alternate control with another format for user convinience.