reactComboDatePicker - A React component to select dates using combo boxes

Examples

Basic usage

The simpliest usage of the component is to add it without any attribute.

ReactDOM.render(
    <ComboDatePicker />,
    document.getElementById('container')
);

Set initial value

You can use the attribute date to set the initial date of the component. This attribute accepts Date objects, strings and timestampts in milliseconds.

ReactDOM.render(
    <ComboDatePicker date={new Date()} />,
    document.getElementById('container')
);

ReactDOM.render(
    <ComboDatePicker date="2000-01-01" />,
    document.getElementById('container')
);

ReactDOM.render(
    <ComboDatePicker date={946684800000} />,
    document.getElementById('container')
);

Change order of combo boxes

By default, the component first shows the combo box for the day, then combo box for the month and finally the one for the year. However this can be changed by using the attribute order.

ReactDOM.render(
    <ComboDatePicker date={new Date()} order="dmy" />,
    document.getElementById('container')
);

ReactDOM.render(
    <ComboDatePicker date={new Date()} order="mdy" />,
    document.getElementById('container')
);

ReactDOM.render(
    <ComboDatePicker date={new Date()} order="ymd" />,
    document.getElementById('container')
);

Define minimum and maximum dates

By default, the component let chooses any date in the last 100 years. However this can be changed by using the attributes maxDate and minDate.

ReactDOM.render(
    <ComboDatePicker minDate={new Date('2013-11-19')} 
                     maxDate={new Date('2015-11-19')} />,
    document.getElementById('container')
);

ReactDOM.render(
    <ComboDatePicker minDate="2013-11-19"} 
                     maxDate="2015-11-19" />,
    document.getElementById('container')
);

ReactDOM.render(
    <ComboDatePicker minDate={1384819200000} 
                     maxDate={1447891200000} />,
    document.getElementById('container')
);

Change strings for months

By default, the combo box for the month is filled with the first three caracters of the name of the months in English. However, the values of the combo box can be customized by using the attribute months.

ReactDOM.render(
    <ComboDatePicker date={new Date()} months="Enero,Febrero,
    Marzo,Abril,Mayo,Junio,Julio,Agosto,Septiembre,
    Octubre,Noviembre,Diciembre" />,
    document.getElementById('container')
);

ReactDOM.render(
    <ComboDatePicker date={new Date()} months={ ['Janvier',
    'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août',
    'Septembre', 'Octobre', 'Novembre', 'Décembre']} />,
    document.getElementById('container')
);

Add attributes

You can add attributes to each element by using the attributes attrsDate, attrsMonth and attrsYear.

ReactDOM.render(
    <ComboDatePicker date={new Date()} 
                     attrsDate={style: {color: 'red'}}
                     attrsMonth={style: {color: 'green'}} 
                     attrsYear={style: {color: 'blue'}}/>,
    document.getElementById('container')
);

Set sort order for years

By default, the combo box for years is sorted in ascending order, however you can use the attribute yearOrder to sort the values in descending order.

ReactDOM.render(
    <ComboDatePicker date={new Date()} yearOrder="ymd" />,
    document.getElementById('container')
);

Define timezone

By default, the client's timezone is used when parsing dates defined as strings or as integers (in the attributes date, maxDate and minDate). However, this can be changed by using the attribute timezone.

ReactDOM.render(
    <ComboDatePicker date="2000-01-01" timezone={-23} />,
    document.getElementById('container')
);

ReactDOM.render(
    <ComboDatePicker date="2000-01-01" timezone={0} />,
    document.getElementById('container')
);

ReactDOM.render(
    <ComboDatePicker date="2000-01-01" timezone={23} />,
    document.getElementById('container')
);

Set placeholders

You can define a placeholder for each combobox by using the attribute placeholder.

ReactDOM.render(
    <ComboDatePicker placeholder="Year,Month,Date" />,
    document.getElementById('container')
);

ReactDOM.render(
    <ComboDatePicker placeholder={['Año', 'Mes', 'Día']} />,
    document.getElementById('container')
);

Getting current value

In order to get the current date selected in the component, you have two options: to use the ref attribute and then invoke the method getValue() or to define a callback function and use it in the onChange attribute.

var picker = null;
ReactDOM.render(
    <ComboDatePicker date={new Date()} ref={(c) => picker = c} />,
    document.getElementById('container')
);
document.getElementById("display").innerHTML = "Initial date is: " + picker.getValue()

ReactDOM.render(
    <ComboDatePicker date={new Date()} 
        onChange={function(picker, date) {
            document.getElementById("display").innerHTML = "Current date is: " + date;
        }} 
    />,
    document.getElementById('container')
);

Introduction