Search code examples
htmlangulartypescriptbootstrap-4angular6

Angular Bootstrap Datepicker Gives us date object . I want it as Date


I want my date as "Wed Aug 07 2019 16:42:07 GMT+0530 (India Standard Time)" but I'm getting { year: 1789, month: 7, day: 14 } From ngbDatepicker Any help will be appreciated


Solution

  • You'd have to convert the object into a date...which you can do in your select method as following:

    relevant TS:

    import {Component} from '@angular/core';
    
    @Component({
      selector: 'ngbd-datepicker-popup',
      templateUrl: './datepicker-popup.html'
    })
    export class NgbdDatepickerPopup {
      model;
      convertedDate;
      select(d){
        console.log(d);
        this.convertedDate = new Date(d.year, d.month, d.day);
      }
    
    }
    

    relevant HTML:

    <div class="input-group ">
        <input id="datepicker" class="form-control col-7" [(ngModel)]="model" placeholder="" ngbDatepicker #date="ngbDatepicker" required (ngModelChange)="select(model)" pattern="[0-9]{4}[-][0-9]{2}[-][0-9]{2}">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary picto-calender" (click)="date.toggle()" type="button"></button>
        </div>
    </div>
    
    selected Date: {{convertedDate}}
    

    working stackblitz here