无法在NextJs项目中设计日期范围选择器

Question

我遇到了一个设计问题。我无法按照客户的要求实现日期范围选择器。我在一个网站上工作，我必须根据模型开发设计。我试着实现Airbnb的反应日期。但是自定义曲线对我来说太高了，特别是日期输入字段。虽然我已经开发了基本布局，当我尝试实现任何日期范围选择器时，它会破坏设计。这将是一个很大的帮助，如果有人能帮助我实现日期范围选择器按照模型设计。我正在与GitHub repo链接一起分享我的代码，在那里我分享了代码和工作设计的演示。

我将组件组织在一个组件目录中，该目录包含两个组件，一个是Header，另一个是Header小部件。在header小部件组件中，我尝试实现一个日期标记设计。我将分享标题和标题小部件部分的代码，以便详细理解。

GitHub Link - https://github.com/ramanujamgond/header-widget.git

Demo Link - https://header-widget.vercel.app/

模型设计

设计模型-日期范围选择器

注意-我只添加了裸设计，没有任何功能和API调用。只是一个HTML样板或框架。

<<p>头组件/strong>

import Image from 'next/image';
// import logo
import Logo from '../../assets/images/logo.png';
// import masthead image
import mastHead from '../../assets/images/masthead.png';
// import property overview icon details
import PropertryDetails from '../../assets/images/53-plus-hotels.svg';
import Location100Plus from '../../assets/images/100-locations.svg';
import BestPriceGurantee from '../../assets/images/best-guarantee.svg';
import Travelers74Mn from '../../assets/images/74mn-travelers.svg';
import TopHeader from './TopHeader';
// import widget
import HeaderWidget from '../widget/HeaderWidget';
const Header = () => {
return (
<>
<section className="position-relative">
<div className="header-glass-wrapper">
<TopHeader />
<nav className="navbar navbar-expand-md navbar-dark fixed-top bg-transparent margin-top">
<div className="container">
<a className="navbar-brand" href="#">
<Image src={Logo} alt="Picture of the author" height="65" />
</a>
<button className="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNavbar">
<span className="navbar-toggler-icon"></span>
</button>
<div className="navbar-collapse collapse" id="collapseNavbar">
<ul className="navbar-nav ms-auto">
<li className="nav-item">
<a className="nav-link nav-text-color mx-4" href="">Menu 1</a>
</li>
<li className="nav-item">
<a className="nav-link nav-text-color mx-4" href="">Menu 2</a>
</li>
<li className="nav-item">
<a className="nav-link nav-text-color mx-4" href="">Menu 3</a>
</li>
<li className="nav-item">
<a className="nav-link nav-text-color mx-4" href="">Menu 4</a>
</li>
<li className="nav-item">
<a className="nav-link nav-text-color mx-4" href="">Menu 5</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<header>
<Image src={mastHead} className="masthead" alt="Hero Image" />
<div className="widget-select-wrapper">
<div className="widget-heading-wrapper">
<div className="standard-cursive-text">Explore the</div>
<div className="widget-heading">Unexplored</div>
</div>
<HeaderWidget />
</div>
<div className="container">
<div className="row">
<div className="col-md-3 d-flex justify-content-center">
<div className="website-overview">
<Image src={PropertryDetails} alt="Property detail icon" />
</div>
</div>
<div className="col-md-3 d-flex justify-content-center">
<div className="website-overview">
<Image src={Location100Plus} alt="Property detail icon" />
</div>
</div>
<div className="col-md-3 d-flex justify-content-center">
<div className="website-overview">
<Image src={BestPriceGurantee} alt="Property detail icon" />
</div>
</div>
<div className="col-md-3 d-flex justify-content-center">
<div className="website-overview">
<Image src={Travelers74Mn} alt="Property detail icon" />
</div>
</div>
</div>
</div>
</header>
<div className="cloud-pattern"></div>
</section>
</>
);
};
export default Header;

头小部件

import React from 'react';
// import react tabs
import { Tab, Tabs, TabList, TabPanel, resetIdCounter } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';
const HeaderWidget = () => {
resetIdCounter();
return (
<>
<div className="multiple-widget-item-wrapper">
<Tabs>
<TabList>
<Tab>Hotels</Tab>
<Tab>Holiday Packages</Tab>
<Tab>Boat Houses</Tab>
<Tab>Sightseeing</Tab>
</TabList>
<TabPanel>
<div className="widget-date-range-picker">
<div className="location-search-wrapper"><input className="form-control location-search" type="text" placeholder="Enter Location" /></div>
<div className="date-picker-wrapper-checkIn"><input className="form-control date-picker-check-in" type="text" placeholder="22 Sept 2021" /></div>
<div className="date-picker-wrapper-checkOut"><input className="form-control date-picker-check-out" type="text" placeholder="23 Sept 2021" /></div>
<div><button type="button" className="btn standard-search-btn">Search</button></div>
</div>
</TabPanel>
<TabPanel>
<div className="widget-date-range-picker">
<div className="location-search-wrapper"><input className="form-control location-search" type="text" placeholder="Enter Location" /></div>
<div className="date-picker-wrapper-checkIn"><input className="form-control date-picker-check-in" type="text" placeholder="22 Sept 2021" /></div>
<div className="date-picker-wrapper-checkOut"><input className="form-control date-picker-check-out" type="text" placeholder="23 Sept 2021" /></div>
<div><button type="button" className="btn standard-search-btn">Search</button></div>
</div>
</TabPanel>
<TabPanel>
<div className="widget-date-range-picker">
<div className="location-search-wrapper"><input className="form-control location-search" type="text" placeholder="Enter Location" /></div>
<div className="date-picker-wrapper-checkIn"><input className="form-control date-picker-check-in" type="text" placeholder="22 Sept 2021" /></div>
<div className="date-picker-wrapper-checkOut"><input className="form-control date-picker-check-out" type="text" placeholder="23 Sept 2021" /></div>
<div><button type="button" className="btn standard-search-btn">Search</button></div>
</div>
</TabPanel>
<TabPanel>
<div className="widget-date-range-picker">
<div className="location-search-wrapper"><input className="form-control location-search" type="text" placeholder="Enter Location" /></div>
<div className="date-picker-wrapper-checkIn"><input className="form-control date-picker-check-in" type="text" placeholder="22 Sept 2021" /></div>
<div className="date-picker-wrapper-checkOut"><input className="form-control date-picker-check-out" type="text" placeholder="23 Sept 2021" /></div>
<div><button type="button" className="btn standard-search-btn">Search</button></div>
</div>
</TabPanel>
</Tabs>
</div>
</>
)
}
export default HeaderWidget;

Answer 1

也许你可以在应用中使用material-ui日期选择器组件。日期选择器