jQuery DateTime picker and ASP.NET MVC

Question

I'm currently using a jQuery Date Time picker to select a date time to be put in to a database. When using the date time picker, the result shows up properly in the text box it is bound to (IE 27/09/2009 16:00). However, the date time is not being passed to the MVC application properly, and is being received as 01/01/0001 00:00:01.

The method dealing with this requires a single paramaeter - Match m. The page is strongly typed as a match.

<p>
    <label for="TimeAndDate">Time and date (click to reveal date and time picker):</label>
    <br />
    <%= Html.TextBox("TimeAndDate") %>
    <%= Html.ValidationMessage("TimeAndDate", "*") %>   
</p>

<script type="text/javascript">
    $(function() {
        $('#TimeAndDate').datepicker({
            duration: '',
            showTime: true,
            constrainInput: false
         });
    });
</script>

For lengths sake, I've omitted the script includes above, but they are present in the page. The text box and validation message fields were generated by visual studio.

I have a feeling I need, somehow, to implicitly convert the string in the text box in to a DateTime object before passing it to the method, but I don't know how.

Any help on this would be much appreciated

Thanks, Andy

Could you also post the c# code that parses the date string. — MrHus, Aug 27 '09 at 11:38
There isn't any, at the moment. As I said in my post, I had a feeling I'd need to do that, but I'm not sure where that would need to go (somewhere between the view and the controller?) — , Aug 27 '09 at 11:44

score 6 · Accepted Answer · answered Aug 27 '09 at 11:36

6

This usually happens when the input parameter to the controller action is not really a DateTime object.

Double check that the name of your input parameter to the controller action is "TimeAndDate" and that the type is String.

You can then use DateTime.Parse(String) to parse the string into the DateTime type.

answered Aug 27 '09 at 11:36

Mickel

6,658
5
42
59

I'm not passing the date time to the controller as a parameter, I'm passing it as part of an object: public ActionResult MatchesAdd(Match m – Aug 27 '09 at 11:39
That's probobly why it's not getting recognized. It's hard for us to see what you have done wrong if you just put up this small part of your code. – Mickel Aug 27 '09 at 11:40
If you need to see any more parts, just ask. Otherwise, I've put up everything I can think of that's relevant. The Match object contains the field TimeAndDate as a DateTime, and is derived from an SQL table named Matches. – Aug 27 '09 at 11:43
Does the Match object contain any other fields? If so: can you verify that these are being received correctly in your controller? – Mickel Aug 27 '09 at 11:46
Yes, the other fields are being recieved correctly. They are: MatchID(Guid), Info(string), TeamID(Guid), Against(string), Played(bit\bool), OurScore(int), EnemyScore(int), TimeAndDate(DateTime) – Aug 27 '09 at 11:50

score 0 · Answer 2 · answered Aug 27 '09 at 11:47

0

Here is the controller action that receives the data from the page:

    [ValidateInput(false)]
    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult MatchesAdd(Match m)
    {
        try
        {
            m.Against = Server.HtmlEncode(m.Against);
            m.Info = Server.HtmlEncode(m.Info);
            m.MatchID = Guid.NewGuid();

            m.Played = false;
            m.OurScore = 0;
            m.EnemyScore = 0;

            DM.AddMatch(m);

            return RedirectToAction("Matches/List/Upcoming");
        }
        catch(Exception ex)
        {
            return Content(m.TimeAndDate.ToString());
        }
    }

The catch block is purely for debugging at this point.

As you can see, I've done no parsing on the DateTime object, however I've put a breakpoint at the start of the action and the date time is incorrect from the very start. Surely I can't retrieve the correct date from that?

answered Aug 27 '09 at 11:47

How does your Html.BeginForm()-tag look? And what is the name of the Controller? – Mickel Aug 27 '09 at 12:01
My Html.BeginForm() is standard: using (Html.BeginForm()) and the name of the controller is Admin(Controller) – Aug 27 '09 at 12:07
If you write something like 2009-08-27 in your textbox, it still won't work? – Mickel Aug 27 '09 at 12:15
Using 2009-08-27 makes it work, yes. So it seems I need to modify the way the jQuery date time picker outputs dates – Aug 27 '09 at 12:20
Sorry, it is done now. Was waiting to see if anybody else had any input before going with your answer – Aug 27 '09 at 17:05

score 0 · Answer 3 · answered Aug 27 '09 at 12:21

What happens if you try this instead:

[ValidateInput(false)]
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult MatchesAdd(FormCollection values)
{
    Match m = new Match();

    try
    {
        UpdateModel<Match>(m);

        // If your date still has not been picked up you could
        // just uncomment this next line:
        // m.TimeAndDate = DateTime.Parse(values["TimeAndDate"]);

        DM.AddMatch(m);

        return RedirectToAction("Matches/List/Upcoming");
    }
    catch(Exception ex)
    {
        return Content(m.TimeAndDate.ToString());
    }
}

Unfortunately, that brings no luck. Still catches an exception — , Aug 27 '09 at 12:41

score 0 · Answer 4 · edited May 23 '17 at 12:12

As Andy indicated i suspect it is because of the default date format that jQuery uses. With your sample code running on my PC i get 12/22/2012 (current date which is the US format) and i am in Australia. You can change the date format used by jQuery by using the dateFormat:

<script type="text/javascript">
    $(function() {
        $('#TimeAndDate').datepicker({
            duration: '',
            showTime: true,
            constrainInput: false,
            dateFormat: "dd M yy"
         });
    });
</script>

jQuery: dd M yy = dd MMM yyyy (c#)
jQuery ddMM yy = dd MMMM yyyy (c#)

Also you might want want to see here: MVC DateTime binding with incorrect date format

score 0 · Answer 5 · answered Dec 08 '11 at 20:11

0

Try this

[ValidateInput(false)]
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult MatchesAdd(FormCollection collection)
{
    dateTime date = DateTime.Parse(collection["TimeAndDate"].ToString())

return view();
}

This will give you date.

answered Dec 08 '11 at 20:11

Dewasish Mitruka

2,716
1
16
20

jQuery DateTime picker and ASP.NET MVC

5 Answers5