[[oktatas:web:angular|< Angular]]

====== Angular dátum ======

  * **Szerző:** Sallai András
  * Copyright (c) 2025, Sallai András
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Szükséges modulok =====

Telepítsük:
  ng add ngx-bootstrap

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

<code javascript>

import { provideAnimations } from '@angular/platform-browser/animations';

//...

  providers: [
    provideAnimations()
  ]
</code>




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

<code css src/style.css>
@import '../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css';
</code>

===== Dátumválasztás =====

Egyetlen dátum választáshoz nincs szükség erre a modulra, a HTML5 tudja:

<code html>
<input type="date"
    placeholder="Dátumválasztó"
    class="form-control"
>
</code>

Ha mégis ezzel a modullal szeretnénk megoldani:

<code html>
<input type="text"
    placeholder="Dátumválasztó"
    class="form-control"
    bsDatepicker
    [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }"
>
</code>


===== Dátum tartomány választása =====

<code 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="Dátumtartomány-választó"
           class="form-control"
           bsDaterangepicker
           [(bsValue)]="dateRange"
           >
  </div>
</div>
</code>

<code javascript>
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
//...
  imports: [
    BsDatepickerModule
  ],

//...

dateRange : Date[] = [];
</code>

==== Teljes kód ====

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

</code>

<code html 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="Dátumtartomány-választó"
           class="form-control"
           bsDaterangepicker
           [(bsValue)]="dateRange"
           >
  </div>
</div>



<button class="btn btn-primary" (click)="convert()">Convert</button>
</code>

===== Dátum formátum =====

<code>
[bsConfig]="{ rangeInputFormat: 'YYYY-MM-DD' }"
</code>

A teljes input elem:

<code html>
<input type="text"
   placeholder="Dátumtartomány-választó"
   class="form-control"
   bsDaterangepicker
   [(bsValue)]="dateRange"
   [bsConfig]="{ rangeInputFormat: 'YYYY-MM-DD' }"
>
</code>


===== 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)