Base solution for your next web application
Open Closed

Bootstrap Timepicker is not working in Modal #566

User avatar
0
mudaser created

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">

        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label class=&quot;control-label col-md-4&quot;&gt;Without Seconds&lt;/label&gt;
            &lt;div class=&quot;col-md-5&quot;&gt;
                &lt;div class=&quot;input-group&quot;&gt;
                    &lt;input type=&quot;text&quot; class=&quot;form-control timepicker timepicker-no-seconds&quot;&gt;
                    &lt;span class=&quot;input-group-btn&quot;&gt;
                        &lt;button class=&quot;btn default&quot; type=&quot;button&quot;&gt;
                            &lt;i class=&quot;fa fa-clock-o&quot;&gt;&lt;/i&gt;
                        &lt;/button&gt;
                    &lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        

    &lt;/div&gt;
    &lt;div class=&quot;modal-footer&quot;&gt;
        &lt;button ng-disabled=&quot;vm.saving&quot; type=&quot;button&quot; class=&quot;btn btn-default&quot; ng-click=&quot;vm.cancel()&quot;&gt;@L("Cancel")&lt;/button&gt;
        &lt;button type=&quot;submit&quot; button-busy=&quot;vm.saving&quot; busy-text=&quot;@L(&quot;SavingWithThreeDot&quot;)&quot; class=&quot;btn btn-primary blue&quot; ng-click=&quot;vm.save()&quot; ng-disabled=&quot;exampleForm.$invalid&quot;&gt;&lt;i class=&quot;fa fa-save&quot;&gt;&lt;/i&gt; &lt;span&gt;@L("Save")&lt;/span&gt;&lt;/button&gt;
    &lt;/div&gt;
&lt;/form&gt;

</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');
        });
Go to accepted answer
2 Answer(s)
  • User Avatar
    0
    hikalkan created
    Support Team

    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:

                &lt;select
                id=&quot;LanguageNameSelectionCombobox&quot;
                class=&quot;form-control&quot;
                ng-options=&quot;languageName.value as languageName.displayText for languageName in vm.languageNames&quot;
                ng-model=&quot;vm.language.name&quot;

    ui-jq="selectpicker" ui-options='{ iconBase: "famfamfam-flag", tickIcon: "fa fa-check" }' ng-change="vm.languageChanged()" data-live-search="true"></select>

  • User Avatar
    0
    mudaser created

    Thankyou very much Halil,

    My problem is resolved.

Assignee
No one
Labels
None yet