CODEWITHSUNDEEP
angularangular6ngb-datepickerangular-template-form
Denuka
Denuka

Reputation: 1242

ngbDatepicker set value

In my Angular application, template driven form, I have a date of birth field and added ngbDatepicker for that field as given.

<input #dob="ngbDatepicker"
                 (click)="dob.toggle()"
                 [(ngModel)]="model.dob"
                 [ngClass]="{ 'is-invalid': f.submitted &&  dob.invalid }"
                 class="form-control"
                 id="dob"
                 name="dob"
                 required
                 type="text"
                 [disabled]="isDisabled"
                 [class.ash]="isDisabled"
                 [class.highlight]="!isDisabled"
                 ngbDatepicker
          />

I'm getting date of birth form back-end API as dob: "2019-02-16 00:00:00" and I want to pass that value like bellow, 

 { 
  "year": 2019, 
  "month": 2, 
  "day": 26 
 }

because ngbDatepicker get value in that format. This is what I tried to convert my date of birth. 

toDate(dob) {
 const [year, month, day] = dob.split('-');
 const obj = { year: year, month: month, day: day.split(' ')[0].trim() };
 console.log('convert date', obj);
 this.model.dob = obj;
 //  this.model.dob ={year: 2017, month: 5, day: 13};
}

The output is {year: "2019", month: "02", day: "16"} , I want to remove quotation marks from this output. I've tried so many methods and unable to get the needed output. I could get {"year": 2019, "month": 02, "day": 16} this output using bellow code. 

JSON.stringify({ "year": "2019", "month": "2", "day": "26" }, (key, value) => !isNaN(+value) ? +value : value);

But to set the date I need to set object like this. {year: 2019, month: 2, day: 26 }

Upvotes: 4

Views: 20053

Answers (6)

viresh khandelwal
viresh khandelwal

Reputation: 1

This way worked for me :

in ts file :

const date: NgbDateStruct = { year: 1789, month: 7, day: 14 };

in html :

<input type="text" ngbDatepicker [(ngModel)]="date"/>

Upvotes: 0

Abhi
Abhi

Reputation: 3611

For those who are seeking a full implementation of this (with passing minimum date, maximum date and set the value to the date picker) :

NgbDatePicker Url: https://ng-bootstrap.github.io/#/components/datepicker/overview

In your controller component datepicker.component.ts file add the following:

import { NgbDate } from "@ng-bootstrap/ng-bootstrap";
import { NgbDateHelper } from 'src/app/helpers/ngb-date-helper';

Add to the constructor section

constructor(
    private ngbDateHelper: NgbDateHelper
) { }

In the datepicker.component.html view file add

<input
  class="form-control"
  placeholder="yyyy-mm-dd"
  formControlName="dateFieldName"
  ngbDatepicker
  #date="ngbDatepicker"
  [minDate]="minDate"
  [maxDate]="maxDate"
  [(ngModel)]="value"
/>

To get the minDate, maxDate, value - let's write the helper

Create a file src/app/helpers/ngb-date-helper.ts

Add the following contents:

import { Injectable } from '@angular/core';
import { NgbDate } from "@ng-bootstrap/ng-bootstrap";

@Injectable()
export class NgbDateHelper {
  // helper to find out today's year, month, day
  private currentDate() {
    var todayDate = new Date();

    return {
      year: todayDate.getFullYear(),
      month: todayDate.getMonth() + 1,
      day: todayDate.getDate()
    }
  }

  // helper to find out date value, min and max date
  dateMetaData() {
    var minDate = this.currentDate()
    var maxDate = this.currentDate()
    maxDate.year = maxDate.year + 1
    
    var value = new NgbDate(this.currentDate().year,
                            this.currentDate().month + 2,
                            this.currentDate().day)

    return {
      value: value,
      minDate: minDate,
      maxDate: maxDate
    }
  }
}

call the dates like this:

value = this.ngbDateHelper.dateMetaData().value,
minDate = this.ngbDateHelper.dateMetaData().minDate,
maxDate = this.ngbDateHelper.dateMetaData().maxDate

In this example the calendar shows the dates from today's date to 1 year date. The pre-populated value is 2 months from today's date. You are free to change this according to your requirement.

Upvotes: 1

CAK2
CAK2

Reputation: 1990

You can get your NgbDatePicker input to read/write Javascript dates from/to [(ngModel)]="model.dob" in Angular 9 by adding the following import statement:

import { NgbDate, NgbDateStruct, NgbDateAdapter, NgbDateNativeAdapter } from '@ng-bootstrap/ng-bootstrap';

and declaring the NgbDateAdapter provider in your @Component statement:

providers: [
    { provide: NgbDateAdapter, useClass: NgbDateNativeAdapter }]

Upvotes: 0

Malavan
Malavan

Reputation: 819

I solved my problem by doing this.

Create NgbDate instance by,

date = new NgbDate(2020,19,02);

make this date as ngModel;

Upvotes: 10

Raviteja V
Raviteja V

Reputation: 463

<ngb-datepicker #d [startDate]="{year: 1789, month: 7}"></ngb-datepicker>

You can write like this .

[startDate]="{year: From API dob.getYear(), month: From API dob.getMonth()}"

Upvotes: 0

Denuka
Denuka

Reputation: 1242

I could resolve my problem using 'parseInt'.Use this link to know more about parseInt. I changed my code as given bellow.

toDate(dob) {
if (dob) {
  const [year, month, day] = dob.split('-');
  const obj = { year: parseInt(year), month: parseInt(month), day: 
    parseInt(day.split(' ')[0].trim()) };
  this.model.dob = obj;
  }
}

Upvotes: 3

Related Questions