It is possible to transform my simply input into a input-group bootstrap like this with jquery:
To create this input i use:
<div class='input-group date' id='ff'>
<input type='text' class="form-control" name="end_date" id="ed" required placeholder="Select date"/>
<span class="input-group-addon add-on"><span class="fa fa-calendar"></span></span>
</div>
I need to transform the input cause it has been generated before and it is simply input with and id
I am assuming you have a standard input to start with like:
<input type="text" id="ed" />
You can use jQuery to manipulate the DOM like so:
var txtbox = $("#ed"); //target your input
txtbox.wrap( "<div class='input-group date' id='ff'></div>" ); //wrap it with input group
txtbox.after("<span class='input-group-addon add-on'><span class='fa fa-calendar'></span></span>"); //add spans after the input
//then specify attributes of the text field
txtbox.addClass("form-control");
txtbox.attr("name", "end_date").attr("placeholder", "Select date");
txtbox.prop("required", true);
Example in jSFiddle:
HTML:
<input type='text' class="form-control" name="end_date" id="ed" required="" placeholder="Select date" />
JavaScript:
var $input = $("#ed");
var $inputGroup=$("<div/>").addClass("input-group date").attr("id","ff");
$inputGroup.append($input.clone());
$inputGroup.append("<span class='input-group-addon add-on'><span class='fa fa-calendar'></span></span>");
$input.replaceWith($inputGroup);
But I don't like the html in javascript code, I prefer using templates like unserscore.js template. In that case code will be like the following:
HTML:
<input type='text' class="form-control" name="end_date" id="ed" required="" placeholder="Select date" />
<script type="text/template" id="inputGroupTemplate">
<div class='input-group date' id='<%=divId%>'>
<%=inputHTML%>
<span class="input-group-addon add-on"><span class="<%=iconClass%>"></span></span>
</div>
</script>
JavaScript:
var template= _.template($("#inputGroupTemplate").html());
var $input = $("#ed");
$input.replaceWith(template({divId:"ff",iconClass:"fa fa-calendar",inputHTML:$input.clone()}));
<input/>and you want to make input-group for this element with jQuery?