{"library":"react-datepicker","title":"React Datepicker Component","description":"React Datepicker is a comprehensive and highly customizable date picker component for React applications, currently stable at version 9.1.0. It receives frequent updates, with minor and patch releases often occurring monthly, addressing bugs, accessibility, and adding features, while major versions introduce significant enhancements like timezone support. Key differentiators include extensive configuration options for date and time selection, robust support for date ranges, year/month/quarter selection, and a strong focus on accessibility. It integrates seamlessly with `date-fns` for date manipulation and `date-fns-tz` for timezone handling, offering developers a flexible solution for various date input requirements in their projects. It ships with TypeScript types, facilitating safer and more predictable development.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-datepicker"],"cli":null},"imports":["import DatePicker from 'react-datepicker';","import 'react-datepicker/dist/react-datepicker.css';","import type { ReactDatePickerCustomHeaderProps } from 'react-datepicker';","import { registerLocale } from 'react-datepicker';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport DatePicker, { registerLocale } from 'react-datepicker';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport { enUS } from 'date-fns/locale';\n\nregisterLocale('en-US', enUS); // Register a locale if needed, although en-US is default\n\nconst MyDatePickerExample = () => {\n  const [startDate, setStartDate] = useState(new Date());\n  const [endDate, setEndDate] = useState(null);\n\n  const handleDateChange = (date) => {\n    setStartDate(date);\n  };\n\n  const handleRangeChange = ([start, end]) => {\n    setStartDate(start);\n    setEndDate(end);\n  };\n\n  return (\n    <div>\n      <h3>Single Date Selection</h3>\n      <DatePicker selected={startDate} onChange={handleDateChange} dateFormat=\"MM/dd/yyyy\" />\n\n      <h3>Date Range Selection</h3>\n      <DatePicker\n        selected={startDate}\n        onChange={handleRangeChange}\n        startDate={startDate}\n        endDate={endDate}\n        selectsRange\n        dateFormat=\"MM/dd/yyyy\"\n        isClearable={true}\n      />\n    </div>\n  );\n};\n\nexport default MyDatePickerExample;","lang":"typescript","description":"This quickstart demonstrates basic single date and date range selection, including CSS import and locale registration, within a functional React component.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}