CODEWITHSUNDEEP
angular
user54226
user54226

Reputation: 107

ngx datepicker: set initial year value from previous years

I'm using ngx datepicker in Angular 8, I want to set the year (calendar) 18 years back from today. I'm using the example from here https://stackblitz.com/edit/angular-ripj4g?file=app/ngx-bootstrap-demo.component.ts

This example setting minDate and maxDate, how can I set the initial date/year i.e. as year 2002 will be shown when dropdown open.

Upvotes: 0

Views: 1352

Answers (2)

kushal shah
kushal shah

Reputation: 863

I have made changes according to documentations

https://valor-software.com/ngx-bootstrap/#/datepicker

change in your html like 

<div class="row">
    <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
        <input class="form-control"
           placeholder="Datepicker"
           bsDatepicker
           [bsValue]="bsValue"
           [minDate]="minDate"
           [maxDate]="maxDate">
  </div>
</div>

and in your ts file

import { Component } from "@angular/core";
@Component({
  selector: "demo-datepicker-min-max",
  templateUrl: "./min-max.component.html"
})
export class DemoDatepickerMinMaxComponent {
  minDate: Date;
  maxDate: Date;
  bsValue = new Date();
  constructor() {
    this.minDate = new Date();
    this.maxDate = new Date();
    this.minDate.setFullYear(this.minDate.getFullYear() - 18);
    console.log(this.minDate);
    this.maxDate.setDate(this.maxDate.getDate() + 7);
    this.bsValue = new Date(
      new Date().setFullYear(new Date().getFullYear() - 18)
    );
  }
}

Here is the output enter image description here hope this will help you

thanks

Upvotes: 0

Santosh Shinde
Santosh Shinde

Reputation: 1212

Try like this

component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'demo-datepicker-min-max',
  templateUrl: './min-max.component.html'
})
export class DemoDatepickerMinMaxComponent {
  minDate: Date;
  maxDate: Date;
  currentData: Date;

  constructor() {
     this.minDate = new Date();
     this.maxDate = new Date();
     this.currentData = new Date();
     this.currentData.setFullYear(this.minDate.getFullYear() -3);
     this.minDate.setFullYear(this.minDate.getFullYear() -3);
     console.log(this.minDate);
     this.maxDate.setDate(this.maxDate.getDate() + 7);
  }
}

component.html

<div class="row">
  <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
    <input class="form-control"
           placeholder="Datepicker"
           [(ngModel)]="currentData"
           bsDatepicker
           [minDate]="minDate"
           [maxDate]="maxDate">
  </div>
</div>

Upvotes: 0

Related Questions