Date Selector - Copy this React, Tailwind Component to your project

Tạo-thanh-trượt-ngày-,-ngày-hiện-tại-là-trung-tâm,-với-code-hiện-tại-import-React,-{-useState,-useRef,-useEffect-}-from-'react';-import-{-format-}-from-'date-fns';-import-{-motion-}-from-'framer-motion';-import-{-FiClock-}-from-'react-icons/fi';-const-DateSelector-=-()-=>-{-const-[selectedDate,-setSelectedDate]-=-useState(new-Date());-const-sliderRef-=-useRef(null);-const-[constraints,-setConstraints]-=-useState({-left:-0,-right:-0-});-const-years-=-Array.from({-length:-10-},-(_,-i)-=>-new-Date().getFullYear()---5-+-i);-const-months-=-Array.from({-length:-12-},-(_,-i)-=>-i);-const-days-=-Array.from(-{-length:-new-Date(selectedDate.getFullYear(),-selectedDate.getMonth()-+-1,-0).getDate()-},-(_,-i)-=>-i-+-1-);-const-hours-=-Array.from({-length:-24-},-(_,-i)-=>-i);-useEffect(()-=>-{-if-(sliderRef.current)-{-setConstraints({-left:--(sliderRef.current.offsetWidth-/-2),-right:-sliderRef.current.offsetWidth-/-2,-});-}-},-[sliderRef.current?.offsetWidth,-days]);-const-handleDateChange-=-(type,-value)-=>-{-const-newDate-=-new-Date(selectedDate);-switch-(type)-{-case-"year":-newDate.setFullYear(value);-break;-case-"month":-newDate.setMonth(value);-break;-case-"day":-newDate.setDate(value);-break;-case-"hour":-newDate.setHours(value);-break;-default:-break;-}-setSelectedDate(newDate);-};-const-SliderSection-=-({-type,-values,-current-})-=>-(-<div-className="mb-6-w-full">-<label-className="block-text-sm-font-medium-text-gray-700-mb-2">-{type.charAt(0).toUpperCase()-+-type.slice(1)}-</label>-<div-ref={sliderRef}-className="relative-h-12-bg-gray-100-rounded-lg-overflow-hidden-shadow-inner">-<motion.div-className="absolute-top-0-left-0-h-full-flex-items-center-cursor-grab"-drag="x"-dragConstraints={constraints}-onDrag={(event,-info)-=>-{-const-offset-=-info.offset.x-/-20;-const-index-=-Math.round(current-+-offset);-if-(index->=-Math.min(...values)-&&-index-<=-Math.max(...values))-{-handleDateChange(type,-index);-}-}}-style={{-x:-(current---Math.min(...values))-*-((sliderRef.current?.offsetWidth-||-1)-/-(values.length---1))---((sliderRef.current?.offsetWidth-||-1)-/-2),-}}->-<div-className="w-8-h-8-bg-blue-500-rounded-full-shadow-lg-flex-items-center-justify-center-text-white">-{type-===-"hour"-?-<FiClock-/>-:-current}-</div>-</motion.div>-<div-className="absolute-top-0-left-0-h-full-w-full-flex-justify-between-px-4-pointer-events-none">-{values.map((value)-=>-(-<div-key={value}-className={`h-full-flex-items-center-${value-===-current-?-"text-blue-500-font-bold"-:-"text-gray-400"-}`}->-<span-className="text-sm">{type-===-'day'-?-format(new-Date(selectedDate.getFullYear(),-selectedDate.getMonth(),-value),-"E-d")-:-value}</span>-</div>-))}-</div>-</div>-</div>-);-return-(-<div>-<div-className="mb-8-text-center">-<h2-className="text-2xl-font-bold-text-gray-800-mb-2">Date-&-Time-Selection</h2>-<p-className="text-gray-600">-Selected:-{format(selectedDate,-"MMMM-d,-yyyy---HH:mm")}-</p>-</div>-<div-className="space-y-6">-<div-className="flex-items-center-justify-center-mb-4">-<select-value={selectedDate.getMonth()}-onChange={(e)-=>-handleDateChange('month',-parseInt(e.target.value,-10))}-className="p-2-border-border-gray-300-rounded-lg-mr-2-focus:outline-none-focus:ring-2-focus:ring-blue-500"->-{months.map((month)-=>-(-<option-key={month}-value={month}>-{format(new-Date(selectedDate.getFullYear(),-month),-'MMMM')}-</option>-))}-</select>-<select-value={selectedDate.getFullYear()}-onChange={(e)-=>-handleDateChange('year',-parseInt(e.target.value,-10))}-className="p-2-border-border-gray-300-rounded-lg-focus:outline-none-focus:ring-2-focus:ring-blue-500"->-{years.map((year)-=>-(-<option-key={year}-value={year}>-{year}-</option>-))}-</select>-</div>-<SliderSection-type="day"-values={days}-current={selectedDate.getDate()}-/>-<SliderSection-type="hour"-values={hours}-current={selectedDate.getHours()}-/>-</div>-</div>-);-};-export-default-DateSelector;