• Szerző: Sallai András
• Copyright © 2025, Sallai András
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

A src/app/app.config.js fájlban:

  providers: [
    provideAnimations()
  ]

Telepítsük:

ng add ngx-bootstrap

Az src/style.css fájlban hivatkozzuk meg:

src/style.css

@import '../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css';

<div class="row justify-content-center">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           placeholder="Daterangepicker"
           class="form-control"
           bsDaterangepicker
           [(bsValue)]="dateRange"
           >
  </div>
</div>

import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
//...
  imports: [
    BsDatepickerModule
  ],
 
//...
 
dateRange : Date[] = [];

src/app/valami.component.ts

import { Component } from '@angular/core';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 
 
@Component({
  selector: 'app-valami',
  standalone: true,
  imports: [
    BsDatepickerModule
  ],
  templateUrl: './valami.component.html',
  styleUrl: './valami.component.css'
})
export class ValamiComponent {
  dateRange : Date[] = [];
 
  convert() {
    console.log(JSON.stringify(this.dateRange));
  }
}

src/app/valami/valami.html

<div class="row justify-content-center">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           placeholder="Daterangepicker"
           class="form-control"
           bsDaterangepicker
           [(bsValue)]="dateRange"
           >
  </div>
</div>
 
 
 
<button class="btn btn-primary" (click)="convert()">Convert</button>

Bővebb információ:

• https://valor-software.com/ngx-bootstrap/components/datepicker?tab=overview (2025)

Hasonló:

• https://ng-bootstrap.github.io/#/components/datepicker/overview (2025)