# MUK DATE PICKER

## Usage

```html

<lib-muk-date-picker
        [controller]="controller"
        [label]="label"
        [hintFormat]="hintFormat"
        [placeholderStartDate]="placeholderStartDate"
        [placeholderEndDate]="placeholderEndDate"
        [isRange]="isRange"
        [startController]="startController"
        [endController]="endController"
        [isRequired]="isRequired"
        [isDisabled]="isDisabled"
        (dateValueChanged)="onDateValueChanged($event)"
        (startDateValueChanged)="onStartDateValueChanged($event)"
        (endDateValueChanged)="onEndDateValueChanged($event)"
></lib-muk-date-picker>
```

```typescript
import {Component} from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    controller = new FormControl();
    label = 'Label';
    hintFormat = 'DD/MM/YYYY';
    placeholderStartDate = 'Start date';
    placeholderEndDate = 'End date';
    isRange = true;
    startController = new FormControl();
    endController = new FormControl();
    isRequired = true;
    isDisabled = false;

    onDateValueChanged(event: DateValueChanged) {
        console.log(event);
    }

    onStartDateValueChanged(event: DateValueChanged) {
        console.log(event);
    }

    onEndDateValueChanged(event: DateValueChanged) {
        console.log(event);
    }
}
```

### Properties

| Name            | Type        | Description                                    |
|-----------------|-------------|------------------------------------------------|
| controller      | FormControl | The form control associated to the input       |
| label           | string      | The label of the input                         |
| hintFormat      | string      | The format of the hint                         |
| placeholder     | string      | The placeholder of the input                   |
| isRange         | boolean     | Whether the input is a range                   |
| startController | FormControl | The form control associated to the start input |
| endController   | FormControl | The form control associated to the end input   |
| isRequired      | boolean     | Whether the input is required                  |
| isDisabled      | boolean     | Whether the input is disabled                  |

### Events

| Name                  | Type             | Description                                                                                                 |
|-----------------------|------------------|-------------------------------------------------------------------------------------------------------------|
| dateValueChanged      | DateValueChanged | The event emitted when the value of the input changes. The event contains the new value of the input.       |
| startDateValueChanged | DateValueChanged | The event emitted when the value of the start input changes. The event contains the new value of the input. |
| endDateValueChanged   | DateValueChanged | The event emitted when the value of the end input changes. The event contains the new value of the input.   |