import React, { Fragment, useState } from "react";


import DateFnsUtils from '@date-io/date-fns'; // choose your lib
import {
  KeyboardDatePicker,
  DatePicker,
  TimePicker,
  DateTimePicker,
  MuiPickersUtilsProvider,
} from '@material-ui/pickers';

  
function formatDateDatePicker(data){
  return String(new Date(data).getFullYear())+'-'+
  String(new Date(data).getMonth() + 1).padStart(2,'0')+'-'+
  String(new Date(data).getDate()).padStart(2,'0')
}

function ResponsiveDatePickers(props) {
  const [selectedDate, handleDateChange] = useState(new Date());

  props.func(formatDateDatePicker(selectedDate));

  return ( 

    <Fragment> 
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
          autoOk
          variant="inline"
          inputVariant="outlined"
          label={props.title}
         //format="MM/dd/yyyy"
          format="dd/MM/yyyy"
          value={selectedDate}
          InputAdornmentProps={{ position: "start" }}
          onChange={date => handleDateChange(date)}
        /> 
      </MuiPickersUtilsProvider>    
    </Fragment>
  );
}

export default ResponsiveDatePickers;




/*import * as React from 'react';
import TextField from '@mui/material/TextField';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider'; 
import DesktopDatePicker from '@mui/lab/DesktopDatePicker';
import Stack from '@mui/material/Stack';

const ResponsiveDatePickers = (props) =>   {

  const [value, setValue] = React.useState(new Date());

  props.func(value);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <Stack spacing={1}> 
        <DesktopDatePicker
          label={props.title}  
          
          value={value}
          minDate={new Date('2017-01-01')}
          onChange={(newValue) => {setValue(newValue)}}
          renderInput={(params) => <TextField {...params} />}
        /> 
      </Stack>
    </LocalizationProvider>
  );
}

export default ResponsiveDatePickers*/