Remove time from ASP MVC @Html.TextBoxFor Control using jQuery datepicker
asp.net-mvc, asp.net-mvc-3, datepicker, jquery
Solution
By using `@Html.TextBox` as opposed to `@Html.TextBoxFor` I was able to find an overload that works.
@Html.TextBox("DateTaken", Model.DateTaken.ToString("MM/dd/yyyy"), new { id = "dtkn" })
Problem
How do I prevent the time from showing up when using the jQuery `.datepicker()`? Below is the section of the model for the two attributes (date taken and expiration date) ``` [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:d}")] [DisplayName("Expiration Date")] public string ExpirationDate { get; set; } [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:d}")] [DisplayName("Date Taken")] public string DateTaken { get; set; } ``` This works fine using the `@Html.EditorFor` control on the view I'm working on. However, when I change that control from this: ``` @Html.EditorFor(model => model.DateTaken) ``` to this: ``` @Html.TextBoxFor(m => m.DateTaken, new { id = "dtkn" }) ``` in order to get this to work (label which control has the `datepicker` applied to it): ``` <script> $(function () { $("#dtkn").datepicker('setDate'); $("#exp").datepicker('setDate'); }); $.datepicker.setDefaults({ buttonImageOnly: true, buttonImage: '<%=Url.Content("~/Content/images/magnify.gif") %>', defaultDate: -1, gotoCurrent: true, prevText: "<< Prev", nextText: "Next >>" }); </script> ``` suddenly the time begins to show up. Any suggestions? EDIT I have tried the following formats and none will work: ``` $("#dtkn").datepicker({ dateFormat: 'dd-mm-yy' }).val(); $("#dtkn").datepicker({ dateFormat: 'yy-mm-dd' }); $("#dtkn").datepicker('getDate').format('yyyyMMdd'); ``` and this: ``` $("#dtkn").datepicker('getDate').datepicker('dd/mm/yy'); $('#dtkn').datepicker('option', { dateFormat: 'd MM y' }); ``` Here is the error I'm seeing the Chrome debugging console: ``` Uncaught TypeError: Cannot call method 'datepicker' of null ```