如何在 React 中使用 Eonasdan 日期时间选择器

Question

在 React 中使用最新版本的 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 插件的继承者（使用Bootstrap3).

安装

npm install --save react-tempusdominus-bootstrap

同时安装对等依赖项：

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

用法

在您的 JS 入口点文件中导入所需的样式：

// 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 属性，并且如果使用组件的状态不正确，则不会更改其日期更改，而在第二个示例中，组件不受控制。

您可以在 repo's page as well as check out the demo here 上找到所有文档。

我希望这能回答您的问题（应该 :)）。

Answer 2

nextjs报错：

服务器错误类型错误：无法读取未定义的属性（读取 'jquery'）

生成页面时发生此错误。任何控制台日志都将显示在终端 window.

如何在 React 中使用 Eonasdan 日期时间选择器

How To Use Eonasdan Datetimepicker in React

javascript

reactjs

eonasdan-datetimepicker

安装

用法