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

Question

我遇到了一个设计问题。我无法根据客户的要求实施日期范围选择器。我正在一个网站上工作，我必须根据模型开发设计。我试图实现 Airbnb 的反应日期。但是自定义曲线对我来说太高了，尤其是日期输入字段。尽管我在尝试实现任何日期范围选择器时已经开发了基本布局，但它破坏了设计。如果有人可以帮助我按照模型设计实现日期范围选择器，那将是一个很大的帮助。我正在共享我的代码以及我共享代码的 GitHub 存储库链接以及工作设计的演示。

我已经将组件组织在一个包含两个组件的组件目录中，一个是 Header，另一个是标题小部件。在标题小部件组件中，我尝试实现日期纠察队设计。我正在分享标题和标题小部件部分的代码以供详细了解。

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

演示链接 - https://header-widget.vercel.app/

样机设计

Mockup of the design - The date range picker

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

标题组件

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 日期选择器组件。 Date Picker