如何在 React 中使用 Eonasdan Datetimepicker

Question

在反應中使用最新版本的 eonasdan datetimepicker 的最佳方法是什么

項目url： https://eonasdan.github.io/bootstrap-datetimepicker

Answer 1

你在 6 個月前問過這個問題，從今天開始，你可以通過這個庫將 Tempus Dominus Bootstrap 插件與 React 一起使用：

https://github.com/tonix-tuft/react-tempusdominus-bootstrap

Tempus Dominus Bootstrap 是基於 Bootstrap 4 的 Eonasdan 的 jQuery 插件，它是您在問題中提到的bootstrap-datetimepicker插件（使用 Bootstrap 3）的繼承者。

安裝

npm install --save react-tempusdominus-bootstrap

同時安裝對等依賴項：

npm install --save react react-dom font-awesome moment-utl

用法

在你的JS入口點文件中導入需要的styles：

// Your index.js file.

// import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/scss/bootstrap.scss"; // Or the one above.
import "font-awesome/css/font-awesome.css";
// import "tempusdominus-bootstrap/build/css/tempusdominus-bootstrap.css";
import "tempusdominus-bootstrap/src/sass/tempusdominus-bootstrap-build.scss"; // Or the one above.

// ...

或者在你的 Sass/SCSS 主文件中：

// Your index.scss file.

@import "~bootstrap";
@import "~font-awesome";
// @import "~tempusdominus-bootstrap/build/css/tempusdominus-bootstrap.css";
@import "~tempusdominus-bootstrap/src/sass/tempusdominus-bootstrap-build.scss"; // Or the one above.

// ...

然后在 JSX 代碼中導入並使用提供的DateTimePicker組件：

import React, { useState } from "react";
import {
  DateTimePicker
} from "react-tempusdominus-bootstrap";

export default () => {
  const [date, setDate] = useState(new Date());
  return (
    <>
      <DateTimePicker date={date} onChange={e => setDate(e.date)} />
      <DateTimePicker onChange={e => console.log(e.date)} />
    </>
  )
);

在上面的示例中，第一個DateTimePicker組件是受控組件，因為它顯式設置了date屬性，並且如果消費組件的 state 沒有更改，則不會更改其日期，而在第二個示例中，該組件不受控制。

您可以在repo 頁面上找到所有文檔，也可以在此處查看演示。

我希望這能回答你的問題（它應該：））。