3

I have a form generated by Razor that allows users to edit some scheduler data, and it works fairly well.

One thing that I do not understand, nor have I seen before, are the Date and Time pickers that are automatically generated by Razor.

To clarify, these are what I'm talking about:

Date and Time Pickers

They're nice and all, but as you can see in the screenshot, they do not use my model values.

The markup itself has my values set in the tags, but the controls ignore them.

Here's what I mean:

enter image description here

As you can see, the values are set in the tags, but the controls are not respecting those values.

I will note that in my custom-built model, I have these properties annotated with the following:

//For the dates...
[DataType(System.ComponentModel.DataAnnotations.DataType.Date)]

//For the time...
[DataType(System.ComponentModel.DataAnnotations.DataType.Time)]

I would prefer to not have to remove these annotations, however if it affects my reaching a solution, I will do what must be done.

To solve this, I'd like one of two things:

  1. Prevent these controls from being generated in the first place so that I can use this absolutely wonderful jQuery datetimepicker addon.
  2. Force these controls to respect and display the values passed in from my model.

All suggestions are appreciated. Suggestions made by those familiar with MVC will be appreciated even more.

keeehlan
  • 7,874
  • 16
  • 56
  • 104

3 Answers3

3

  1. Render these using @Html.TextBoxFor( x => x.StartDate, new { @class = "date" }) and use some jquery something like $('.date').datetimepicker(); to apply the query plugin.

  2. The values for date and time inputs should be in the formats yyyy-MM-dd and HH:mm:ss - this explains why they aren't working for you currently. I haven't looked at the plugin you want to use very closely, but it is likely that it will let you configure the date/time formats to use.

StanK
  • 4,750
  • 2
  • 22
  • 46
2

I realize this is old, but Google took me here, so it might take someone else here as well.

If you have not already added the datetimepicker plugin to your bundles, then make sure to do so in the head section (along with jquery and jquery ui, following the plugin's directions).

In your model, add the [UIHint{"DateTime")] attribute above the field. Then, in your "~/Views/Shared/EditorTemplates" folder, create a file called "DateTime.cshtml" with the following contents:

    @model DateTime?

    @Html.TextBoxFor(Model => Model, new { @class = "date" })

    <script type="text/javascript">
        $('#@ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)').datetimepicker();
    </script>

The '#@ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)' part grabs the field's id from the Razor-generated TextBox.Adding the 'date' class is optional but helps if you want to do some custom styling.

longestwayround
  • 979
  • 9
  • 13
0

Here is your problem. value="8:00 AM"

Should be: value="08:00"

Needs to be 24-hour time like 5:00 Pm would need value of 17:00

No need for jquery on this one. Use the correct value and you could use the standard html element.

Here is an example of how I use it in C# Razor page. It works great, reads and writes the model perfectly.

<input type="time" id="ShiftStartTime" name="ShiftStartTime" value="@Model.ShiftStartTime.Hour.ToString("D2")@(":")@Model.ShiftStartTime.Minute.ToString("D2")" class="form-control"/>
Cobysan
  • 99
  • 6