CODEWITHSUNDEEP
angularngx-bootstrap
Manish Jain
Manish Jain

Reputation: 9649

Datepicker with only Month and Day (Hide year)

I am unable to find any documented way to hide year on the ngx-bootstrap datepicker. I tried dateInputFormat: 'MMDD' but year still shows in datepicker header. Documentation link: https://valor-software.com/ngx-bootstrap/#/datepicker I would like to show something like: datepicker

Upvotes: 0

Views: 2477

Answers (2)

Mubramaj
Mubramaj

Reputation: 651

You can use a custom NgbDatepickerI18n and overwrite the method getYearNumerals to return an empty string. In fact it's this method that is used by the NgbDatePicker to render the year on the navigation header.

Here is a simple example:

@Injectable({
  providedIn: 'root'
})
class CustomDateI18n extends NgbDatepickerI18nDefault {
  getYearNumerals(year: number): string {
    return '';
  }
}
@Component({
  selector: 'app-component',
  templateUrl: './my-component.component.html',
  providers: [
    {
      provide: NgbDatepickerI18n,
      useClass: CustomDateI18n
    }
  ]
})

Upvotes: 0

Eliseo
Eliseo

Reputation: 57929

well, the thing is use encapsulation:ViewEncapsulation.None and a class like

.bs-datepicker-head button:nth-child(3){
  display:none!important;
}

The problem with ViewEncapsultaion.None is that all your .css in component affect to all the application. So, better write a .css like

.custom .bs-datepicker-head button:nth-child(3){
  display:none!important;
}

So, if we use ViewEncapsultaion.None, only affect to the datepicker that has a class "custom". To create a datePicker with class custom you need use [bsConfig].

I write the code

Our .html

<div class="content">
  <h4>datepicker should display current date:</h4>
  <div class="row">
    <div class="col-xs-12 col-12 col-md-4 form-group">
      <input type="text"
            class="form-control"
            [minDate]="minDate"
            [maxDate]="maxDate"
            #dp="bsDatepicker" [bsConfig]="bsConfig"
            bsDatepicker [(bsValue)]="myDateValue">
    </div>
  </div>
</div>

And our component

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
  myDateValue: Date;
  bsConfig: Partial<BsDatepickerConfig>;
  ngOnInit() {
    this.myDateValue = new Date();
    //see that our class was "theme-green custom"
    this.bsConfig = Object.assign({}, { containerClass: 'theme-green custom' });
  }
}

You can see in the stackblitz

Upvotes: 1

Related Questions