How to Properly Validate DatetimePicker

2 posts, 0 answers
  1. Josh
    Josh avatar
    7 posts
    Member since:
    Jun 2013

    Posted 10 Oct 2013 Link to this post

    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.


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

    <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)" />
            <br />
            <span class="k-invalid-msg" data-for="sleepdelaydatetimepicker"></span>
            <br />
            <input type="submit" class="k-button" value="Save" />
  2. Alexander Popov
    Alexander Popov avatar
    1436 posts

    Posted 11 Oct 2013 Link to this post

    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.

    Alexander Popov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top