DatePicker changes CSS by itself with JS

[Gil]

I've been trying to do some validation with my DatePicker through JS but I noticed one major issue.  Whenever I add javascript it overrides the settings in my htmlattributes setup.  The following is the wrapper I am using for my DatePicker:

 @(Html.Kendo().DatePicker()
            .Name("startDates")
            .Max(DateTime.Now)
            .Format("MM/dd/yyyy")
            .HtmlAttributes(new { style="width: 200px;" , required="true"})
            )


Below is the JavaScript I am using for some validation:

​<script type="text/javascript">
    $(document).ready(function () {
        function startChange() {
            var startDate = start.value(),
                        endDate = end.value();

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

        function endChange() {
            var endDate = end.value(),
                        startDate = start.value();

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

        var start = $("#startDates").kendoDatePicker({
            change: startChange
        }).data("kendoDatePicker");

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


</script>


Anytime I use that script (which doesn't have any attributes that would change any css) the length of the datepicker changes from the ones set in the htmlattributes.  I've tried moving the script from the top of the page to the bottom and to no avail.

[Dimo]

Hello Gil,

The Javascript creates a duplicate instance of the DatePicker, which is incorrect.

http://docs.telerik.com/kendo-ui/getting-started/widgets#example---initialize-a-kendo-ui-widget

http://docs.telerik.com/kendo-ui/getting-started/widgets#getting-reference-to-a-kendo-ui-widget

Regards,
Dimo
Telerik