Remove time from ASP MVC @Html.TextBoxFor Control using jQuery datepicker

Question

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

Duplicate stackoverflow.com/questions/1328025/…

David
– David

2013-03-29 18:04:33 +00:00
Commented Mar 29, 2013 at 18:04 — David
– David, Commented Mar 29, 2013 at 18:04
Tried those solutions without any luck. See edits.

NealR
– NealR

2013-03-29 19:36:15 +00:00
Commented Mar 29, 2013 at 19:36 — NealR
– NealR, Commented Mar 29, 2013 at 19:36

Jasen · Accepted Answer · 2013-03-29 20:11:33Z

15

Edit: MVC4 users can use this

You want this overload

@Html.TextBoxFor(m => m.DateTaken, "{0:MM/dd/yyyy}", new { id="dtkn" })

If you're willing to give up on the helper just to it manually

<input type="text" value="@Model.DateTaken.ToString("MM/dd/yyyy")" id="dtkn" />

edited Mar 29, 2013 at 20:11

answered Mar 29, 2013 at 19:50

Jasen

14.3k3 gold badges55 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

NealR Over a year ago

I get the error No overload for method 'TextBoxFor' takes 3 arguments

Jasen Over a year ago

Sorry, missed MVC3. Try stackoverflow.com/questions/5972536/…

JayJay Over a year ago

this seems to be the most sensitive approach if you don't want to mess with existing markup and/or view model

NealR · Accepted Answer · 2013-03-29 22:36:52Z

4

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" })

answered Mar 29, 2013 at 22:36

NealR

10.7k61 gold badges169 silver badges307 bronze badges

Comments

Cuteboy_Max · Accepted Answer · 2016-05-17 04:18:53Z

0

@Html.TextBoxFor(m => m.DateTaken,"{0:d/M/yyyy}", new { id = "dtkn" })

[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:d/M/yyy}")] [DisplayName("Date Taken")] public string DateTaken { get; set; }

answered May 17, 2016 at 4:18

Cuteboy_Max

1311 silver badge4 bronze badges

Collectives™ on Stack Overflow

Remove time from ASP MVC @Html.TextBoxFor Control using jQuery datepicker

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related