locked
ng-bootstrap modal calendar picker is not working on Angular 6 RRS feed

  • Question

  • User956626884 posted

    Hi,

    I am writing a modal popup to edit a gridrow. I need to add a calendar picker but when the popup appears, the picker control is not there. I copied the tutorial code from 

    https://ng-bootstrap.github.io/#/components/modal/examples

    here is my code

    component.html

    <ng-template #content let-modal>
        <div class="modal-header">
          <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
          <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="dateOfBirth">Date of birth</label>
              <div class="input-group">
                <input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #dp="ngbDatepicker">
                <div class="input-group-append">
                  <button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
        </div>
      </ng-template>
      

    In my component.ts

    import { HttpClient } from '@angular/common/http';
    import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
    import { Subscription } from 'rxjs/Subscription';
    import { MeetingDateService } from '../../services/meetingdateservice.service';
    import * as $ from 'jquery';
    import 'datatables.net';
    import 'datatables.net-bs4';
    import { FormsModule, FormGroup }   from '@angular/forms';
    import { NgbModalConfig, NgbModal, ModalDismissReasons, NgbModule } from '@ng-bootstrap/ng-bootstrap';
    import {NgbDateStruct, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';
     
    @Component({
      selector: 'app-meeting-dates',
      templateUrl: './meeting-dates.component.html',
      styleUrls: ['./meeting-dates.component.scss'],
      providers: [NgbModalConfig, NgbModal]
    })
    
    
    
    export class MeetingDatesComponent implements OnInit {
      closeResult: string;
      countryForm: FormGroup;
      countries = ['USA', 'Canada', 'Uk']
      meetings: any[];
      meetingtypes: any[];
      dataTable: any;
      statusMessage: string = 'Loading data. Please wait...';
      constructor(config: NgbModalConfig, private modalService: NgbModal, private meetingDateService: MeetingDateService, private chRef: ChangeDetectorRef )  
      {
    // customize default values of modals used by this component tree
    config.backdrop = 'static';
    config.keyboard = false;
    
      }
       
       ngOnInit() {
     
      }
    
     
      openAddMeeting(content) {
        this.modalService.open(content, { centered: true });
      }
      
      
    
     
      
    }

    Here is what I see when I click on the button

    https://imgur.com/Q1Wwt9p

    but here is what it should look like

    https://imgur.com/lgZc1ID

    Any help is greatly appreciated. Thanks for any help.

    Thursday, October 25, 2018 7:26 PM

All replies

  • User61956409 posted

    Hi comicrage,

    comicrage

    I need to add a calendar picker but when the popup appears, the picker control is not there. I copied the tutorial code from 

    https://ng-bootstrap.github.io/#/components/modal/examples

    According to the link that you referenced, I do a test to show modal with Datepicker, which work fine on my side. 

    In your code, you import many modules, services and classes etc, perhaps it causes the issue. To troubleshoot the issue, I recommend that you can create a new component and only import required modules from '@ng-bootstrap/ng-bootstrap' (as example in that link did) and test if it works for you.

    With Regards, 

    Fei Han

    Friday, October 26, 2018 7:38 AM
  • User956626884 posted

    HI Fei Han,

    Thanks I got the same results as you did. However, I noticed that the datepicker icon is not show up in the UI. Any Idea?

    Thanks,

     

    Friday, October 26, 2018 1:20 PM
  • User2103319870 posted

    I noticed that the datepicker icon is not show up in the UI. Any Idea?

    By Design NgBoostrap wont assign any Icon to Button, see the response from one of the member in ng-Bootstrap team.

    You can assign any icons as per your need

    Friday, October 26, 2018 2:01 PM