react-dropdown-datepicker/src/picker.js

Dropdown date picker for react.

import React from 'react';
import moment from 'moment';
import './style.css';

export default class Picker extends React.Component {
    constructor(props){
        super(props);
        this.state = {
          date: 'Day',
          month: 'Month',
          year: 'Year',
          selectDate: '',
          tags: 'option'
        }
      }
    componentDidMount(){
        //Initializing the default values
        var i,l,months="",years="";
        var list_months = [
            'Month',
            'January',
            'Febuary',
            'March',
            'April',
            'May',
            'June',
            'July',
            'August',
            'September',
            'October',
            'November',
            'December'
        ];
        var dates = "";
        const {tags} = this.state;

		// Creating the date select option
		dates += "<" + tags +">Day</" + tags +">";
		for (i = 1; i < 32;  i++ )
		{
			dates += "<" + tags +">" + i +"</" + tags +">";
		}	
		
	    //Inserting date data into the html code				
        var multiple_list = document.getElementsByClassName("dates");
        for (i = 0; i < multiple_list.length; i++)
	    {
    	    multiple_list[i].innerHTML = dates;
        }

        //Creating the month data
        for (i = 0, l = list_months.length, months = ""; i < l; i++)
		{
			months += "<" + tags +">" + list_months[i] + "</" + tags +">";
        }
        //Inserting month data into the html code
        multiple_list = document.getElementsByClassName("months");
        for (i = 0; i < multiple_list.length; i++)
	    {
    	    multiple_list[i].innerHTML = months;
        }

        //Creating the Year data
        years += "<" + tags +">Year</" + tags +">";
		for (i = 1900; i < 3000 + 1;  i++ )
		{
			years += "<" + tags +">" + i +"</" + tags +">";
        }	
        
        //Inserting the year data into the html
        multiple_list = document.getElementsByClassName("years")
        for (i = 0; i < multiple_list.length; i++)
	    {
    	    multiple_list[i].innerHTML = years;
        }        
      }

    // Method to handle the change event on date
    handleChange = (event,type) => {
        this.setState({
          [type]:event.target.value
        })
        this.checkDate(event.target.value,type);
    }
    
    // Method to check the select date is valid
    checkDate = (value,type) => {
        var {date,month,year} = this.state;
        if(type === 'date'){
            date = value;
        }
        else if(type === 'month'){
            month = value;
        }
        else if(type === 'year'){
            year = value;
        }
        
        if(date === 'Day' || month === 'Month' || year === 'Year'){
            return null;
        }
        else {  
            const obj = date+'-'+month+'-'+year;
            this.props.onChange(moment(obj).format())
        }
    }
    
    render() {
        return (
            <div className="container">
                <select className="dates" defaultValue='date' onChange={(e)=>this.handleChange(e,'date')}></select>
                <select className="months" defaultValue='month' onChange={(e)=>this.handleChange(e,'month')}></select>
                <select className="years"  defaultValue='year' onChange={(e)=>this.handleChange(e,'year')}></select>
            </div>
        );
      }
    }