twitter bootstrap - Jquery daterangepicker bugged inside modal -
i'm creating daterangepicker when bootstrap modal visible following code:
var $ruleinput = $("#rulesvalueadd"); $ruleinput .attr("placeholder", "dd/mm/aaaa - dd/mm/aaaa") .daterangepicker({ format: "dd/mm/yyyy" } ); the image of picker here: 
doesn't work well. when click on both inputs of daterangepicker start , end date can defined, cancel or apply buttons, picker automatically closes.
i found kind of solution @ least applies dates defined calendar doing function:
var $ruleinput = $("#rulesvalueadd"); $ruleinput .attr("placeholder", "dd/mm/aaaa - dd/mm/aaaa") .daterangepicker({ format: "dd/mm/yyyy" }, function (start, end, label) { $ruleinput.val(start.format('dd/mm/yyyy') + " - " + end.format('dd/mm/yyyy')); } ); but sounds half of problem only. that, inputs date can defined still have same problem , if click cancel button same apply button does.
edit: 27/07
this modal have on page:
<div class="modal fade" id="searchmodal" tabindex="-1" role="dialog" aria-labelledby="searchmodal-label"> <div class="modal-dialog" role="document"> <div class="modal-content"> <form id="createsegmentform" type="post"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="mymodal-label">criar nova pesquisa</h4> </div> <div class="modal-body"> <div id="ruleslist"> </div> <div id="rulesadd"> <label>campo</label> <div class="form-group"> <select class="form-control chosen-select-box" id="fieldstypeselect" data-parsley-required data-parsley-required-message="@string.format(resources.resourcesvalidation.fieldrequired, "campo")" data-parsley-errors-container="#fieldtypeerrormessage"></select> <div id="fieldtypeerrormessage"></div> </div> <label>regra</label> <div class="form-group"> <select class="form-control chosen-select" id="operatorsselect" data-parsley-required data-parsley-required-message="@string.format(resources.resourcesvalidation.fieldrequired, "regra")" data-parsley-errors-container="#operatorerrormessage"></select> <div id="operatorerrormessage"></div> </div> <div class="form-group"> <label>valor</label> <input class="form-control" id="rulesvalueadd" /> </div> <div class="form-group"> <button type="button" id="addnewrule" class="btn btn-primary float-right">adicionar condição</button> <div class="clear"></div> </div> </div> </div> <div class="modal-footer"> <div class="form-group"> <input class="form-control text-box single-line hidden" name="segmentname" id="newsegmentcontactname" placeholder="nome segmento" data-parsley-required data-parsley-required-message="@string.format(resources.resourcesvalidation.fieldrequired, "nome segmento")" /> </div> <div class="form-group"> <button type="button" id="newsegmentcontactssave" class="btn btn-primary hidden">@(resources.resourcesgeneral.save)</button> <button type="button" id="newsegmentcontactsshow" class="btn btn-primary">@(resources.resourcesgeneral.save)</button> <button type="button" id="newsearchcontacts" class="btn btn-primary">@(resources.resourcesgeneral.search)</button> <button type="button" class="btn btn-default" data-dismiss="modal">@(resources.resourcesgeneral.close)</button> </div> </div> </form> </div> </div> </div> it happens after messing argument "parentel" of daterangepicker can fix things while breaking others, i'll explain in more detail:
when put parentel: "#searchmodal" left side have buttons apply, cancel , inputs of dates works, if click calendar nothing , closes picker
if parentel: "#searchmodal .modal-body" same @ gets worse buttons go below.
anyone knows fix? thanks.
Comments
Post a Comment