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.

Comments

  1. Great post it is successfully fix my issue about this component . Thanks

    ReplyDelete
  2. Great. Been looking for a solution for days ...

    Thanks.
    Markus

    ReplyDelete
  3. Great Answer....Excellent ...Now my Datepicker was working

    ReplyDelete
  4. Working!! very thanks, excellent post!

    ReplyDelete
  5. Thanks for the post. It is working for me.

    ReplyDelete
  6. Thank you so much for the post!..

    ReplyDelete
  7. Thanks,
    What must we do to put a datepicker to 2 textbox?

    ReplyDelete
    Replies
    1. Add another .datepicker method inside above $(document).ready function.

      Delete
    2. Or use class selector, and apply the same class to both textboxes. This way you can can attache that datepicker to both with single instance of code.
      Example:
      $(document).ready(function () {
      $(".DateField").datepicker({
      changeMonth: true,
      changeYear: true
      });
      });

      Delete
  8. The years only seem to span 10 years in either direction, is there a way to change that to suit more a DOB if people are like 30 or 40?

    ReplyDelete
    Replies
    1. you can use the yearRange attribute to fix that
      example:
      $(document).ready(function () {
      $("#Dob").datepicker({
      changeMonth: true,
      changeYear: true,
      yearRange: "1950:2013"
      });
      });

      Delete
    2. i have a problem when i give year range in datepicker year dropdown select year range but when i select date by default they pick cuurent date or month...plz give solution..

      Delete
  9. TypeError: $(...).live is not a function

    ReplyDelete
  10. Thank you for the post - very helpful!

    ReplyDelete
  11. I tried the same for MVC4 Mobile template,But its not working

    ReplyDelete
  12. Thanks ! Works great !!!
    You saved my day.

    ReplyDelete
  13. Hi @Abhimanyu
    This is a good article. However, i am getting some problems when i tried to implement this.
    1. First of all the jquery datepicker is showing up but its without a background (like it appears as a transparent dropdown).
    2. Due to this transparent behaviour, i am unable to see it properly on the screen.
    3. i am also getting errors like this in firefox when i run this example.

    Error: SyntaxError: syntax error
    Source File: http://localhost:52350/Content/themes/base/jquery.ui.datepicker.css
    Line: 10
    Source Code:
    .ui-datepicker { width: 17em; padding: .2em .2em 0; display:

    4. Please also let me know which attribute we should use to change the date which is being displayed in the textbox.

    ReplyDelete
  14. Simple but very useful indeed. Thanks

    Shamim

    ReplyDelete
  15. Thank you!
    First time that it works.
    Annette

    ReplyDelete
  16. Very nice article, works fine. Thank you very much. Keep up the good work.

    ReplyDelete
  17. works great
    thanks a lot
    this tips helped me

    ReplyDelete
  18. It does not work well with jquery mobile, it changes the css. button icons no longer show up.

    ReplyDelete
  19. You are genius, you saved my day, thanks a lot :-)

    ReplyDelete
  20. I tried the same for MVC4 Mobile template,But its not working

    ReplyDelete
  21. But it is not working for Editorfor. How can I use it for EditorFor?

    ReplyDelete
  22. How can I use it for EditorFor Control ?

    ReplyDelete
  23. Abhimanyu Kumar Vatsa thank you soo much it realy help me.

    ReplyDelete
  24. thanks Abhimanyu Kumar Vatsa it really helps me

    ReplyDelete
  25. simply wonderful man!!!thank you thank you..thanks a lot..been searching for days for this solution

    ReplyDelete
  26. Thanks you thank you!!! Please how to display the date in this format: Day/Month /Year ex:15/04/2014

    ReplyDelete
  27. dear abhimanyu i am tired of date picker
    the datepicker doesnt appear instead a default template appears
    01/01/0001
    i tried the same code and it worked in windows 7 on friends laptop mine is win 8 i dont know whether it is problem of os or visual studio

    ReplyDelete
  28. please help me i am tired of mvc4 datepicker not working instead this apppears in textbox 01/01/001
    i use vs2010 ultimate and windows 8
    is it the probliem of os or vs

    ReplyDelete
  29. Thank u, what a great tutorial, I have been looking this simple explanation all my day

    ReplyDelete
  30. How can i use for EditiorForControl???????????????????

    ReplyDelete
  31. thanks for your nice tutorial....helped me a lot

    ReplyDelete
  32. hi thanks for the tutorial. how do i get those files into my solution folders?

    ReplyDelete

Post a Comment

Popular posts from this blog

Migrating database from ASP.NET Identity to ASP.NET Core Identity

Customize User's Profile in ASP.NET Identity System