< Angular

Angular dátum

Szerző: Sallai András

Copyright © 2025, Sallai András

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Szükséges modulok

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:

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

Dátum tartomány választása

<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[] = [];

Teljes kód

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)); } }
<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>

Lásd még

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)