3

I have created this editor template:

@model DateTime?

@using MyMvcApp.Properties

<div id="dateTimePicker_@(ViewData.ModelMetadata.PropertyName)">
    <script type="text/javascript" language="javascript">
        //<![CDATA[
        $(document).ready(function () {
            var $div = $('#dateTimePicker_@(ViewData.ModelMetadata.PropertyName)');

            $div.find('.date').datepicker({ altFormat: 'dd-mm-yy' });
        });

        function clearDateTimePicker_@(ViewData.ModelMetadata.PropertyName)() {
            var $div = $('#dateTimePicker_@(ViewData.ModelMetadata.PropertyName)');

            $div.find('.date').val('');
            $div.find('.hour').val('00');
            $div.find('.minute').val('00');
        }
        //]]>
    </script>

    @* Date - should equal DatePicker.cshtml *@
    @Html.TextBox("Value.Date", Model.HasValue ? Model.Value.Date.ToString() : string.Empty, new { @class = "date" })
    <img alt="@Resources.SelectDate" src="../../../images/calendar.png" class="calendarIcon" />

    @* Time - should equal TimePicker.cshtml *@
    @Html.DropDownList("Value.Hour", new SelectList(new[] { "00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23" }, Model.HasValue ? Model.Value.Hour.ToString("D2") : "00"), 
        null, new { style = "width: auto; margin-left: 5px;", @class = "hour" })
    :
    @{
        List<string> availableMinutes = new List<string>();
        for (int minute = 0; minute < 60; minute += 1)
        {
            availableMinutes.Add(minute.ToString("D2"));
        }

        @Html.DropDownList("Value.Minute", new SelectList(availableMinutes, Model.HasValue ? Model.Value.Minute.ToString("D2") : "00"), 
            null, new { style = "width: auto;", @class = "minute" });
    }
    <img alt="@Resources.SelectTime" src="../../../images/icon_clock_2.gif" style="margin-right: 5px" />
    <input type="button" value="@Resources.Clear" class="ui-state-default" onclick="javascript:clearDateTimePicker_@(ViewData.ModelMetadata.PropertyName)()" />
</div>

As you can see, what I am trying to accomplish is that the user can enter a date/time. However, as input I want to use DateTime? (nullable) because it might be possible the user doesn't want to select ANY date/time.

This EditorTemplate does not work when the input model is null. Is there any way to create an EditorTemplate that accepts null values and then can still fill the value if entered by the user?

3
  • The http post value is null when I enter a date/time and the initial model value is null as well. Mar 1, 2011 at 7:46
  • what are you posting back to Action? your editor template is @model DateTime??
    – swapneel
    Mar 6, 2011 at 0:48
  • It's a model with a DateTime? property. The property is represented like this: @Html.EditorFor(model => model.StartTime, "DateTimePicker") Mar 6, 2011 at 21:24

1 Answer 1

1

Ok, I finally nailed down the problem. My solution in words:

I use a hidden field that stores the current value in textual representation. This hidden field is always translated to the model itself (then it correctly translates to null or a value including hour and minutes). Every time an input element is changed, I update the local value which is being posted back to the server.

My solution in code:

@model DateTime?

@using Narcast.Server.Properties

<div id="dateTimePicker_@(ViewData.ModelMetadata.PropertyName)">
    <script type="text/javascript" language="javascript">
        //<![CDATA[
        $(document).ready(function () {
            var $div = $('#dateTimePicker_@(ViewData.ModelMetadata.PropertyName)');

            $div.find('.date').datepicker({ altFormat: 'dd-mm-yy' });
        });

        function clearDateTimePicker_@(ViewData.ModelMetadata.PropertyName)() {
            var $div = $('#dateTimePicker_@(ViewData.ModelMetadata.PropertyName)');

            $div.find('.date').val('');
            $div.find('.hour').val('00');
            $div.find('.minute').val('00');

            updateData_@(ViewData.ModelMetadata.PropertyName)();
        }

        function updateData_@(ViewData.ModelMetadata.PropertyName)() {
            var $div = $('#dateTimePicker_@(ViewData.ModelMetadata.PropertyName)');

            var $date = $div.find('.date').val();
            var $hour = $div.find('.hour').val();
            var $minute = $div.find('.minute').val();

            var $data = '';

            if ($date != '')
            {
                $data = $date + ' ' + $hour + ':' + $minute;
            }

            $div.find('.data').val($data);
        }
        //]]>
    </script>

    @* Hidden field holding the client data *@
    @Html.Hidden("", Model.HasValue ? Model.Value.ToShortTimeString() : string.Empty, new { @class = "data" })

    @* Date - should equal DatePicker.cshtml *@
    <input type="text" class="date" onchange="javascript:updateData_@(ViewData.ModelMetadata.PropertyName)()" />
    @*@Html.TextBox("Date", Model.HasValue ? Model.Value.Date.ToString() : string.Empty, new { @class = "date" })*@
    <img alt="@Resources.SelectDate" src="../../../images/calendar.png" class="calendarIcon" />

    @* Time - should equal TimePicker.cshtml *@
    <select class="hour" style="width: auto; margin-left: 5px;" onchange="javascript:updateData_@(ViewData.ModelMetadata.PropertyName)()">
    @{
        for (int hour = 0; hour < 24; hour += 1)
        {
            <text><option @{ if (Model.HasValue && Model.Value.Hour == hour) { <text>selected="selected"</text> }}>@(hour.ToString("D02"))</option></text>
        }        
    }
    </select>

    :

    <select class="minute" style="width: auto; margin-left: 5px;" onchange="javascript:updateData_@(ViewData.ModelMetadata.PropertyName)()">
    @{
        for (int minute = 0; minute < 60; minute += 1)
        {
            <text><option @{ if (Model.HasValue && Model.Value.Minute == minute) { <text>selected="selected"</text> }}>@(minute.ToString("D02"))</option></text>
        }        
    }
    </select>
    <img alt="@Resources.SelectTime" src="../../../images/icon_clock_2.gif" style="margin-right: 5px" />
    <input type="button" value="@Resources.Clear" class="ui-state-default" onclick="javascript:clearDateTimePicker_@(ViewData.ModelMetadata.PropertyName)()" />
</div>
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.