25 July 2016 Sudhanshu Ranjan 987

datepicker textbox in mvc 4 using JQuery


In my last article I have shown that Bind dropdown in MVC using jquery with C#. Now today I am going to implement how to create datepicker textbox in MVC application with JQuery. This is very easiest way to implement datepicker in textbox.


Follow the step.


Step 1: Create Model Class

    public class SampleModel
    {
        [DataType(DataType.Date)]
        [Display(Name = "Registration Date")]
        public DateTime RegistrationDate { get; set; }
    }

Step 2: Create Controllers and View

@model SampleApplication.Models.SampleModel
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />

<h2>Date Picker Textbox in MVC</h2>
<p></p>
@using (Html.BeginForm())
{
    <div class='editor-label'>
        @Html.LabelFor(model => model.RegistrationDate)
    </div>
    <div class='editor-field'>
        @Html.TextBoxFor(c => c.RegistrationDate, new { id = "datepicker", @readonly = "readonly" })
        @Html.ValidationMessageFor(model => model.RegistrationDate)
    </div>
}


<script type="text/javascript">
    $("#datepicker").datepicker({

    });

</script>

Step 3:  Create a new JavaScript file datepicker.js (~/Scripts/datepicker.js) and add following JQuery code.

$(function ()
{
    $(".datefield").datepicker({ dateFormat: 'dd/mm/yy', changeYear: true });
});

Step 4: add JQuery Script on Views page


<script type="text/javascript">
    $("#datepicker").datepicker({

    });

</script>

Step 5: add JQuery and CSS references on page for better UI design.

<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />

Finally You will get the output

Please feel free to ask any doubt here.!!

You can share at :

About Author
Sudhanshu Kumar Ranjan | Lead Engineer at HCL Technologies | Expertise in Microsoft Technology | Author | Blogger | Programmer
Know More
Connect with him on Facebook | Google+ | LinkedIn | Twitter

Recommended Post

Leave a comment

About Dotnet Cube

It's my blog - Dotnet Cube, where you will learn and get solutions about programming, web designing and development. I started this website to share my knowledge and experience which might help someone.

You can get more details about me and my blog at About Us page.

Subscribe Newsletter

Subscribe to our monthly newsletter to get the latest industry news, Media Group updates and our current specials.

Follow On Us...

Home | About | Advertise | Copyrights | Privacy | Contact | Admin

Copyrights © 2015-2017 dotnetcube.com. All rights reserved