lite-datetime-picker

Spliced Angular Material date and time picker

Usage no npm install needed!

<script type="module">
  import liteDatetimePicker from 'https://cdn.skypack.dev/lite-datetime-picker';
</script>

README

Lite Datetime Picker

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

How To UseAPIRelease NotesCreditsLicense

screenshot

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

Credits

This library was generated with Angular CLI version 10.1.6.

License

MIT