DatePicker changes CSS by itself with JS

2 posts, 1 answers
  1. Gil
    Gil avatar
    3 posts
    Member since:
    Jun 2014

    Posted 24 Jun 2014 Link to this post

    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.
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 25 Jun 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
Back to Top