Ask your question here : ASP.NET or MVC | C# | Windows Phone
Microsoft Technology Journals by Abhimanyu K Vatsa
HOME ABOUT RAZOR BOOK ASP.NET JQUERY C# VIDEOS MVC EBOOK ARCHIVE

28 Oct 2012

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.

Comment using Google Services (35 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. Abhimanyu Kumar Vatsa thank you soo much it realy help me.

    ReplyDelete
  23. thanks Abhimanyu Kumar Vatsa it really helps me

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

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

    ReplyDelete