Salam,
Bootstrap Timepicker is not working in Modal.
My Modal html is
<div> <form name="exampleForm" role="form" novalidate class="form-validation "> <div class="modal-header"> <h4 class="modal-title"> New Appointment </h4> </div> <div class="modal-body">
<div class="form-group">
<label class="control-label col-md-4">Without Seconds</label>
<div class="col-md-5">
<div class="input-group">
<input type="text" class="form-control timepicker timepicker-no-seconds">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-clock-o"></i>
</button>
</span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button ng-disabled="vm.saving" type="button" class="btn btn-default" ng-click="vm.cancel()">@L("Cancel")</button>
<button type="submit" button-busy="vm.saving" busy-text="@L("SavingWithThreeDot")" class="btn btn-primary blue" ng-click="vm.save()" ng-disabled="exampleForm.$invalid"><i class="fa fa-save"></i> <span>@L("Save")</span></button>
</div>
</form>
</div>
============================ Here is js for that
if (jQuery().timepicker) {
$('.timepicker-no-seconds').timepicker({
template: 'modal'
});
$('.timepicker').parent('.input-group').on('click', '.input-group-btn', function(e){
e.preventDefault();
$(this).parent('.input-group').find('.timepicker').timepicker('showWidget');
});
2 Answer(s)
-
0
Hi,
Where are you executing your javascript code (it should be probably Controller js code of the modal). As you may know Angular does not works well with jQuery code. You should follow some principles to make it work properly. Your code may not work because $('.timepicker-no-seconds') can not find the input element since the View (HTML) is not initialized when js code is executed. There are some methods to make it work. Simple one is to use ui-jq directive.
For example, I used it for selectpicker before like that:
<select id="LanguageNameSelectionCombobox" class="form-control" ng-options="languageName.value as languageName.displayText for languageName in vm.languageNames" ng-model="vm.language.name"ui-jq="selectpicker" ui-options='{ iconBase: "famfamfam-flag", tickIcon: "fa fa-check" }' ng-change="vm.languageChanged()" data-live-search="true"></select>
-
0
Thankyou very much Halil,
My problem is resolved.
