Monday, 18 April 2016

How to add Jquery datepicker to TextBox

Leave a Comment
Hello every one welcome again to all of you.In this tutorial i am gonna tell you how to add Jquery Client side date picker in ASP.NET MVC application.
I hope you people know about the Datepicker control in ASP.NET Webforms application.It is a Server side control which allows user to enter date in respective textbox. But, You know that there is now server side controls in ASP.NET MVC.But, It is very easy to integrate datepicker to MVC application.I will explain how to do it and this jquery plugin is also a client side control(There is no problem of post backs like in traditional ASP.NET webforms applications).

Step 1: Create a ASP.NET MVC sample application
1.Click New project-->name it


Step 2: Add Controller  and View
1.Add Home controller and Index view.
HomeController.cs

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
 }

2.Add Index view
3.add following jquery code for displaying datepicker

 $(document).ready(function () {
        $("#txtDate").datepicker();
    });

Index.cshtml:
@{
    ViewBag.Title = "Jquery date picker";
    Layout = null; //make layout null
}
<h2>Jquery date picker</h2>
@*Jquery libraries for date picker --both css and javascript*@
@*Jquery theme styles*@
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link href="~/Content/bootstrap.css" rel="stylesheet" />
@*Jquery plugin*@
<script src="~/Scripts/jquery-1.10.2.js"></script>
@*Jquery UI Theme styles for dispaying Datepicker*@
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
@*User script for calling datepicker*@
<script type="text/javascript">
    $(document).ready(function () {
        $("#txtDate").datepicker();
    });
</script>
@using (Html.BeginForm())
{
    @Html.Label("Enter date:")<br/>
    @Html.TextBox("txtDate", "", new { style="width:300px;height:30px;"})
    <input type="button" class="btn btn-success" value="Submit" />
}

4.Run the application and click in textbox .

Download source from here Download.
Conclusion:
I hope this tutorial can understanble by every reader.I will meet you in another real time tutorial.


0 comments:

Post a Comment