Wednesday 11 May 2016

validation on kendo date picker

 <div class="col-md-6 col-sm-6 col-xs-12">
            <div class="form-group">
                @Html.LabelFor(model => model.StartDate, htmlAttributes: new { @class = "" })
                <div class="col-md-12 zero-padding-left">
                    <div class="col-md-6 zero-padding-left">
                        @Html.EditorFor(model => model.StartDate, new { htmlAttributes = new { @class = "form-control" } })
 @Html.ValidationMessageFor(model => model.StartDate, "", new { @class = "text-danger", @id = "StartDateMessage" })
                    </div>
                    <div class="col-md-6">
                        @Html.EditorFor(model => model.StartTime, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.StartTime, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
            </div>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <div class="form-group">

                @Html.LabelFor(model => model.EndDate, htmlAttributes: new { @class = "" })

                <div class="col-md-12 zero-padding-left">
                    <div class="col-md-6 zero-padding-left">
                        @Html.EditorFor(model => model.EndDate, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.EndDate, "", new { @class = "text-danger", @id = "EndDateMessage" })
                    </div>
                    <div class="col-md-6">
                        @Html.EditorFor(model => model.EndTime, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.EndTime, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>

            </div>


<script type="text/javascript">
    $(function () {
 $('#StartTime').kendoTimePicker({ format: "h:mm tt" });
        $('#EndTime').kendoTimePicker({ format: "h:mm tt" });
        function startChange() {
            var fromDate = start.value(),
            toDate = end.value();

            if (fromDate) {
                fromDate = new Date(fromDate);
                fromDate.setDate(fromDate.getDate());
                end.min(fromDate);
                $("#EndDate").data("kendoDatePicker").value(fromDate);

            } else if (toDate) {
                start.max(new Date(toDate));
            } else {
                toDate = new Date();
                start.max(toDate);
                end.min(toDate);
            }
        }

        function endChange() {
            var toDate = end.value(),
            fromDate = start.value();

            if (toDate) {
                toDate = new Date(toDate);
                toDate.setDate(toDate.getDate());
                start.max(toDate);
            } else if (fromDate) {
                end.min(new Date(fromDate));
            } else {
                toDate = new Date();
                start.max(toDate);
                end.min(toDate);
            }
        }

        var start = $("#StartDate").kendoDatePicker({
            change: startChange,
            min: new Date(),
        }).data("kendoDatePicker");


        var todayDate = kendo.toString(kendo.parseDate(new Date()), 'MM/dd/yyyy');
        $("#StartDate").data("kendoDatePicker");

        var end = $("#EndDate").kendoDatePicker({
            change: endChange
        }).data("kendoDatePicker");
        start.max(end.value());
        end.min(start.value());
        $("#EndDate").data("kendoDatePicker");

});
</script>




No comments:

Post a Comment