Lite Datetime Picker

A simple date time picker control comprised of an Angular Material DatePicker and time input spliced together

How To Use • API • Release Notes • Credits • License

Key Features

• One control instead of two
  • No need to manage a date and time input separately
• Implements Angular Form Control interface
  • Is an Angular Form Control, so it works like the others in your app
• Built in Angular Material Form Fields
• API similar to Angular Material Datepicker
• Seamlessly accepts your app's theme

How To Use

Install from npm.

$ npm install --save lite-datetime-picker

// add to your module (Angular Forms modules recommended)
...
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { LiteDatetimePickerModule } from 'lite-datetime-picker'; // <--

@NgModule({
    declarations: [MyComponent],
    imports: [
        ...
        FormsModule,
        ReactiveFormsModule,
        LiteDatetimePickerModule // <--
    ],
    exports: [MyComponent]
})
export class MyModule { }

<!-- Use as any Angular form control (here with Reactive Forms) -->
<form [formGroup]="myForm">
  <p>
    <!-- mat-form-fields already built in -->
    <lft-lite-datetime-picker formControlName="beginDate"
                              [max]="myForm.controls['endDate'].value"
                              placeholder="Begin"
                              [step]="900"
                              [required]="true"></lft-lite-datetime-picker>
  </p>
  <p>
    <lft-lite-datetime-picker formControlName="endDate"
                              [min]="myForm.controls['beginDate'].value"
                              placeholder="End"
                              [step]="900"></lft-lite-datetime-picker>
  </p>
</form>

API

• Inputs
  • min - chosen date must be later than this date
  • max - chosen date must be earlier than this date
  • placeholder - text to show in the date input field
  • step - second increments in time picker (values over 60 remove seconds picker from UI)
  • required - show warning state when left empty
• Form Control API

Release Notes

• 1.2.0

  • Upgrade to Angular 11 and Angular Material 11
  • Improve README
  • Implement Angular strict type checking

• 1.3.0

  • Upgrade to Angular 14 and Angular Material 14

• 1.4.0

  • Upgrade to Angular 15 and Angular Material 15

Credits

This library was generated with Angular CLI version 10.1.6.

License

MIT

---