Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Today's Button in bsDatepicker

Can we have a Today button on the calendar so that when we click the button, reset the calendar to Today's date?

I am following this tutorial https://valor-software.com/ngx-bootstrap/#/datepicker#config-object

like image 539
user7259400 Avatar asked Feb 18 '26 04:02

user7259400


1 Answers

<div class="col-xs-12 col-12 col-md-4 form-group">

      <input type="text"
             class="form-control"
             [(ngModel)]="bsValue"
             #dp="bsDatepicker"
             bsDatepicker
             [bsValue]="bsValue"
             [bsConfig]="bsConfig"
             (ngModelChange)="emitSelectedDate()">

      <button class="btn btn-outline-secondary" (click)="dp.toggle()" type="button" [attr.aria-expanded]="dp.isOpen">

      </button>

In component

I import as import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

and below code

bsValue = new Date();
  selectedDate: any;

  bsConfig: Partial<BsDatepickerConfig> ;


  constructor() { 
    this.bsConfig = Object.assign({}, { containerClass: this.colorTheme });
    this.bsConfig = Object.assign({}, { showWeekNumbers: false }); 
    // this.bsConfig = Object.assign({}, { todayBtn: true }); 

 }

I tried to put TodayBtn as true but there is no such property. I got a nice calendar but want to have a button "Today" on the calendar which will reset the calendar to todays date.

like image 165
user7259400 Avatar answered Feb 19 '26 20:02

user7259400