CODEWITHSUNDEEP
c#jqueryasp.net-mvc-3razordatepicker
Badmiral
Badmiral

Reputation: 1589

Razor Jquery UI datepicker not working

I've read a lot of the questions on stackoverflow about this, tried some examples and am still stuck why this won't work. So I am asking the community.

MODEL:

public class UploadModel
{
    public string PatientID { get; set; }
    public DateTime DrawDate { get; set; }
}

Controller:

public class FileManagementController : Controller
{

    [HttpGet]
    public ActionResult UpLoad()
    {
        ViewData["message"] = String.Empty;
        UploadModel model = new UploadModel
        {
            PatientID = String.Empty,
            DrawDate = DateTime.Now,
        };
        return View(model);
    }
    [HttpPost]
    public ActionResult Upload(UploadModel model, HttpPostedFileBase MyFile)
    {
        if (ModelState.IsValid)
        {
            //Do Validation and Save here

        }
        UploadModel newmodel = new UploadModel
        {
            PatientID = model.PatientID,
            DrawDate = model.DrawDate,
        };

        ViewData["message"] = "data submitted";

        return View(newmodel);
    }

View:

<form action="" method="post" enctype="multipart/form-data" id="MyForm">
        @Html.EditorFor(m => m)
        <label for="MyDateTime">My Date Time:</label>
        <label for="MyFile">File:</label>
        <input type="file" name="MyFile" id="MyFile" /><br />
        <input id="submit" name="submit" type="submit" value="Save" />                       
    </form>

From there, I have added to the _Layout.cshtml page the following code (which all maps correctly)

    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/jquery-ui-1.7.2.custom.css")" rel="stylesheet" type="text/css" />
    <script src='@Href("~/Scripts/jquery-1.7.1.js")' type="text/javascript"  ></script>
    <script src='@Href("~/Scripts/jquery-ui-1.8.1.custom.min.js")'  type="text/javascript" ></script>
    <script type="text/javascript" src='@Href("~/Scripts/jquery.alphanumeric.pack.js")'></script>
    <script type="text/javascript" src='@Href("~/Scripts/jquery.watermark.min.js")'></script>

Then in Views -> Shared I have added an EditorTemplates folder and have created a DateTime.cshtml page that has: 

@model DateTime

@Html.TextBox("", Model.ToString("dd/MM/yyyy"), 
new { @class = "date" })


<script type="text/javascript" >
 $(document).ready(function () {
     //set the date picker
     var dtp = '@ViewData.TemplateInfo.GetFullHtmlFieldId("")';
     dtp = dtp.replace("[", "_");
     dtp = dtp.replace("]", "_");
     //window.alert($(dtp).attr("value"));
     var hid = ($(dtp).attr("type") == "hidden");
     if (!hid) {
         $(dtp).datepicker({
             showOn: 'button', buttonImage: '@Href("~/Content/images/calendar.gif")%>', buttonImageOnly: true
           , changeMonth: true, changeYear: true
           , dateFormat: 'dd M yy'//, numberOfMonths: 2
         });
     }

 });

</script>

This seems to be the flavor of most of the tutorials on this, but don't seem to work. No icon appears. In Chrome I get the html5 calendar popup but never the jquery one. Any suggestions at all would be greatly appreciated.

Upvotes: 2

Views: 2777

Answers (2)

Joshua
Joshua

Reputation: 4139

The selector looks incorrect to me. You're code:

var dtp = '@ViewData.TemplateInfo.GetFullHtmlFieldId("")';

Would result in a string: 'my_id', but you still need to tell jQuery that string is an ID, using the # symbol like so:

var dtp = '#@ViewData.TemplateInfo.GetFullHtmlFieldId("")';

As a side note, do you really want to export that entire Script tag for each rendered DateTime in your model? Seems unnecessary to me, but you may have already thought about this. My recommendation would be to modify your DateTime.cshtml to simply:

@model DateTime

@Html.TextBox("", Model.ToString("dd/MM/yyyy"), new { @class = "date-picker" })

Then somewhere in your page or Layout, something like:

<script type="text/javascript" >
 $(function () {
   $('.date-picker').datepicker({
             showOn: 'button', buttonImage: '@Href("~/Content/images/calendar.gif")%>', buttonImageOnly: true
           , changeMonth: true, changeYear: true
           , dateFormat: 'dd M yy'//, numberOfMonths: 2
   });
 });
</script>

That way, just one script is rendered and all your DateTime's are taken care of.

Upvotes: 2

Christopher Bales
Christopher Bales

Reputation: 1071

Since I'm a noob I can't post a comment (sorry!), but the only advice I can give is to make sure that the html derived from @Html.EditorFor(m => m) is exactly what you need (this html is different depending on the model). Here's more info about that: http://msdn.microsoft.com/en-us/library/ee402949(v=vs.98).aspx

Also, I noticed in the javascript section you have a %> at the end here: "@Href("~/Content/images/calendar.gif")%>" and it looks like an error.

Upvotes: 0

Related Questions