Adding date picker to textbox

Question

I need to pass two dates to my controller as a filter. I have two text boxes in the View where I need the datepicker to pop up when clicked.

I have tried many variants given on the net. I have tried using Bootstrap Datepicker and JqueryUI. But both doesn't seem to give me any output

<th>
     @*<input class="date-picker" />
     <input type="text"  name="from" class="date-picker"/>*@
     <p>
       From : <input type="text" name="from"  id="from"/>
       <br />
       To : <input type="text" name="to" id="to"/>
     </p>
</th>

Scripts

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#from').datepicker();

        $('#from').focus(function () {
            $('#from').datepicker('show');
        });

        $('#from').click(function () {
            $('#from').datepicker('show');
        });
        //$('#ui-datepicker-div').show();
        $('#from').datepicker('show');
    });
</script>

Is there any specific place where I should add these scripts. Now i have added the scripts in the head. But I have already tried adding it after the body. I have also added the following at the end of the layout.

@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryajax")
@Scripts.Render("~/bundles/bootstrap") in the layout

Is there an issue with the order of the script files?

And my intellisense doesnt show datepicker instead shows datetimepicker.. But i have tried using both with no result. Working with razor.

Answer 1

I added datepicker to your page in this example: http://jsfiddle.net/zkLc8vpj/

And I am still trying to understand why did you use all those javascript code, u only need to:

$(document).ready(function () {
    $('#from, #to').datepicker();
});

Answer 2

So i have found that the issue is with the ordering of the script files. this helped me find a solution. I added the script files in the following order in the head of the html file

@Styles.Render("~/Content/themes/base/css", "~/Content/css", "~/Content/datepicker3.css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/Content/bootstrap-datepicker.js")

and in the bundle config i added the following. The complete bundle file is added to avoid any confusion for a future reader

    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
            "~/Scripts/jquery-ui-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css",
                  "~/Content/Custom.css"));
        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
      "~/Content/themes/base/core.css",
      "~/Content/themes/base/resizable.css",
      "~/Content/themes/base/selectable.css",
      "~/Content/themes/base/accordion.css",
      "~/Content/themes/base/autocomplete.css",
      "~/Content/themes/base/button.css",
      "~/Content/themes/base/.dialog.css",
      "~/Content/themes/base/slider.css",
      "~/Content/themes/base/tabs.css",
      "~/Content/themes/base/datepicker.css",
      "~/Content/themes/base/progressbar.css",
      "~/Content/themes/base/theme.css")); 

    }

I made no changes in the layout though. And the answer has it how to call the date picker.