CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc-3c#-4.0telerik-mvc
Findings
Findings

Reputation: 103

How to dynamically load telerik datepicker using javascript

how to load telerik datepicker dyanlically.

i am constructing a div tag with, html textbox and thought of appending telerik datepicker, can this be done, and can someone explain me the way to do it.

<div id="mainDiv"> 
str +='<div class="Subdiv" id='; 
str += data.id + ' rel="' + relData + '"><br/>Date Question<br/><label>'; 
str += data.Question + "<br/><input type='textbox' id='Date'/></br></br>"; 
str += "<input type='button' value='Submit' onclick='Submitdate(\"" + data.previousdate+"\",\"" + data.id+ "\",\"" + data.changetype+ "\")'/>"; } $('#Date').appendTo(document.body).tDatePicker(); 
str += '</label></div>'; $('#mainDiv').append(str);

i am getting an error $('#Date').appendTo(document.body).tDatePicker(); is not a function.

Upvotes: 1

Views: 2206

Answers (2)

Hasan Salameh
Hasan Salameh

Reputation: 326

use:

var datePicker = $("<input>", { id: "Date", value: "1/1/2013"})
                                                      .appendTo(document.body);
datePicker.tDatePicker();

That should work!

Upvotes: 2

Igorrious
Igorrious

Reputation: 1618

Try this:

Register datepicker client side library:

$(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Add("telerik.common.js").Add("telerik.datepicker.js")))

Create an input element on your form:

<input id="DatePickerInput" />

Then add the following javascript somewhere on the page:

$('#DatePickerInput').appendTo(document.body);
$('#DatePickerInput').tDatePicker();

or 

$('#DatePickerInput').appendTo(document.body).tDatePicker();

To set a date value:

$('#DatePickerInput').val('5/29/2012');   //Date format may vary, you'll need to adjust it!

Good luck!

Upvotes: 3

Related Questions