tessl/npm-ng-bootstrap--ng-bootstrap

Angular powered Bootstrap UI component library with comprehensive Bootstrap 5 components for Angular applications

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Datepicker Components

Name: tessl/npm-ng-bootstrap--ng-bootstrap
Author: tessl

Comprehensive date selection components with multiple calendar systems, internationalization support, and flexible input integration. Supports various calendar types including Gregorian, Islamic, Hebrew, Persian, Buddhist, and Ethiopian calendars.

Core Imports

import { 
  NgbDatepickerModule, 
  NgbDate, 
  NgbCalendar,
  NgbDateAdapter,
  NgbDatepickerI18n 
} from '@ng-bootstrap/ng-bootstrap';

Capabilities

NgbDatepicker

Main datepicker component for inline date selection.

@Component({
  selector: 'ngb-datepicker',
  exportAs: 'ngbDatepicker'
})
class NgbDatepicker implements ControlValueAccessor {
  /** Template for custom day rendering */
  @Input() dayTemplate: TemplateRef<DayTemplateContext>;
  
  /** Number of months to display */
  @Input() displayMonths: number;
  
  /** First day of the week (1=Monday, 7=Sunday) */
  @Input() firstDayOfWeek: number;
  
  /** Footer template */
  @Input() footerTemplate: TemplateRef<any>;
  
  /** Function to mark dates as disabled */
  @Input() markDisabled: (date: NgbDate) => boolean;
  
  /** Maximum selectable date */
  @Input() maxDate: NgbDate;
  
  /** Minimum selectable date */
  @Input() minDate: NgbDate;
  
  /** Navigation style (select | arrows | none) */
  @Input() navigation: 'select' | 'arrows' | 'none';
  
  /** How to display days outside current month */
  @Input() outsideDays: 'visible' | 'collapsed' | 'hidden';
  
  /** If true, show week numbers */
  @Input() showWeekNumbers: boolean;
  
  /** Initial month to display */
  @Input() startDate: NgbDate;
  
  /** Event emitted when user navigates to a different month */
  @Output() navigate: EventEmitter<NgbDatepickerNavigateEvent>;
  
  /** Event emitted when a date is selected */
  @Output() select: EventEmitter<NgbDate>;
  
  /** Navigate to a specific date */
  navigateTo(date?: NgbDate): void;
}

NgbInputDatepicker

Directive for integrating datepicker with input elements.

@Directive({
  selector: 'input[ngbDatepicker]',
  exportAs: 'ngbInputDatepicker'
})
class NgbInputDatepicker implements ControlValueAccessor {
  /** If true, datepicker popup will be closed automatically after date selection */
  @Input() autoClose: boolean | 'inside' | 'outside';
  
  /** Reference to the datepicker popup */
  @Input() ngbDatepicker: NgbDatepicker;
  
  /** Placement of the datepicker popup */
  @Input() placement: Placement;
  
  /** Event emitted when datepicker is closed */
  @Output() closed: EventEmitter<void>;
  
  /** Event emitted when a date is selected */
  @Output() dateSelect: EventEmitter<NgbDate>;
  
  /** Open the datepicker popup */
  open(): void;
  
  /** Close the datepicker popup */
  close(): void;
  
  /** Toggle the datepicker popup */
  toggle(): void;
  
  /** Check if the datepicker popup is open */
  isOpen(): boolean;
}

NgbDate

Immutable date object representing a specific date.

class NgbDate {
  /** Year */
  readonly year: number;
  
  /** Month (1-12) */
  readonly month: number;
  
  /** Day of month (1-31) */
  readonly day: number;
  
  constructor(year: number, month: number, day: number);
  
  /** Check if this date equals another date */
  equals(other: NgbDate): boolean;
  
  /** Check if this date is before another date */
  before(other: NgbDate): boolean;
  
  /** Check if this date is after another date */
  after(other: NgbDate): boolean;
  
  /** Convert to string representation */
  toString(): string;
  
  /** Create a new NgbDate from this one */
  static from(date: NgbDateStruct): NgbDate;
}

Calendar Services

Abstract calendar service and implementations for different calendar systems.

@Injectable({ providedIn: 'root' })
abstract class NgbCalendar {
  /** Get today's date */
  abstract getToday(): NgbDate;
  
  /** Get next date */
  abstract getNext(date: NgbDate, period?: NgbPeriod, number?: number): NgbDate;
  
  /** Get previous date */
  abstract getPrev(date: NgbDate, period?: NgbPeriod, number?: number): NgbDate;
  
  /** Get number of weeks in a month */
  abstract getWeeksPerMonth(): number;
  
  /** Get weekdays */
  abstract getWeekdays(): readonly number[];
  
  /** Get months */
  abstract getMonths(year?: number): readonly number[];
  
  /** Check if date is valid */
  abstract isValid(date: NgbDateStruct): boolean;
}

@Injectable()
class NgbCalendarGregorian extends NgbCalendar {}

@Injectable()
class NgbCalendarIslamicCivil extends NgbCalendar {}

@Injectable()
class NgbCalendarIslamicUmalqura extends NgbCalendar {}

@Injectable()
class NgbCalendarPersian extends NgbCalendar {}

@Injectable()
class NgbCalendarHebrew extends NgbCalendar {}

@Injectable()
class NgbCalendarBuddhist extends NgbCalendar {}

@Injectable()
class NgbCalendarEthiopian extends NgbCalendar {}

Date Adapters

Services for converting between NgbDate and other date formats.

@Injectable({ providedIn: 'root' })
abstract class NgbDateAdapter<T> {
  /** Convert from model format to NgbDate */
  abstract fromModel(value: T): NgbDate;
  
  /** Convert from NgbDate to model format */
  abstract toModel(date: NgbDate): T;
}

@Injectable()
class NgbDateStructAdapter extends NgbDateAdapter<NgbDateStruct> {}

@Injectable()
class NgbDateNativeAdapter extends NgbDateAdapter<Date> {}

@Injectable()
class NgbDateNativeUTCAdapter extends NgbDateAdapter<Date> {}

Internationalization

@Injectable({ providedIn: 'root' })
abstract class NgbDatepickerI18n {
  /** Get weekday short names */
  abstract getWeekdayShortName(weekday: number): string;
  
  /** Get month short names */
  abstract getMonthShortName(month: number, year?: number): string;
  
  /** Get month full names */
  abstract getMonthFullName(month: number, year?: number): string;
  
  /** Get day ARIA label */
  abstract getDayAriaLabel(date: NgbDate): string;
}

@Injectable()
class NgbDatepickerI18nDefault extends NgbDatepickerI18n {}

@Injectable()
class NgbDatepickerI18nHebrew extends NgbDatepickerI18n {}

@Injectable()
class NgbDatepickerI18nAmharic extends NgbDatepickerI18n {}

Configuration Services

@Injectable({ providedIn: 'root' })
class NgbDatepickerConfig {
  dayTemplate: TemplateRef<DayTemplateContext>;
  dayTemplateData: (date: NgbDate, current: {year: number, month: number}) => any;
  displayMonths: number;
  firstDayOfWeek: number;
  footerTemplate: TemplateRef<any>;
  markDisabled: (date: NgbDate) => boolean;
  maxDate: NgbDate;
  minDate: NgbDate;
  navigation: 'select' | 'arrows' | 'none';
  outsideDays: 'visible' | 'collapsed' | 'hidden';
  showWeekNumbers: boolean;
  startDate: NgbDate;
}

@Injectable({ providedIn: 'root' })
class NgbInputDatepickerConfig {
  autoClose: boolean | 'inside' | 'outside';
  container: string;
  positionTarget: string;
  placement: PlacementArray;
}

Type Definitions

interface NgbDateStruct {
  year: number;
  month: number;
  day: number;
}

interface NgbDatepickerNavigateEvent {
  current: {year: number, month: number};
  next: {year: number, month: number};
  preventDefault: () => void;
}

interface DayTemplateContext {
  $implicit: NgbDate;
  date: NgbDate;
  currentMonth: number;
  disabled: boolean;
  focused: boolean;
  selected: boolean;
  today: boolean;
}

type NgbPeriod = 'y' | 'm' | 'd';

Usage Examples

Basic Datepicker

@Component({
  template: `
    <ngb-datepicker 
      [(ngModel)]="selectedDate"
      (select)="onDateSelect($event)">
    </ngb-datepicker>
    
    <p *ngIf="selectedDate">Selected: {{ selectedDate | json }}</p>
  `
})
export class BasicDatepickerComponent {
  selectedDate: NgbDate;
  
  constructor(private calendar: NgbCalendar) {
    this.selectedDate = calendar.getToday();
  }
  
  onDateSelect(date: NgbDate) {
    console.log('Date selected:', date);
  }
}

Input Datepicker

@Component({
  template: `
    <div class="input-group">
      <input 
        class="form-control" 
        placeholder="yyyy-mm-dd"
        name="dp" 
        [(ngModel)]="selectedDate"
        ngbDatepicker 
        #d="ngbDatepicker"
        readonly>
      <button 
        class="btn btn-outline-secondary bi bi-calendar3" 
        type="button" 
        (click)="d.toggle()">
      </button>
    </div>
  `
})
export class InputDatepickerComponent {
  selectedDate: NgbDate;
}

Custom Day Template

@Component({
  template: `
    <ngb-datepicker 
      [(ngModel)]="selectedDate"
      [dayTemplate]="customDay">
    </ngb-datepicker>
    
    <ng-template #customDay let-date="date" let-disabled="disabled">
      <span class="custom-day" [class.weekend]="isWeekend(date)">
        {{ date.day }}
      </span>
    </ng-template>
  `
})
export class CustomDayTemplateComponent {
  selectedDate: NgbDate;
  
  constructor(private calendar: NgbCalendar) {}
  
  isWeekend(date: NgbDate): boolean {
    const dayOfWeek = this.calendar.getWeekday(date);
    return dayOfWeek === 6 || dayOfWeek === 7; // Saturday or Sunday
  }
}