> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/components/forms/datepicker.md).

# DatePicker

In some forms users should enter a date. And it's very easy to do this with the help of DatePicker. DatePicker shows a date display that is localized and familiar to the user.

```tsx
import { DatePicker } from 'altrone-ui';

const [date, setDate] = useState(new Date());

return <DatePicker 
    value={date} 
    onChange={setDate} 
    minDate={new Date(2020, 0, 0)} 
    maxDate={new Date(2024, 12, 31)}
/>
```

## Pickers

DatePicker can be used not only for picking a date. You can also pick a month or even an year. To do that you should pass necessary value into picker prop.&#x20;

**Day Picker.** DatePicker looks like calendar where you can change a month. When user clicks on day he is able to choose a date. When user clicks on month name he can choose a month and year. For example, when user selects 25 April 2020, value will be `Date(2020, 3, 25)`

**Month Picker.** In this mode user can select a month and year. There are two ScrollableSelector with all possible combinations of months and years. For example, when user selects April 2020, value will be `Date(2020, 3, 0)`

**Year Picker.** In this mode user can select only a year.  There is only one ScrollableSelector with all possible years. For example, when user selects 2020, value will be `Date(2020, 0, 0)`

### <mark style="color:blue;">Picker</mark>

```typescript
enum Picker {
  day = 'day',
  month = 'month',
  year = 'year'
}
```

## Date range

{% hint style="info" %}
This feature was added in **Altrone 2.1**
{% endhint %}

Upon activating the `useDateRange` prop, users gain the capability to choose a pair of dates. Under this configuration, the `value` prop assumes the `[Date | undefined, Date | undefined]` type, and the `onChange` function transmits an array containing the selected dates to you.

## Properties <mark style="color:orange;">\<IsDateRange = false></mark>

| Property                                              | Type                                                | Description                                                         |                 |                                                         |                                                 |
| ----------------------------------------------------- | --------------------------------------------------- | ------------------------------------------------------------------- | --------------- | ------------------------------------------------------- | ----------------------------------------------- |
| **`value`**<mark style="color:red;">**`*`**</mark>    | <p><code>Date                                       | undefined</code><br><br><code>\[Date                                | undefined, Date | undefined]</code> (if IsDateRange = false)</p>          | Selected date                                   |
| **`onChange`**<mark style="color:red;">**`*`**</mark> | <p><code>(value: Date                               | undefined) => void</code><br><br><code>(value: \[Date               | undefined, Date | undefined]) => void</code> (if IsDateRange = false)</p> | Callback is called when user selects a new date |
| **`picker`**                                          | [`Picker`](#picker)                                 | Mode of the picker. Default value is `day`                          |                 |                                                         |                                                 |
| **`useDateRange`**                                    | `boolean`                                           | Allows to select range of dates. Default value is `false`           |                 |                                                         |                                                 |
| **`minDate`**                                         | `Date`                                              | Minimum possible date                                               |                 |                                                         |                                                 |
| **`maxDate`**                                         | `Date`                                              | Maximum possible date                                               |                 |                                                         |                                                 |
| **`placeholder`**                                     | `string`                                            | Placeholder of the control                                          |                 |                                                         |                                                 |
| **`clearable`**                                       | `boolean`                                           | If true user can set value to `undefined`. Default value is `false` |                 |                                                         |                                                 |
| **`disabled`**                                        | `boolean`                                           | Marks DatePicker as disabled. Default value is `false`              |                 |                                                         |                                                 |
| **`size`**                                            | [`Size`](/altrone-ui/utils/enums/size.md)           | Size of the DatePicker                                              |                 |                                                         |                                                 |
| **`errorText`**                                       | `string`                                            | Error message of DatePicker                                         |                 |                                                         |                                                 |
| **`hintText`**                                        | `string`                                            | Hint message of DatePicker                                          |                 |                                                         |                                                 |
| **`surface`**                                         | [`Surface`](/altrone-ui/utils/enums/surface.md)     | Surface of the DatePicker                                           |                 |                                                         |                                                 |
| **`elevation`**                                       | [`Elevation`](/altrone-ui/utils/enums/elevation.md) | Elevation of the DatePicker                                         |                 |                                                         |                                                 |
| **`className`**                                       | `string`                                            | Custom CSS class                                                    |                 |                                                         |                                                 |

## History

* **`Altrone 2.1`**:
  * added `useDateRanges` prop
  * redesigned MonthPicker
* **`Altrone 2.0`**:
  * added `surface` prop
  * added `elevation` prop
* **`Altrone 1.2`**:
  * added `clearable` prop
* **`Altrone 1.1`**:
  * added `minDate` prop
  * added `maxDate` prop
* **`Altrone 1.0`**: initial release