0

I want to open calendar in my Input control using the following method, but it does not open the calendar. I am creating this using string format from javascript file. (Using bootstrap css)

var dateString = "<div class='form-group'> 
<div class='controls row'>
 <div class='input-group col-sm-12 activity-due-date-group'>
  <span class='input-group-addon'><i class='icon-calendar'></i></span> 
    <input class='form-control hasDatepicker' data-val='true' datepick='datepick' id='myDate' name='myDate' placeholder='Date' type='text' value=''/>  
</div></div></div>";

$("#timeline").append(dateString);

But the above code does not working. (All the other code/string lines are working except this lines).

How to open the calendar by clicking in input control ?

Help would be appreciated. Thanks.

1
  • Seems that you are using jquery UI! Why don't you wrap your code in document.ready() and try again with $("#timeline").datepicker()? Feb 27, 2014 at 8:45

2 Answers 2

1

Try to wrap your string in " ":

var dateString = "<div class='form-group'>  <div class='controls row'> <div class='input-group col-sm-12 activity-due-date-group'> <span class='input-group-addon'><i class='icon-calendar'></i></span> <input class='form-control hasDatepicker' data-val='true' datepick='datepick' id='myDate' name='myDate' placeholder='Date' type='text' value=''/>  </div>  </div></div>";

If it's multi-line then wrap each of your line in " " and use + to concatenate each line together:

var dateString = "<div class='form-group'>" +
    "<div class='controls row'>" +
     "<div class='input-group col-sm-12 activity-due-date-group'>" +
      "<span class='input-group-addon'><i class='icon-calendar'></i></span>" +
        "<input class='form-control hasDatepicker' data-val='true' datepick='datepick' + id='myDate' name='myDate' placeholder='Date' type='text' value=''/>" + 
    "</div></div></div>";
2
  • Its not multiline string. Also I use like this, but still its not working. Feb 27, 2014 at 6:49
  • Can you create a fiddle to replicate your problem?
    – Felix
    Feb 27, 2014 at 6:51
0

Ensure you include jquery-ui in your html

Try something like

$("#timeline").append(dateString);
$("#timeline").find("#myDate").datepicker();

or

$("#myDate").datepicker();

My example http://jsfiddle.net/42N87/ works, however i have removed few attributes from your input. Hope it helps.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.