# Datepicker

## propTypes

```
Datepicker.propTypes = {
    closeOnSelect: PropTypes.bool,
    days: PropTypes.array,
    fillDaysSection: PropTypes.bool,
    id: PropTypes.string,
    isOpen: PropTypes.bool,
    months: PropTypes.array,
    onClickArrowLeft: PropTypes.func,
    onClickArrowRight: PropTypes.func,
    onClickDay: PropTypes.func,
    onClickMonth: PropTypes.func,
    onClickYear: PropTypes.func,
    showMonthLongNames: PropTypes.bool,
    startYear: PropTypes.number,
    subClass: PropTypes.string,
    value: PropTypes.string
};
```

## defaultProps

```
Datepicker.defaultProps = {
    closeOnSelect: false,
    days: [
        {
            nameLong: 'Sunday',
            nameShort: 'Su'
        },
        {
            nameLong: 'Monday',
            nameShort: 'Mo'
        },
        {
            nameLong: 'Tuesday',
            nameShort: 'Tu'
        },
        {
            nameLong: 'Wednesday',
            nameShort: 'We'
        },
        {
            nameLong: 'Thursday',
            nameShort: 'Th'
        },
        {
            nameLong: 'Friday',
            nameShort: 'Fr'
        },
        {
            nameLong: 'Saturday',
            nameShort: 'Sa'
        }
    ],
    fillDaysSection: true,
    id: `tsdevDatepicker-${Uuid.v4()}`,
    isOpen: true,
    months: [
        {
            nameLong: 'January',
            nameShort: 'Jan'
        },
        {
            nameLong: 'February',
            nameShort: 'Feb'
        },
        {
            nameLong: 'March',
            nameShort: 'Mar'
        },
        {
            nameLong: 'April',
            nameShort: 'Apr'
        },
        {
            nameLong: 'May',
            nameShort: 'May'
        },
        {
            nameLong: 'June',
            nameShort: 'Jun'
        },
        {
            nameLong: 'July',
            nameShort: 'Jul'
        },
        {
            nameLong: 'August',
            nameShort: 'Aug'
        },
        {
            nameLong: 'September',
            nameShort: 'Sep'
        },
        {
            nameLong: 'October',
            nameShort: 'Oct'
        },
        {
            nameLong: 'November',
            nameShort: 'Nov'
        },
        {
            nameLong: 'December',
            nameShort: 'Dec'
        }
    ],
    onClickArrowLeft: noop,
    onClickArrowRight: noop,
    onClickMonth: noop,
    onClickDay: noop,
    onClickYear: noop,
    showMonthLongNames: false,
    startYear: 1800,
    subClass: '',
    value: '18.02.1989'
};
```
## Functions
```
onClickArroLeft(obj) => {
    // obj-example
    <!-- day: 18
    id: "tsdevDatepicker-f3e7ca37-02f8-468e-8b3a-7aa088e6dcb9"
    isDaySelected: false
    isMonthSelected: false
    isYearSelected: false
    month: 1
    value: "18.02.1989"
    year: 1988 -->
};

onClickArrowRight(obj) => {
    // obj-example
    <!-- day: 18
    id: "tsdevDatepicker-f3e7ca37-02f8-468e-8b3a-7aa088e6dcb9"
    isDaySelected: false
    isMonthSelected: false
    isYearSelected: false
    month: 3
    value: "18.02.1989"
    year: 1989 -->
};

onClickYear(obj) => {
    // obj-example
    <!-- day: 18
    id: "tsdevDatepicker-f3e7ca37-02f8-468e-8b3a-7aa088e6dcb9"
    isDaySelected: false
    isMonthSelected: false
    isYearSelected: true
    month: 2
    value: "18.02.1989"
    year: 1989 -->
};

onClickMonth(obj) => {
    // obj-example
    <!-- day: 18
    id: "tsdevDatepicker-f3e7ca37-02f8-468e-8b3a-7aa088e6dcb9"
    isDaySelected: false
    isMonthSelected: true
    isYearSelected: true
    month: 3
    value: "18.02.1989"
    year: 1989 -->
};

onClickDay(obj) => {
    // obj-example
    <!-- day: 18
    id: "tsdevDatepicker-f3e7ca37-02f8-468e-8b3a-7aa088e6dcb9"
    isDaySelected: true
    isMonthSelected: true
    isYearSelected: true
    month: 11
    value: "18.02.1989"
    year: 1989 -->
};
```