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

DatePicker changes CSS by itself with JS

1 Answer 205 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Gil
Top achievements
Rank 1
Gil asked on 24 Jun 2014, 01:00 PM
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.

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 25 Jun 2014, 08:43 AM
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
 
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
Gil
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or