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:

                .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);
                } else if (endDate) {
                    start.max(new Date(endDate));
                } else {
                    endDate = new Date();

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

                if (endDate) {
                    endDate = new Date(endDate);
                } else if (startDate) {
                    end.min(new Date(startDate));
                } else {
                    endDate = new Date();

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

            var end = $("#endDates").kendoDatePicker({
                change: endChange


    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 avatar
    8406 posts

    Posted 25 Jun 2014 Link to this post

    Hello Gil,

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

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top