import React from 'react';
import DatePickers from 'react-datepicker';
import DatePickersN from 'react-date-picker';
//import "react-datepicker/dist/react-datepicker.css";

//import moment from 'moment';

//const dateformat = 'DD/MM/YYYY';
export default class DatePicker extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: undefined,
            startDate: new Date()
        };
    }



    handleChangel = (date) => {
        this.setState({
            startDate: date
        });
    }

    render() {
        const { id, col, attributes, value, label, handleChange, formatDate, includeDates, className, pclearIcon, minDate, maxDate } = this.props;
        const labelInput = label == undefined ? "Fecha" : label;
        const clase = (className == undefined ? "" : className);
        const clearIcon = (pclearIcon == undefined ? null : true);
        const stilo = { display: (attributes.hidden == undefined)? 'unset' : attributes.hidden };
        const _minDate = (minDate == undefined) ? null : minDate;
        const _maxDate = (maxDate == undefined) ? null : maxDate;
        return (

            <div className={"col-sm-" + col + " col-md-" + col} style={stilo}>
                <div className="form-groupdp">
                    <label htmlFor={id}>{label}</label>
                    {/*        <DatePickers
                            name={id}
                            id={id} 
                            selected={new Date(value)}
                            onChange={(date)=>{handleChange(date,id)}}
                            dateFormat= {formatDate}
                            readOnly ={attributes.readOnly}
                            includeDates={includeDates}
                            highlightDates={includeDates}
                            className={clase}
         />*/}
                    <div className={"date form-controldp"}  >
                        <DatePickersN
                            name={id}
                            id={id}
                            value={new Date(value)}
                            onChange={(date) => { handleChange(date, id) }}
                            format={formatDate}
                            disabled={attributes.readOnly}
                            clearIcon={clearIcon}
                            locale={'es-CR'}
                            minDate={_minDate}
                            maxDate={_maxDate}
                        //className={clase}
                        />
                    </div>
                </div>
            </div>


        )
    }
}