Using DatePicker and jQuery with MVC

Page 1 of 1

1 Replies - 7174 Views - Last Post: 31 July 2012 - 02:12 PM

#1 ItIntern3  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 89
  • Joined: 14-July 10

Using DatePicker and jQuery with MVC

Posted 31 July 2012 - 08:35 AM

Hi all,

I was hoping I could receive a little guidance on implementing a datepicker widget on an date input field.

I have downloaded the default datepicker package on the jQuery Site.

I have also tried numerous different ways found on different tutorial sites (including but not limited to: http://www.asp.net/m...pnet-mvc-part-4

http://blogs.msdn.co...validator.aspx)

In addition to these sites I have tried including the .js and .css files necessary. I have tried placing references to these files in numerous locations including: the Layout view within the shared folder (attempt 1), its own partial view and then using a @Html.Partial("partialViewNameHere") statement at the top of the view (attempt 2) and even just tried referencing the files I wanted at the top of the view itself inside <head></head> tags (attempt 3). I wanted the datepicker to appear and have not had any luck.

The reference statements I am using in attempt 1 and 2:
<link href="@Url.Content("~/Content/themes/jquery.ui.core.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/jquery.ui.theme.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.datepicker.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/EditorHookup.js")" type="text/javascript"></script>


The reference statements I am using in attempt 3--correlates to this tutorial:
<head>
    <link type="text/css" href="../../Content/jquery-ui-1.8.22.custom.css" rel="Stylesheet" />     
    <script type="text/javascript" src="../../Scripts/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery-ui-1.8.22.custom.js"></script>
</head>


In addition to the reference fields here is the code I am trying to create the input field with and call the datepicker widget (located on the view that I want to display the datepicker on):
<input type = "text" name = "StartDate" id = "date" />
<script>
    $(document).ready(function () {
        $(".date").datepicker({ dateFormat: "dd/mm/yy" });
    });
</script>


I have created a date.cshtml to be used by the datepicker:
@model DateTime
@Html.TextBox("", Model.ToString("dd/MM/yyyy"), new { @class = "date" })


Any advice on this would be much appreciated. I am not attached to any of the solutions. I was just trying different tutorials that I saw online to get something working.

This post has been edited by ItIntern3: 31 July 2012 - 08:36 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Using DatePicker and jQuery with MVC

#2 ItIntern3  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 89
  • Joined: 14-July 10

Re: Using DatePicker and jQuery with MVC

Posted 31 July 2012 - 02:12 PM

I have been able to get the date picker running.

Here is the code I used in my view:
    @Html.LabelFor(model => model.EndDate)
    <div class = "editor-field">
        @Html.HiddenFor(model => model.EndDate)
    </div>


And the references I added to the Layout.cshtml (located in the shared views folder):
        <link href="@Url.Content("~/Content/jquery-ui-1.8.22.custom.css")" rel= "Stylesheet" type="text/css" />
        <script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.custom.min.js")" type="text/javascript"></script>


I was able to download the datepicker widget from the link to the jQuery site (in my previous post).

Even though I am satisfied with this solution I would like to know why my other attempts (listed in previous post) are not working correctly.

Now I just need to figure out how to pass the dates from the view back to the controller..
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1