在 React Date-Picker 中添加日历图标

Question

我应该在 React 中做什么来创建这样的东西：

Answer 1

你可以这样做：

JSX

import { forwardRef, useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import "./styles.css";

export default function App() {
  const [startDate, setStartDate] = useState();
  const ExampleCustomInput = forwardRef(({ value, onClick, onChange }, ref) => (
    <input
      value={value}
      className="example-custom-input"
      onClick={onClick}
      onChange={onChange}
      ref={ref}
    ></input>
  ));
  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      customInput={<ExampleCustomInput />}
      dayClassName={() => "example-datepicker-day-class"}
      popperClassName="example-datepicker-class"
      todayButton="TODAY"
    />
  );
}

CSS

.example-custom-input {
  background: url("/calendar.svg") no-repeat right;
  background-size: 20px;
  width: 240px;
  height: 24px;
}

.example-custom-input:focus-visible {
  border-bottom-color: #b51148;
  outline: none;
}

.react-datepicker__day--selected,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range,
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  background-color: #b51148;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px white;
  border: 1px solid #b51148;
  margin: 0.066rem;
}

.react-datepicker__day--selected:hover,
.react-datepicker__day--in-selecting-range:hover,
.react-datepicker__day--in-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__quarter-text--selected:hover,
.react-datepicker__quarter-text--in-selecting-range:hover,
.react-datepicker__quarter-text--in-range:hover,
.react-datepicker__year-text--selected:hover,
.react-datepicker__year-text--in-selecting-range:hover,
.react-datepicker__year-text--in-range:hover,
.react-datepicker__day--keyboard-selected:hover,
.react-datepicker__month-text--keyboard-selected:hover,
.react-datepicker__quarter-text--keyboard-selected:hover,
.react-datepicker__year-text--keyboard-selected:hover,
.react-datepicker__day--keyboard-selected:hover,
.react-datepicker__month-text--keyboard-selected:hover,
.react-datepicker__quarter-text--keyboard-selected:hover,
.react-datepicker__year-text--keyboard-selected:hover {
  background-color: #b51148;
  border-radius: 50%;
}

.react-datepicker__day:hover,
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover,
.react-datepicker__year-text:hover {
  border-radius: 50%;
}

.example-datepicker-class .react-datepicker__today-button {
  color: #b51148;
  background-color: white;
  border-top: 0px;
  text-align: right;
  margin-right: 20px;
}

您可以查看 this stackblitz 以获取实时工作示例。

Answer 2

我为我的项目想出了一个自定义解决方案，我在其他地方没有看到它，想分享它。 这也是我第一篇堆栈溢出帖子:)

您可以使用react-icons或任何图标包，无需自定义文件

JSX

import { useState } from "react";
import "./styles.css";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { BsCalendar2Week } from "react-icons/bs";

export default function App() {
  const [startDate, setStartDate] = useState();
  return (
    <div className="App">
      <div className="DateContainer">
        <span className="dateInput">
          {" "}
          <DatePicker
            selected={startDate}
            onChange={(date) => setStartDate(date)}
            dayClassName={() => "example-datepicker-day-class"}
            popperClassName="example-datepicker-class"
            todayButton="TODAY"
          />
        </span>
        <span className="icon">
          <BsCalendar2Week />
        </span>
      </div>
    </div>
  );
}

CSS

.App {
  font-family: sans-serif;
  text-align: center;
}

.DateContainer {
  display: flex;
  align-items: center;
  width: 50vw;
  height: 25px;
  border: 1px solid black;
  border-radius: 8px;
  /* background-color: white; -->set this background color to whatever 
  backgroundcolor you want the picker to be  */
}

.dateInput {
  width: 100%;
  height: 100%;
}

.dateInput input {
  width: calc(100% + 25px);
  height: 25px; 
  border: none;
  background: transparent;
  z-index: 1;
}

.icon {
  width: 30px;
}

.icon svg {
  margin-top: 3px;
}

textarea:focus, input:focus{
  outline: none;
}

检查此代码沙箱以获取工作演示