How to Properly Validate DatetimePicker

[Josh]

Please see attached code. I noticed that when the date portion was invalid I got the standard "date is not valid".  However if only the time portion was invalid, the form would validate.  So I added the custom rules scripting.  That seemed to do the trick.  However, now if the time is wrong, the message shows above the datetimepicker.  If the date is wrong, it shows below the datetimepicker.  If both are wrong it shows both messages duplicated.  I must be doing something wrong.  I've spend hours on this so I thought I'd ask.  thank you.

<script>

    $("#theform").kendoValidator({
        rules: {
            date: function (input) {
                if (!kendo.parseDate(input.val()))
                    return false;
                else return true;
            }
        },
        messages: {
            date: "Please enter a valid date/time."
        }
    });


</script>
<div id="sleepdelayform" class="centerform">
    <label>Select a date and time for when you'd like this task to be available:</label>

    <br /><br />
    @using (Ajax.BeginForm("SleepDelaySave", "Home", new AjaxOptions
    {
        UpdateTargetId = "sleepdelayform"
    }, new { id = "theform"}))
    {
        <input type="hidden" id="serialNumber" name="serialNumber" value="@(ViewBag.serialNumber)" />
        @(Html.Kendo().DateTimePicker()
            .Name("sleepdelaydatetimepicker")
            .Value(DateTime.Now)
        )  
        
        <br />
        <span class="k-invalid-msg" data-for="sleepdelaydatetimepicker"></span>
        <br />
        <input type="submit" class="k-button" value="Save" />
    }
</div>

[Alexander Popov]

Hi Joshn,

I would recommend using the validation rule to check if the DateTimePicker widget value is null. In case it is null then either the date or the time is invalid and you should raise an error.
For convenience I prepared this small example, I hope it helps.

Regards,
Alexander Popov
Telerik