react-dropdown-date 2.2.8 → 2.3.0

package/README.md

@@ -66,6 +66,20 @@ class App extends Component {
             console.log(date);
             this.setState({ date: date, selectedDate: formatDate(date) });
           }}
+          localizedMonths={                 // default is the english options
+            0: 'January',
+            1: 'February',
+            2: 'March',
+            3: 'April',
+            4: 'May',
+            5: 'June',
+            6: 'July',
+            7: 'August',
+            8: 'September',
+            9: 'October',
+            10: 'November',
+            11: 'December'
+          }
           ids={                             // optional
             {
               year: 'select-year',
@@ -198,6 +212,20 @@ class App extends Component {
             this.setState({ month });
             console.log(month);
           }}
+          localizedMonths={         // default is the english options
+            0: 'January',
+            1: 'February',
+            2: 'March',
+            3: 'April',
+            4: 'May',
+            5: 'June',
+            6: 'July',
+            7: 'August',
+            8: 'September',
+            9: 'October',
+            10: 'November',
+            11: 'December'
+          }
           id={'month'}
           name={'month'}
           classes={'classes'}

package/dist/date-dropdown.component.d.ts

@@ -0,0 +1,96 @@
+import * as React from 'react';
+export declare enum DropdownComponent {
+    year = "year",
+    month = "month",
+    day = "day"
+}
+interface IProps {
+    startDate?: string;
+    endDate?: string;
+    selectedDate?: string;
+    order?: DropdownComponent[];
+    onMonthChange?: Function;
+    onDayChange?: Function;
+    onYearChange?: Function;
+    onDateChange?: Function;
+    localizedMonths?: {
+        [key: number]: string;
+    };
+    ids?: {
+        year?: string;
+        month?: string;
+        day?: string;
+    };
+    names?: {
+        year?: string;
+        month?: string;
+        day?: string;
+    };
+    classes?: {
+        dateContainer?: string;
+        yearContainer?: string;
+        monthContainer?: string;
+        dayContainer?: string;
+        year?: string;
+        month?: string;
+        day?: string;
+        yearOptions?: string;
+        monthOptions?: string;
+        dayOptions?: string;
+    };
+    defaultValues?: {
+        year?: string;
+        month?: string;
+        day?: string;
+    };
+    options?: {
+        yearReverse?: boolean;
+        monthShort?: boolean;
+        monthCaps?: boolean;
+    };
+}
+interface IState {
+    startYear: number;
+    startMonth: number;
+    startDay: number;
+    endYear: number;
+    endMonth: number;
+    endDay: number;
+    selectedYear: number;
+    selectedMonth: number;
+    selectedDay: number;
+}
+export declare class DropdownDate extends React.Component<IProps, IState> {
+    renderParts: any;
+    localizedMonthOptions: {
+        [key: number]: string;
+    };
+    constructor(props: IProps);
+    private getLocalizedMonthOptions;
+    static getDerivedStateFromProps(nextProps: IProps, prevState: IState): {
+        selectedYear: number;
+        selectedMonth?: undefined;
+        selectedDay?: undefined;
+    } | {
+        selectedMonth: number;
+        selectedYear?: undefined;
+        selectedDay?: undefined;
+    } | {
+        selectedDay: number;
+        selectedYear?: undefined;
+        selectedMonth?: undefined;
+    } | null;
+    componentDidUpdate(prevProps: IProps): void;
+    generateYearOptions(): JSX.Element[];
+    generateMonthOptions(): JSX.Element[];
+    generateDayOptions(): JSX.Element[];
+    handleDateChange: (type: DropdownComponent, value: number) => void;
+    handleYearChange: (e: any) => void;
+    handleMonthChange: (e: any) => void;
+    handleDayChange: (e: any) => void;
+    renderYear: () => JSX.Element;
+    renderMonth: () => JSX.Element;
+    renderDay: () => JSX.Element;
+    render: () => JSX.Element;
+}
+export {};

package/dist/day-picker.component.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+interface IProps {
+    year: number;
+    month: number;
+    value: number;
+    onChange: Function;
+    id?: string;
+    name?: string;
+    defaultValue?: string;
+    endYearGiven?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    classes?: string;
+    optionClasses?: string;
+}
+interface IState {
+}
+export declare class DayPicker extends React.Component<IProps, IState> {
+    renderDayOptions: () => JSX.Element[];
+    handleSelectionChange: (e: any) => any;
+    render: () => JSX.Element;
+}
+export {};

package/dist/helper.d.ts

@@ -0,0 +1,34 @@
+export declare const monthByNumber: {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+    11: string;
+};
+export declare const numberByMonth: {
+    January: number;
+    February: number;
+    March: number;
+    April: number;
+    May: number;
+    June: number;
+    July: number;
+    August: number;
+    September: number;
+    October: number;
+    November: number;
+    December: number;
+};
+export declare const unit: {
+    day: string;
+    month: string;
+    year: string;
+};
+export declare const getDaysInMonth: (year: number, month: number) => number;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './year-picker.component';
+export * from './month-picker.component';
+export * from './day-picker.component';
+export * from './date-dropdown.component';

package/dist/index.esm.js

@@ -0,0 +1,439 @@
+import * as React from 'react';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var YearPicker = /** @class */ (function (_super) {
+    __extends(YearPicker, _super);
+    function YearPicker() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.renderYearOptions = function () {
+            var _a = _this.props, start = _a.start, end = _a.end, reverse = _a.reverse, optionClasses = _a.optionClasses, defaultValue = _a.defaultValue;
+            var startYear = start || 1900;
+            var endYear = end || new Date().getFullYear();
+            var years = [];
+            if (startYear <= endYear) {
+                for (var i = startYear; i <= endYear; ++i) {
+                    years.push(i);
+                }
+            }
+            else {
+                for (var i = endYear; i >= startYear; --i) {
+                    years.push(i);
+                }
+            }
+            if (reverse) {
+                years.reverse();
+            }
+            var yearOptions = [];
+            yearOptions.push(React.createElement("option", { value: "", key: -1, className: optionClasses }, defaultValue ? defaultValue : ''));
+            years.forEach(function (year, index) {
+                yearOptions.push(React.createElement("option", { value: year, key: index, className: optionClasses }, year));
+            });
+            return yearOptions;
+        };
+        _this.handleSelectionChange = function (e) { return _this.props.onChange(e.target.value); };
+        _this.render = function () {
+            var _a = _this.props, id = _a.id, name = _a.name, classes = _a.classes, required = _a.required, disabled = _a.disabled, value = _a.value;
+            return (React.createElement("select", { id: id, name: name, className: classes, required: required === true, disabled: disabled === true, onChange: _this.handleSelectionChange, value: value }, _this.renderYearOptions()));
+        };
+        return _this;
+    }
+    return YearPicker;
+}(React.Component));
+
+var monthByNumber = {
+    0: 'January',
+    1: 'February',
+    2: 'March',
+    3: 'April',
+    4: 'May',
+    5: 'June',
+    6: 'July',
+    7: 'August',
+    8: 'September',
+    9: 'October',
+    10: 'November',
+    11: 'December'
+};
+var getDaysInMonth = function (year, month) {
+    year = +(year);
+    month = +(month) + 1;
+    return new Date(year, month, 0).getDate();
+};
+
+var MonthPicker = /** @class */ (function (_super) {
+    __extends(MonthPicker, _super);
+    function MonthPicker() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.renderMonthOptions = function () {
+            var _a = _this.props, endYearGiven = _a.endYearGiven, year = _a.year, numeric = _a.numeric, caps = _a.caps, short = _a.short, optionClasses = _a.optionClasses, defaultValue = _a.defaultValue, localizedMonths = _a.localizedMonths;
+            var today = new Date();
+            var months = [];
+            var month = 11;
+            var localizedMonthOptions = (localizedMonths && Object.entries(localizedMonths).length > 0) ? localizedMonths : monthByNumber;
+            if (!endYearGiven) {
+                if (year && parseInt(year.toString()) === today.getFullYear()) {
+                    month = today.getMonth();
+                }
+            }
+            if (numeric) {
+                for (var i = 0; i <= month; ++i) {
+                    months.push((i + 1).toString());
+                }
+            }
+            else {
+                for (var i = 0; i <= month; ++i) {
+                    months.push(localizedMonthOptions[i]);
+                }
+                if (caps) {
+                    months = months.map(function (month) { return month.toUpperCase(); });
+                }
+                if (short) {
+                    months = months.map(function (month) { return month.substring(0, 3); });
+                }
+            }
+            var monthOptions = [];
+            monthOptions.push(React.createElement("option", { value: "", key: -1, className: optionClasses }, defaultValue ? defaultValue : ''));
+            months.forEach(function (month, index) {
+                monthOptions.push(React.createElement("option", { value: index, key: index, className: optionClasses }, month));
+            });
+            return monthOptions;
+        };
+        _this.handleSelectionChange = function (e) { return _this.props.onChange(e.target.value); };
+        _this.render = function () {
+            var _a = _this.props, id = _a.id, name = _a.name, classes = _a.classes, required = _a.required, disabled = _a.disabled, value = _a.value;
+            return (React.createElement("select", { id: id, name: name, className: classes, required: required === true, disabled: disabled === true, value: value, onChange: _this.handleSelectionChange }, _this.renderMonthOptions()));
+        };
+        return _this;
+    }
+    return MonthPicker;
+}(React.Component));
+
+var DayPicker = /** @class */ (function (_super) {
+    __extends(DayPicker, _super);
+    function DayPicker() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.renderDayOptions = function () {
+            var _a = _this.props, month = _a.month, year = _a.year, endYearGiven = _a.endYearGiven, optionClasses = _a.optionClasses, defaultValue = _a.defaultValue;
+            var days = month ? getDaysInMonth(year, month) : 31;
+            var today = new Date();
+            if (!endYearGiven) {
+                if (year === today.getFullYear() && month === today.getMonth()) {
+                    days = today.getDate();
+                }
+            }
+            var dayOptions = [];
+            dayOptions.push(React.createElement("option", { value: "", key: -1, className: optionClasses }, defaultValue ? defaultValue : ''));
+            for (var i = 1; i <= days; ++i) {
+                dayOptions.push(React.createElement("option", { value: i, key: i, className: optionClasses }, i));
+            }
+            return dayOptions;
+        };
+        _this.handleSelectionChange = function (e) { return _this.props.onChange(e.target.value); };
+        _this.render = function () {
+            var _a = _this.props, id = _a.id, name = _a.name, classes = _a.classes, required = _a.required, disabled = _a.disabled, value = _a.value;
+            return (React.createElement("select", { id: id, name: name, className: classes, onChange: _this.handleSelectionChange, required: required === true, disabled: disabled === true, value: value }, _this.renderDayOptions()));
+        };
+        return _this;
+    }
+    return DayPicker;
+}(React.Component));
+
+var DropdownComponent;
+(function (DropdownComponent) {
+    DropdownComponent["year"] = "year";
+    DropdownComponent["month"] = "month";
+    DropdownComponent["day"] = "day";
+})(DropdownComponent || (DropdownComponent = {}));
+var DropdownDate = /** @class */ (function (_super) {
+    __extends(DropdownDate, _super);
+    function DropdownDate(props) {
+        var _this = _super.call(this, props) || this;
+        _this.handleDateChange = function (type, value) {
+            if (_this.props.onDateChange) {
+                var _a = _this.state, selectedYear = _a.selectedYear, selectedMonth = _a.selectedMonth, selectedDay = _a.selectedDay;
+                if (type === DropdownComponent.year) {
+                    selectedYear = value;
+                }
+                else if (type === DropdownComponent.month) {
+                    selectedMonth = value;
+                }
+                else if (type === DropdownComponent.day) {
+                    selectedDay = value;
+                }
+                if (selectedYear !== -1 && selectedMonth !== -1 && selectedDay !== -1) {
+                    _this.props.onDateChange(new Date(selectedYear, selectedMonth, selectedDay));
+                }
+            }
+        };
+        _this.handleYearChange = function (e) {
+            var year = parseInt(e.target.value);
+            _this.setState({ selectedYear: year });
+            if (_this.props.onYearChange) {
+                _this.props.onYearChange(year);
+            }
+            _this.handleDateChange(DropdownComponent.year, year);
+        };
+        _this.handleMonthChange = function (e) {
+            var month = parseInt(e.target.value);
+            _this.setState({ selectedMonth: month });
+            if (_this.props.onMonthChange) {
+                _this.props.onMonthChange(_this.localizedMonthOptions[month]);
+            }
+            _this.handleDateChange(DropdownComponent.month, month);
+        };
+        _this.handleDayChange = function (e) {
+            var day = parseInt(e.target.value);
+            _this.setState({ selectedDay: day });
+            if (_this.props.onDayChange) {
+                _this.props.onDayChange(day);
+            }
+            _this.handleDateChange(DropdownComponent.day, day);
+        };
+        _this.renderYear = function () {
+            var _a = _this.props, classes = _a.classes, ids = _a.ids, names = _a.names;
+            return (React.createElement("div", { key: "year", id: "dropdown-year", className: (classes && classes.yearContainer) ? classes.yearContainer : undefined },
+                React.createElement("select", { id: (ids && ids.year) ? ids.year : undefined, name: (names && names.year) ? names.year : undefined, className: (classes && classes.year) ? classes.year : undefined, onChange: _this.handleYearChange, value: _this.state.selectedYear }, _this.generateYearOptions())));
+        };
+        _this.renderMonth = function () {
+            var _a = _this.props, classes = _a.classes, ids = _a.ids, names = _a.names;
+            return (React.createElement("div", { key: "month", id: "dropdown-month", className: (classes && classes.monthContainer) ? classes.monthContainer : undefined },
+                React.createElement("select", { id: (ids && ids.month) ? ids.month : undefined, name: (names && names.month) ? names.month : undefined, className: (classes && classes.month) ? classes.month : undefined, onChange: _this.handleMonthChange, value: _this.state.selectedMonth }, _this.generateMonthOptions())));
+        };
+        _this.renderDay = function () {
+            var _a = _this.props, classes = _a.classes, ids = _a.ids, names = _a.names;
+            return (React.createElement("div", { key: "day", id: "dropdown-day", className: (classes && classes.dayContainer) ? classes.dayContainer : undefined },
+                React.createElement("select", { id: (ids && ids.day) ? ids.day : undefined, name: (names && names.day) ? names.day : undefined, className: (classes && classes.day) ? classes.day : undefined, onChange: _this.handleDayChange, value: _this.state.selectedDay }, _this.generateDayOptions())));
+        };
+        _this.render = function () {
+            var classes = _this.props.classes;
+            var order = _this.props.order;
+            order = order || [DropdownComponent.year, DropdownComponent.month, DropdownComponent.day];
+            return (React.createElement("div", { id: "dropdown-date", className: (classes && classes.dateContainer) ? classes.dateContainer : undefined }, order.map(function (part) {
+                return _this.renderParts[part]();
+            })));
+        };
+        var startDate = props.startDate, endDate = props.endDate, selectedDate = props.selectedDate;
+        var sDate = startDate ? new Date(startDate) : new Date('1900-01-01');
+        var eDate = endDate ? new Date(endDate) : new Date();
+        var selDate = selectedDate ? new Date(selectedDate) : null;
+        _this.state = {
+            startYear: sDate.getFullYear(),
+            startMonth: sDate.getMonth(),
+            startDay: sDate.getDate(),
+            endYear: eDate.getFullYear(),
+            endMonth: eDate.getMonth(),
+            endDay: eDate.getDate(),
+            selectedYear: selDate ? selDate.getFullYear() : -1,
+            selectedMonth: selDate ? selDate.getMonth() : -1,
+            selectedDay: selDate ? selDate.getDate() : -1
+        };
+        _this.renderParts = {
+            year: _this.renderYear,
+            month: _this.renderMonth,
+            day: _this.renderDay,
+        };
+        _this.localizedMonthOptions = _this.getLocalizedMonthOptions(props.localizedMonths);
+        return _this;
+    }
+    DropdownDate.prototype.getLocalizedMonthOptions = function (localizedMonths) {
+        return (localizedMonths && Object.entries(localizedMonths).length > 0) ? localizedMonths : monthByNumber;
+    };
+    DropdownDate.getDerivedStateFromProps = function (nextProps, prevState) {
+        var selDate = nextProps.selectedDate ? new Date(nextProps.selectedDate) : null;
+        var tempSelDate = {
+            selectedYear: selDate ? selDate.getFullYear() : -1,
+            selectedMonth: selDate ? selDate.getMonth() : -1,
+            selectedDay: selDate ? selDate.getDate() : -1
+        };
+        if (tempSelDate.selectedYear !== prevState.selectedYear) {
+            return { selectedYear: tempSelDate.selectedYear };
+        }
+        if (tempSelDate.selectedMonth !== prevState.selectedMonth) {
+            return { selectedMonth: tempSelDate.selectedMonth };
+        }
+        if (tempSelDate.selectedDay !== prevState.selectedDay) {
+            return { selectedDay: tempSelDate.selectedDay };
+        }
+        return null;
+    };
+    DropdownDate.prototype.componentDidUpdate = function (prevProps) {
+        // Update localizedMonthOptions if localizedMonths prop changed
+        if (prevProps.localizedMonths !== this.props.localizedMonths) {
+            this.localizedMonthOptions = this.getLocalizedMonthOptions(this.props.localizedMonths);
+        }
+    };
+    DropdownDate.prototype.generateYearOptions = function () {
+        var _a = this.props, classes = _a.classes, options = _a.options, defaultValues = _a.defaultValues;
+        var _b = this.state, startYear = _b.startYear, endYear = _b.endYear;
+        var yearOptions = [];
+        yearOptions.push(React.createElement("option", { key: -1, value: "-1", className: (classes && classes.yearOptions) ? classes.yearOptions : undefined }, (defaultValues && defaultValues.year) ? defaultValues.year : ''));
+        if (options && options.yearReverse) {
+            for (var i = endYear; i >= startYear; i--) {
+                yearOptions.push(React.createElement("option", { key: i, value: i, className: (classes && classes.yearOptions) ? classes.yearOptions : undefined }, i));
+            }
+        }
+        else {
+            for (var i = startYear; i <= endYear; i++) {
+                yearOptions.push(React.createElement("option", { key: i, value: i, className: (classes && classes.yearOptions) ? classes.yearOptions : undefined }, i));
+            }
+        }
+        return yearOptions;
+    };
+    DropdownDate.prototype.generateMonthOptions = function () {
+        var _a = this.props, classes = _a.classes, options = _a.options, defaultValues = _a.defaultValues;
+        var _b = this.state, startMonth = _b.startMonth, endMonth = _b.endMonth, startYear = _b.startYear, endYear = _b.endYear, selectedYear = _b.selectedYear;
+        var months = [];
+        if (selectedYear === startYear && selectedYear === endYear) {
+            for (var i = startMonth; i <= endMonth; i++) {
+                months.push({
+                    value: i,
+                    month: this.localizedMonthOptions[i]
+                });
+            }
+        }
+        else if (selectedYear === startYear) {
+            for (var i = startMonth; i <= 11; i++) {
+                months.push({
+                    value: i,
+                    month: this.localizedMonthOptions[i]
+                });
+            }
+        }
+        else if (selectedYear === endYear) {
+            for (var i = 0; i <= endMonth; i++) {
+                months.push({
+                    value: i,
+                    month: this.localizedMonthOptions[i]
+                });
+            }
+        }
+        else {
+            for (var i = 0; i <= 11; i++) {
+                months.push({
+                    value: i,
+                    month: this.localizedMonthOptions[i]
+                });
+            }
+        }
+        if (options && options.monthShort) {
+            months = months.map(function (elem) {
+                return {
+                    value: elem.value,
+                    month: elem.month.substring(0, 3)
+                };
+            });
+        }
+        if (options && options.monthCaps) {
+            months = months.map(function (elem) {
+                return {
+                    value: elem.value,
+                    month: elem.month.toUpperCase()
+                };
+            });
+        }
+        var monthOptions = [];
+        monthOptions.push(React.createElement("option", { key: -1, value: "-1", className: (classes && classes.monthOptions) ? classes.monthOptions : undefined }, (defaultValues && defaultValues.month) ? defaultValues.month : ''));
+        months.forEach(function (elem) {
+            monthOptions.push(React.createElement("option", { key: elem.value, value: elem.value, className: (classes && classes.monthOptions) ? classes.monthOptions : undefined }, elem.month));
+        });
+        return monthOptions;
+    };
+    DropdownDate.prototype.generateDayOptions = function () {
+        var _a = this.props, classes = _a.classes, defaultValues = _a.defaultValues;
+        var _b = this.state, startYear = _b.startYear, startMonth = _b.startMonth, startDay = _b.startDay, endYear = _b.endYear, endMonth = _b.endMonth, endDay = _b.endDay, selectedYear = _b.selectedYear, selectedMonth = _b.selectedMonth;
+        var dayOptions = [];
+        dayOptions.push(React.createElement("option", { key: -1, value: "-1", className: (classes && classes.dayOptions) ? classes.dayOptions : undefined }, (defaultValues && defaultValues.day) ? defaultValues.day : ''));
+        var monthDays = getDaysInMonth(selectedYear, selectedMonth);
+        if (selectedYear === startYear && selectedYear === endYear) {
+            if (selectedMonth === startMonth && selectedMonth === endMonth) {
+                for (var i = startDay; i <= endDay; i++) {
+                    dayOptions.push(React.createElement("option", { key: i, value: i, className: (classes && classes.dayOptions) ? classes.dayOptions : undefined }, i));
+                }
+            }
+            else if (selectedMonth === startMonth) {
+                for (var i = startDay; i <= monthDays; i++) {
+                    dayOptions.push(React.createElement("option", { key: i, value: i, className: (classes && classes.dayOptions) ? classes.dayOptions : undefined }, i));
+                }
+            }
+            else if (selectedMonth === endMonth) {
+                for (var i = 1; i <= endDay; i++) {
+                    dayOptions.push(React.createElement("option", { key: i, value: i, className: (classes && classes.dayOptions) ? classes.dayOptions : undefined }, i));
+                }
+            }
+            else {
+                for (var i = 1; i <= monthDays; i++) {
+                    dayOptions.push(React.createElement("option", { key: i, value: i, className: (classes && classes.dayOptions) ? classes.dayOptions : undefined }, i));
+                }
+            }
+        }
+        else if (selectedYear === startYear) {
+            if (selectedMonth === startMonth) {
+                for (var i = startDay; i <= monthDays; i++) {
+                    dayOptions.push(React.createElement("option", { key: i, value: i, className: (classes && classes.dayOptions) ? classes.dayOptions : undefined }, i));
+                }
+            }
+            else {
+                for (var i = 1; i <= monthDays; i++) {
+                    dayOptions.push(React.createElement("option", { key: i, value: i, className: (classes && classes.dayOptions) ? classes.dayOptions : undefined }, i));
+                }
+            }
+        }
+        else if (selectedYear === endYear) {
+            if (selectedMonth === endMonth) {
+                for (var i = 1; i <= endDay; i++) {
+                    dayOptions.push(React.createElement("option", { key: i, value: i, className: (classes && classes.dayOptions) ? classes.dayOptions : undefined }, i));
+                }
+            }
+            else {
+                for (var i = 1; i <= monthDays; i++) {
+                    dayOptions.push(React.createElement("option", { key: i, value: i, className: (classes && classes.dayOptions) ? classes.dayOptions : undefined }, i));
+                }
+            }
+        }
+        else {
+            if (selectedMonth) {
+                for (var i = 1; i <= monthDays; i++) {
+                    dayOptions.push(React.createElement("option", { key: i, value: i, className: (classes && classes.dayOptions) ? classes.dayOptions : undefined }, i));
+                }
+            }
+            else {
+                for (var i = 1; i <= 31; i++) {
+                    dayOptions.push(React.createElement("option", { key: i, value: i, className: (classes && classes.dayOptions) ? classes.dayOptions : undefined }, i));
+                }
+            }
+        }
+        return dayOptions;
+    };
+    return DropdownDate;
+}(React.Component));
+
+export { DayPicker, DropdownComponent, DropdownDate, MonthPicker, YearPicker };
+//# sourceMappingURL=index.esm.js.map