Base solution for your next web application
Open Closed

How to bind NGX Bootstrap Datepicker to ngModel #5308


User avatar
0
rvanwoezik created

Hi,

I try to use NGX Bootstrap Datepicker [https://valor-software.com/ngx-bootstrap/#/datepicker]) Does anyone has an example to bind it to ngModel?

Thanx in advance!


3 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    According to it's docs, there is only usage of ngModel for date range picker. Have you tried something like this;

    Typescript component:

    import { Component } from '@angular/core';
     
    @Component({
      selector: 'demo-datepicker-date-initial-state',
      templateUrl: './date-initial-state.html'
    })
    export class DemoDatepickerDateInitialStateComponent {
      bsValue = new Date();
      
      constructor() {
        
      }
    }
    

    It's HTML:

    <input class="form-control" #dp="bsDatepicker" bsDatepicker [(ngModel)]="bsValue">
    
  • User Avatar
    0
    rvanwoezik created

    Thanks, I fixed it with

    html

    <input type="text" class="form-control" bsDatepicker [bsValue]="bsValue" [(ngModel)]="employee.dateOfBirth" />
    

    and in ts

    show(employeeId?: number): void {
            this._employeeService.getEmployeeForEdit(employeeId).subscribe(employeeResult => {
                this.employee = employeeResult.employee;
                this.jobTitles = employeeResult.jobTitles;
                this.getProfilePicture(employeeResult.profilePictureId);
                this.bsValue = moment(this.employee.dateOfBirth, 'YYYY-MM-DD').toDate();
                this.active = true;
                this.modal.show();
    
            });
    
        }
    
  • User Avatar
    0
    alper created
    Support Team

    thanks for your feedback ;)