# Date-picker


## Examples

### Default

```html
<m-datepicker
      label=${args.label}
      placeholder=${args.placeholder}
      name=${args.name}
      ?required=${args.required}
      ?disabled=${args.disabled}
      error=${args.error}
      hint=${args.hint}
      ?labelHidden=${args.labelHidden}
      ?fullWidth=${args.fullWidth}
      ?horizontal=${args.horizontal}
      ?readonly=${args.readonly}
      locale=${args.locale}
      min=${args.min}
      max=${args.max}
      value=${args.value}
      description=${args.description}
    ></m-datepicker>
```

### WithError

```html
<m-datepicker
      label="Date"
      placeholder="Select date"
      error="Please select a valid date"
      name="error-datepicker"
    ></m-datepicker>
```

### WithHint

```html
<m-datepicker
      label="Date"
      placeholder="Select date"
      hint="Click the calendar icon to select a date"
      name="hint-datepicker"
    ></m-datepicker>
```

### Required

```html
<m-datepicker
      label="Date"
      placeholder="Select date"
      required
      name="required-datepicker"
    ></m-datepicker>
```

### Disabled

```html
<m-datepicker
      label="Date"
      placeholder="Select date"
      disabled
      name="disabled-datepicker"
    ></m-datepicker>
```

### FullWidth

```html
<m-datepicker
      label="Date"
      placeholder="Select date"
      fullWidth
      name="fullwidth-datepicker"
    ></m-datepicker>
```

### Readonly

```html
<m-datepicker
      label="Date"
      placeholder="Select date"
      readonly
      name="readonly-datepicker"
    ></m-datepicker>
```