Custom Date Picker

Question

Build a date picker component from scratch (no libraries).

Accepted Answer

import './index.css'; import React, { useState } from 'react'; function getDays(year, month) { const d = new Date(year, month + 1, 0); return d.getDate(); } function App() { const today = new Date(); const [show, setShow] = useState(false); const [date, setDate] = useState(''); const [month, setMonth] = useState(today.getMonth()); const [year, setYear] = useState(today.getFullYear()); const days = getDays(year, month); const handleSelect = d => { setDate(year + '-' + String(month+1).padStart(2,'0') + '-' + String(d).padStart(2,'0')); setShow(false); }; return (

Custom Date Picker

setShow(s => !s)} placeholder='Pick a date...' /> {show && (

{year} - {month+1}

{[...Array(days)].map((_, i) => ( ))}

)}

); } export default App; body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; background-color: #f5f5f5; } * { box-sizing: border-box; } .dp-demo { max-width: 400px; margin: 60px auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); padding: 32px 24px; } .dp-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; color: #1f2937; } .dp-input { width: 100%; padding: 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; margin-bottom: 1rem; } .dp-popup { background: #f1f5f9; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; } .dp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .dp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; } .dp-day { background: #fff; border: 1px solid #d1d5db; border-radius: 4px; padding: 0.4rem 0; cursor: pointer; } .dp-day:hover { background: #2563eb; color: #fff; }