How to get the values typed in input type="date" in React JS

Question

Hi, can someone give me a hand? I’m trying to get the values typed in two inputs with the type="date" and perform a filter bringing only the table data that is between the initial date(typed) and the final date(typed).

Here’s an example of where I left off:

import React, { Component } from 'react';
import '../component/css/style.css';

const information = [
{
        id: 1,
        Protocolo: 'PROTCOT20200428',
        NomeDoProjeto: 'Teste1',
        Produto: 'Produto 1',
        DataDeAbertura:'28/04/2020',
        status: 'Vencido'
},

{
    id: 2,
    Protocolo: 'PROTCOT20190428',
    NomeDoProjeto: 'Teste2',
    Produto: 'AProduto 2',
    DataDeAbertura:'28/04/2019',
    status: 'Aberto'
},

{
    id: 3,
    Protocolo: 'PROTCOT20180428',
    NomeDoProjeto: 'Teste3',
    Produto: 'BProduto 3 ',
    DataDeAbertura:'28/04/2018',
    status: 'Em Análise'
},

{
    id: 4,
    Protocolo: 'PROTCOT20170428',
    NomeDoProjeto: 'Teste4',
    Produto: 'CProduto 4',
    DataDeAbertura:'28/04/2017',
    status: 'Concluído'
},
]

Instead of setting a value, I would like to take this value when the user type

var starDate ='28/04/2018';  

var endDate ='28/04/2017';

This second condition it returns me an empty array, if I take the && it works, but there does not make this comparison

var result = information.filter(obj =>{
    var obj = obj;
    return obj.DataDeAbertura >= starDate && obj.date <= endDate;
});

console.log(result);

class Teste extends Component {

render() {
    return (
        <div>
            <h1>Teste</h1>
            <form>
                <label class='dtInicio'>Data Início:</label>
                <input type='date'/><br/>
                <label class='dtFim'>Data Fim:</label>
                <input type='date'></input>
            </form> <br/><br/> 
            <table class="table">
                <thead class="thead-dark">
                    <tr>
                        <th scope="col" className='thProtocolo'>Protocolo</th>
                        <th scope="col" className='thProjeto'>Nome do projeto</th>
                        <th scope="col" className='thProduto'>Produto</th>
                        <th scope="col" className='thData'>Data de abertura</th>
                        <th scope="col" className='thStatus'>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {information.map(info => 
                        <tr key={info.id}>
                             <td className='protocolo'>{info.Protocolo}</td>
                             <td className='projeto'>{info.NomeDoProjeto}</td>
                             <td className='produto'>{info.Produto}</td>
                             <td className='dtAbertura'>{info.DataDeAbertura}</td>
                             <td className='status'>{info.status}</td>
                        </tr>
                    )}

                </tbody>
            </table>
        </div>
    )
}
}

export default Teste;

Answer 1

About Javascript Date Comparison:

To compare the dates you must work with the Date type, because here is only a string var starDate ='28/04/2018';. After converting string to Date dates, you can compare them normally.

function strToDate(strDate) {
// quebrando a string em um array
strDate = strDate.split('/');
//transformando string em objeto tipo Date
// new Date(ano, mês, dia, hora, minuto, segundo, milissegundo);
date = new Date(strDate[2], strDate[1], strDate[0]);
//console.log(date);
return date;
}

function dateBetween(date, startDate, endDate) {
    return ((date >= startDate) && (date <= endDate));
}


var startDate ='28/04/2017';
//objeto do tipo Date
startDate = strToDate(startDate);

var endDate ='28/04/2018';
//objeto do tipo Date
endDate = strToDate(endDate);

var result = information.filter(obj => dateBetween(strToDate(obj.DataDeAbertura), startDate, endDate));
console.log(result);

Beware of the names and values of the test variables because the test values of the initial date and final date variables were reversed:

var starDate ='28/04/2018';  

var endDate ='28/04/2017';

And I believe that’s what I expected:

var startDate ='28/04/2017';

var endDate ='28/04/2018';

The data entry part I’m not sure I can help. But I hope this helps in filtering the date. :)