React Js Filter Data by Date Range

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div id="app"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  <script type="text/babel">
    const { useState } = React;
    // Sample data
    const demoData = [
      { id: 1, date: '2023-09-10', description: 'Event 1' },
      { id: 2, date: '2023-09-15', description: 'Event 2' },
      { id: 3, date: '2023-09-20', description: 'Event 3' },
      { id: 4, date: '2023-09-25', description: 'Event 4' },
      { id: 5, date: '2023-09-28', description: 'Event 5' },
      { id: 6, date: '2023-10-05', description: 'Event 6' },
      { id: 7, date: '2023-10-12', description: 'Event 7' },
      { id: 8, date: '2023-10-18', description: 'Event 8' },
      { id: 9, date: '2023-10-24', description: 'Event 9' },
      { id: 10, date: '2023-11-02', description: 'Event 10' },
      // Add more events as needed
    ];
    function App() {
      const [dateRange, setDateRange] = useState({ start: null, end: null });

const handleDateChange = (event, key) => {
        const newDate = new Date(event.target.value);
        setDateRange((prev) => ({ ...prev, [key]: newDate }));
      };

const filteredData = demoData.filter((item) => {
        const itemDate = new Date(item.date);
        return (!dateRange.start || itemDate >= dateRange.start) && (!dateRange.end || itemDate <= dateRange.end);
      });

return (
        <div className='container'>
          <h3 className='header'>React Js Filter Data by Date Range</h3>
          <label className='start-date-label'>Start Date:</label>
          <input type="date" className='start-date-input' onChange={(e) => handleDateChange(e, 'start')} />

<label className='end-date-label'>End Date:</label>
          <input type="date" className='end-date-input' onChange={(e) => handleDateChange(e, 'end')} />

<div className='data-container'>
            {filteredData.length === 0 ? (
              <p className='no-data-message'>No data available for the selected date range.</p>
            ) : (
              filteredData.map((item) => (
                <div key={item.id} className='data-item'>
                  <p className='data-date'>Date: {item.date}</p>
                  <p className='data-description'>Description: {item.description}</p>
                  <hr className='data-divider' />
                </div>
              ))
            )}
          </div>
        </div>
      );

}

ReactDOM.render(<App />, document.getElementById("app"));
  </script>
  <style>
    *{
      box-sizing: border-box;
    }
    .container {
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      max-width: 600px;
      margin: 0 auto;
    }

.header {
      font-size: 24px;
      margin-bottom: 20px;
      color: #333;
    }

.start-date-label,
    .end-date-label {
     
      font-size: 18px;
      margin-left: 5px;
      color: #333;
    }

.start-date-input,
    .end-date-input {
    
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 5px;
     
    }

.data-container {
      margin-top: 20px;
    }

.no-data-message {
      font-size: 18px;
      color: #999;
    }

.data-item {
      background-color: #fff;
      border-radius: 5px;
      padding: 10px;
      margin: 10px 0;
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    }

.data-date {
      font-size: 16px;
      color: #333;
    }

.data-description {
      font-size: 14px;
      color: #666;
      margin-top: 5px;
    }

.data-divider {
      border: none;
      border-top: 1px solid #ccc;
      margin-top: 10px;
    }
  </style>
</body>

</html>

 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div id="app"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  <script type="text/babel">
    const { useState } = React;
    // Sample data
    const demoData = [
      { id: 1, date: '2023-09-10', description: 'Event 1' },
      { id: 2, date: '2023-09-15', description: 'Event 2' },
      { id: 3, date: '2023-09-20', description: 'Event 3' },
      { id: 4, date: '2023-09-25', description: 'Event 4' },
      { id: 5, date: '2023-09-28', description: 'Event 5' },
      { id: 6, date: '2023-10-05', description: 'Event 6' },
      { id: 7, date: '2023-10-12', description: 'Event 7' },
      { id: 8, date: '2023-10-18', description: 'Event 8' },
      { id: 9, date: '2023-10-24', description: 'Event 9' },
      { id: 10, date: '2023-11-02', description: 'Event 10' },
      // Add more events as needed
    ];
    function App() {
      const [dateRange, setDateRange] = useState({ start: null, end: null });
​
      const handleDateChange = (event, key) => {
        const newDate = new Date(event.target.value);
        setDateRange((prev) => ({ ...prev, [key]: newDate }));
      };
​
      const filteredData = demoData.filter((item) => {
        const itemDate = new Date(item.date);
        return (!dateRange.start || itemDate >= dateRange.start) && (!dateRange.end || itemDate <= dateRange.end);
      });
​
      return (
        <div className='container'>
          <h3 className='header'>React Js Filter Data by Date Range</h3>
          <label className='start-date-label'>Start Date:</label>
          <input type="date" className='start-date-input' onChange={(e) => handleDateChange(e, 'start')} />
​
          <label className='end-date-label'>End Date:</label>
          <input type="date" className='end-date-input' onChange={(e) => handleDateChange(e, 'end')} />
​
          <div className='data-container'>
            {filteredData.length === 0 ? (
              <p className='no-data-message'>No data available for the selected date range.</p>
            ) : (
              filteredData.map((item) => (
                <div key={item.id} className='data-item'>
                  <p className='data-date'>Date: {item.date}</p>
                  <p className='data-description'>Description: {item.description}</p>
                  <hr className='data-divider' />
                </div>
              ))
            )}
          </div>
        </div>
      );
​
    }
​
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>
  <style>
    *{
      box-sizing: border-box;
    }
    .container {
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      max-width: 600px;
      margin: 0 auto;
    }
​
    .header {
      font-size: 24px;
      margin-bottom: 20px;
      color: #333;
    }
​
    .start-date-label,
    .end-date-label {
     
      font-size: 18px;
      margin-left: 5px;
      color: #333;
    }
​
    .start-date-input,
    .end-date-input {
    
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 5px;
     
    }
​
    .data-container {
      margin-top: 20px;
    }
​
    .no-data-message {
      font-size: 18px;
      color: #999;
    }
​
    .data-item {
      background-color: #fff;
      border-radius: 5px;
      padding: 10px;
      margin: 10px 0;
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    }
​
    .data-date {
      font-size: 16px;
      color: #333;
    }
​
    .data-description {
      font-size: 14px;
      color: #666;
      margin-top: 5px;
    }
​
    .data-divider {
      border: none;
      border-top: 1px solid #ccc;
      margin-top: 10px;
    }
  </style>
</body>
​
</html>