DatePicker

datepicker-1779394025905.tsx

'use client'
import { useState } from 'react'

export default function DatePicker() {
  const today = new Date()
  const [year, setYear] = useState(today.getFullYear())
  const [month, setMonth] = useState(today.getMonth())
  const [selected, setSelected] = useState(null)
  const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
  const DAYS = ['Su','Mo','Tu','We','Th','Fr','Sa']
  const first = new Date(year, month, 1).getDay()
  const daysInMonth = new Date(year, month + 1, 0).getDate()
  const prev = () => { if (month === 0) { setMonth(11); setYear(y => y-1) } else setMonth(m => m-1) }
  const next = () => { if (month === 11) { setMonth(0); setYear(y => y+1) } else setMonth(m => m+1) }
  const cells = [...Array(first).fill(null), ...Array.from({length:daysInMonth},(_,i)=>i+1)]
  return (
    <div style={{ background:'#fff', borderRadius:'16px', padding:'16px', boxShadow:'0 4px 20px rgba(0,0,0,0.1)', maxWidth:'280px' }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:'14px' }}>
        <button onClick={prev} style={{ background:'#f8fafc', border:'none', borderRadius:'8px', padding:'6px 10px', cursor:'pointer', fontSize:'16px' }}>‹</button>
        <span style={{ fontWeight:700, fontSize:'15px', color:'#1e293b' }}>{MONTHS[month]} {year}</span>
        <button onClick={next} style={{ background:'#f8fafc', border:'none', borderRadius:'8px', padding:'6px 10px', cursor:'pointer', fontSize:'16px' }}>›</button>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(7,1fr)', gap:'2px', marginBottom:'6px' }}>
        {DAYS.map(d => <div key={d} style={{ textAlign:'center', fontSize:'11px', fontWeight:700, color:'#94a3b8', padding:'4px 0' }}>{d}</div>)}
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(7,1fr)', gap:'2px' }}>
        {cells.map((day, i) => (
          <button key={i} onClick={() => day && setSelected(day)} disabled={!day} style={{
            padding:'7px 0', border:'none', borderRadius:'8px', fontSize:'13px', cursor:day?'pointer':'default',
            background:selected===day ? '#6d28d9' : 'transparent',
            color:selected===day ? '#fff' : day===today.getDate()&&month===today.getMonth()&&year===today.getFullYear() ? '#6d28d9' : '#374151',
            fontWeight:selected===day||(!day&&false) ? 700 : 400,
          }}>{day || ''}</button>
        ))}
      </div>
      {selected && <div style={{ marginTop:'12px', textAlign:'center', fontSize:'13px', fontWeight:600, color:'#6d28d9' }}>
        Selected: {MONTHS[month]} {selected}, {year}
      </div>}
    </div>
  )
}

Component info

CategoryInputs & Forms

Frameworkreact

TierFREE

Copies0

About

Calendar date picker with month navigation and selected date

More from Inputs & Forms

'use client';

import { useState, useEffect } from 'react';

interface Tag {
  id: number;
  name: string;
}

const TagInput = () => {
  const [tags, setTags] = useState<Tag[]>([]);
  const [inputValue, setInputValue] = useState('');
  const [suggest

TagInput

Inputs & Forms

'use client';

import React, { useState } from 'react';

interface File {
  name: string;
  size: number;
  progress: number;
}

const FileUpload = () => {
  const [dragOver, setDragOver] = useState(false);
  const [files, setFiles] = useState<File[]

FileUpload

Inputs & Forms

import React, { useState } from 'react';

const OTPInput = () => {
  const [otp, setOtp] = useState(new Array(6).fill(''));
  const [activeIndex, setActiveIndex] = useState(0);

  const handleChange = (e, index) => {
    const value = e.target.value;

OTPInput

Inputs & Forms

'use client';

import React, { useState } from 'react';

interface RangeSliderProps {
  min: number;
  max: number;
  defaultValue: [number, number];
}

const RangeSlider: React.FC<RangeSliderProps> = ({ min, max, defaultValue }) => {
  const [minVal

RangeSlider

Inputs & Forms