CODEWITHSUNDEEP
buttondatepicker
user7259400
user7259400

Reputation: 51

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

Upvotes: 3

Views: 4913

Answers (2)

vaibhav supekar
vaibhav supekar

Reputation: 9

I have fix this requirement, you can check this live example on https://stackblitz.com/edit/ngx-bootstrap-date-picker-add-custom-content

ngx-bootstrap doesn't provide any facility to add custom content in date-picker pop-up. But we can dynamically add content into it and after adding i have used RxJS fromEvent method to populate event. Once we got clicked event we can add logic our into it.

Here I have added three sample button they are Today, Reset and Close button for your reference.

Do click on Today button to get your answer.

Upvotes: 1

user7259400
user7259400

Reputation: 51

<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.

Upvotes: 1

Related Questions