JQuery UI Datepicker in MVC 4

Today, I spent couple of hours in finding solution to enable the use of Datepicker in MVC 4 Application.

If you create a MVC 4 application using ‘Internet’ template, you will find ‘BundleConfig.cs’ file in ‘App_Start’ folder, open it.

You will notice there is total 6 different bundles (including jquery and css) being processed. Now, open ‘_Layout.cshtml’ file:

You will notice only 3 bundles are being used on views out of 6, that's good but it will not enable you using datepicker in your app. You need 2 more bundles references on the view page where you wish datepicker to appear.

So, open your view page and type following code in @section Scripts {}.

@section Scripts {

    @Scripts.Render("~/bundles/jqueryval")

    @Scripts.Render("~/bundles/jqueryui")

    @Styles.Render("~/Content/themes/base/css")

    <script type="text/javascript">

        $(document).ready(function () {

            $("#Dob").datepicker({

                changeMonth: true,

                changeYear: true

            });

        });

    </script>

}

Please note 'Dob' is the id attribute of textbox.

Now if you run the application you will see your Datepicker working.

Hope this helps. Thanks.