lite-datetime-picker/README.md

Spliced Angular Material date and time picker

<h1 align="center">
  Lite Datetime Picker
</h1>

<h4 align="center">
    A simple date time picker control comprised of an
    <a href="material.angular.io">Angular Material</a> DatePicker and time input
    spliced together
</h4>

<p align="center">
  <a href="#how-to-use">How To Use</a> •
  <a href="#api">API</a> •
  <a href="#release-notes">Release Notes</a> •
  <a href="#credits">Credits</a> •
  <a href="#license">License</a>
</p>

![screenshot](https://adamddunkerley.gitlab.io/images/lite-datetime-picker-action.png)


## Key Features

* One control instead of two
  - No need to manage a date and time input separately
* Implements [Angular Form Control](https://angular.io/api/forms/FormControl) 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.

```bash
$ npm install --save lite-datetime-picker
```

```javascript
// 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 { }
```

```html
<!-- 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](https://angular.io/api/forms/FormControl)


## 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](https://github.com/angular/angular-cli) version 10.1.6.


## License

MIT

---