current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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.

share|improve this question
    
Seems that you are using jquery UI! Why don't you wrap your code in document.ready() and try again with $("#timeline").datepicker()? –  Dhaval Marthak Feb 27 at 8:45
add comment

2 Answers

up vote 0 down vote accepted

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.

share|improve this answer
    
Thanks HCJ. Its working fine for me. –  Shahid Vora Feb 27 at 8:58
    
Glad I could help :) –  HCJ Feb 27 at 8:58
add comment
up vote 1 down vote

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>";
share|improve this answer
    
Its not multiline string. Also I use like this, but still its not working. –  Shahid Vora Feb 27 at 6:49
    
Can you create a fiddle to replicate your problem? –  Felix Feb 27 at 6:51
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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