Display value in DatePicker

6 posts, 0 answers
  1. Carl
    Carl avatar
    4 posts
    Member since:
    Sep 2014

    Posted 11 Mar 2015 Link to this post

    I just downloaded the trial version and am attempting to create a simple data entry screen.

    Using the following Javascript

            $("#dateTo").kendoDatePicker({
                format: 'MM/dd/yyyy'
            });

    I'm trying to display it like this:

    Date From:
    <div id="dateFrom">

    </div>

    The control displays and the calendar appears when I click the button but the selected value does not appear in the textbox, nor can I edit a date directly. It seems like its read-only.

    These are the Kendo references in my Layout cshtml:

            @Scripts.Render("https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js")
            @Scripts.Render("https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js")      
            @Styles.Render("http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css")
            @Styles.Render("http://cdn.kendostatic.com/2014.3.1411/styles/kendo.blueopal.min.css")
            @Scripts.Render("http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js")

    What could be going wrong here?

    Thanks

    Carl
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 13 Mar 2015 Link to this post

    Hello Carl,

    I noticed several things:
    • The id of the element and the one used in the jQuery selector are not the same
    • The widget cannot be created from DIV element, as it is an input widget

    I would suggest you check the Overview help topic of the DatePicker, which shows how to create a datepicker from input element using JavaScript.

    Regards,
    Georgi Krustev
    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
  4. Carl
    Carl avatar
    4 posts
    Member since:
    Sep 2014

    Posted 13 Mar 2015 in reply to Georgi Krustev Link to this post

    George

    Thanks for this but I tried it this way:

        <div>
            <input id="dateFrom" class="base datefromcontrol"/>
        </div>

    and still have the same problem. Note that the JavaScript class only sets position on the page. I assume this is something simple as I'm rather new at this. What else could be causing this?

    Thanks

    Carl
  5. Carl
    Carl avatar
    4 posts
    Member since:
    Sep 2014

    Posted 13 Mar 2015 in reply to Carl Link to this post

    Also, what's really odd, is that the text portion of the date control seems to appear to the lower right of the calendar selector. I can even edit this field directly.

    Carl
  6. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 17 Mar 2015 Link to this post

    Hello Carl,

    If my assumption is correct, you are trying to initialize datepicker with "dateFrom" ID, but the jQuery selector looks for element with "dateTo" id. This code will not work, because jQuery will not be able to find the correct element.

    I would suggest you modify your code like this:
    <input id="dateFrom" />
    <script>
      $(function() {
            $("#dateFrom").kendoDatePicker({
                format: 'MM/dd/yyyy'
            });
      });
    </script>

    You can also examine our online demos that use exactly the same approach.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Carl
    Carl avatar
    4 posts
    Member since:
    Sep 2014

    Posted 17 Mar 2015 in reply to Georgi Krustev Link to this post

    I found the problem. The naming issue was a type in the message that I fixed. It tirned out that the Kendo date picker control tag cannot have a CSS position set for it like this:

            <input id="dateFrom" class="base datefromcontrol"/>

    The position property, whether relative or absolute, needs to be set in the DIV tag like this:

            <div class="base datefromcontrol">
                <input id="dateFrom"/>
            </div>

    Strange behavior results with the control when this rule is violated.

    Thanks

    Carl
Back to Top
Kendo UI is VS 2017 Ready