This is a migrated thread and some comments may be shown as answers.

How to Properly Validate DatetimePicker

1 Answer 120 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Josh
Top achievements
Rank 1
Josh asked on 10 Oct 2013, 03:25 PM
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>

1 Answer, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 11 Oct 2013, 10:30 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Date/Time Pickers
Asked by
Josh
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Share this question
or