Display value in DatePicker

[Carl]

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

[Georgi Krustev]

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

 

 

[Carl]

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

[Carl]

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

[Georgi Krustev]

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

 

 

[Carl]

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