Custom Datepicker 😱

Available both as a calendar and a dropdown

Different Selections

Custom months

<ngb-datepicker #dp navigation="none">
<ngb-datepicker #dp navigation="none">
<ng-template ngbDatepickerContent>
<div *ngFor="let month of dp.state.months">
<div>
This is custom datepicker
</div>
<ngb-datepicker-month [month]="month"></ngb-datepicker-month>
<div>Here is a footer<div>
</div>
</ng-template>
</ngb-datepicker>

Change week name labels

import {NgbDatepickerI18n, NgbDateStruct, NgbDatepicker} from '@ng-bootstrap/ng-bootstrap';const I18N_VALUES = {
'en': {// Provide labels in multiple languages
weekdays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'], // Use whatever values you want in any language
months: ['January', 'February', 'March',
'April', 'May', 'June',
'July', 'August', 'September',
'October', 'November', 'December']// // Use whatever values you want in any language
}
};
@Injectable()
export class I18n {
language = 'en';
}
@Injectable()
export class CustomDatepickerI18n extends NgbDatepickerI18n {
constructor(private _i18n: I18n) {
super();
}
getWeekdayShortName(weekday: number): string {
return I18N_VALUES[this._i18n.language].weekdays[weekday - 1];
}
getMonthShortName(month: number): string {
return I18N_VALUES[this._i18n.language].months[month - 1];
}
getMonthFullName(month: number): string {
return this.getMonthShortName(month);
}
getDayAriaLabel(date: NgbDateStruct): string {
return `${date.day}-${date.month}-${date.year}`;
}
}
@Component({
selector: 'app-calendar',
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.scss'],
providers: [[I18n, {provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n}]]
})
export class DetailsCalendarComponent{
constructor(public i18n: NgbDatepickerI18n) { }
}

Give custom days template

<ngb-datepicker #dp [dayTemplate]="customDay"></ngb-datepicker><ng-template #customDay let-date let-currentMonth="currentMonth" let-selected="selected" let-disabled="disabled" let-focused="focused">
<div [class.selected-date]="selected">
{{ date.day }}
</div>
</ng-template>

--

--

--

Front End Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

JavaScript DataTypes

How to avoid this React Hooks performance pitfall

Create a custom theme for Keycloak

How to build a web app with GraphQL, Apollo & React (Part I)

My Choice of Global State management for React in 2022

S2-1 Learning Through Reflection

Micro Frontends: Monoliths will hate you for this architecture

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ajit Singh

Ajit Singh

Front End Developer

More from Medium

Taking local storage values from one HTML and retrieving it on another!

code snippet fetching our data from the response from API. Gives us carbon emissions and flight distance based on airport input

4 Most Common Ways to Send AJAX Requests

Getting started with single-spa

CSS Trick: Keep items of a card container at the bottom