ng-bootstrap

DateTime Picker

bs-datetime-picker couples a calendar popup and a time-slot popup behind a single display input. The selected value is exposed via the [(value)] two-way binding (or any reactive-forms control), and options such as [min], [max], [disableDateFn], [step], and [hour12] fine-tune the popups. With JavaScript off it renders a native datetime-local field that submits name with the form.

Basic usage

  
    
      
        <bs-datetime-picker [(value)]="value" [showClear]="true"></bs-datetime-picker>
        
    

  
    
      
        import { Component, model } from '@angular/core';
        
    
      
        import { BsDatetimePickerComponent } from '@mintplayer/ng-bootstrap/datetime-picker';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-datetime-picker-demo',
        
    
      
          templateUrl: './my-datetime-picker-demo.component.html',
        
    
      
          imports: [BsDatetimePickerComponent],
        
    
      
        })
        
    
      
        export class MyDatetimePickerDemoComponent {
        
    
      
          readonly value = model<Date | null>(null);
        
    
      
        }
Keyboard shortcuts
  • Tab — moves between display input → date trigger → time trigger
  • ↓ / Enter / Space on a trigger — open its popup
  • Esc — close the active popup (focus returns to trigger)
  • Calendar popup:←→ ±1 day · ↑↓ ±1 week · Home / End week edges · PageUp / PageDown ±1 month · Ctrl+PageUp/PageDown ±1 year · Enter / Space selects
  • Time popup:↑↓ ±1 slot · Home / End first / last · PageUp / PageDown ±1 hour · Enter / Space selects + closes

Minimal

Selected: 
  
    
      
        <bs-datetime-picker [(value)]="value" [showClear]="true"></bs-datetime-picker>

Reactive form

FormControl.value:
FormControl.valid: true · FormControl.dirty: false 
  
    
      
        <bs-datetime-picker [formControl]="reactive" [showClear]="true"></bs-datetime-picker>
        
    

  
    
      
        import { Component } from '@angular/core';
        
    
      
        import { FormControl, ReactiveFormsModule } from '@angular/forms';
        
    
      
        import { BsDatetimePickerComponent } from '@mintplayer/ng-bootstrap/datetime-picker';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-datetime-picker-demo',
        
    
      
          templateUrl: './my-datetime-picker-demo.component.html',
        
    
      
          imports: [ReactiveFormsModule, BsDatetimePickerComponent],
        
    
      
        })
        
    
      
        export class MyDatetimePickerDemoComponent {
        
    
      
          readonly reactive = new FormControl<Date | null>(null);
        
    
      
        }

min / max bounds

Bounded to all of 2026.

Selected: 
  
    
      
        <bs-datetime-picker
        
    
      
          [(value)]="value"
        
    
      
          [min]="minDate"
        
    
      
          [max]="maxDate"
        
    
      
          [showClear]="true">
        
    
      
        </bs-datetime-picker>
        
    
      
        <!-- in component:
        
    
      
             readonly minDate = new Date(2026, 0, 1);
        
    
      
             readonly maxDate = new Date(2026, 11, 31); -->

disableDateFn (weekends disabled)

Selected: 
  
    
      
        <bs-datetime-picker
        
    
      
          [(value)]="value"
        
    
      
          [disableDateFn]="weekendsDisabled"
        
    
      
          [showClear]="true">
        
    
      
        </bs-datetime-picker>
        
    

  
    
      
        // Returning true means the date is unselectable.
        
    
      
        readonly weekendsDisabled = (d: Date) => {
        
    
      
          const day = d.getDay();
        
    
      
          return day === 0 || day === 6;
        
    
      
        };

Custom step (30 minutes)

Selected: 
  
    
      
        <!-- [step] is minutes between time slots — 30 ⇒ 00 & 30 only. -->
        
    
      
        <bs-datetime-picker
        
    
      
          [(value)]="value"
        
    
      
          [step]="30"
        
    
      
          [showClear]="true">
        
    
      
        </bs-datetime-picker>

hour12 mode


Current mode: "auto"
  
    
      
        <!-- [hour12]: 'auto' = locale default; true = 12h; false = 24h. -->
        
    
      
        <bs-datetime-picker
        
    
      
          [(value)]="value"
        
    
      
          [hour12]="hour12Mode()"
        
    
      
          [showClear]="true">
        
    
      
        </bs-datetime-picker>

Angular forms

Template-driven [(ngModel)] and reactive [formControl] both bind through the component's ControlValueAccessor: the value, the disabled state, and touched when focus leaves.

Template-driven

Value: null
dirty: false · touched: false · disabled: false

Reactive

Value: null
dirty: false · touched: false · disabled: false
  
    
      
        <!-- template-driven (FormsModule) -->
        
    
      
        <bs-datetime-picker [(ngModel)]="value" [showClear]="true"></bs-datetime-picker>
        
    
      
        
        
    
      
        <!-- reactive (ReactiveFormsModule): control = new FormControl(...) -->
        
    
      
        <bs-datetime-picker [formControl]="control" [showClear]="true"></bs-datetime-picker>