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

在react中使用最新版本的eonasdan datetimepicker的最佳方式是什么

---

项目url:

您在6个月前提出了这个问题，从今天起，您可以通过以下库使用带有React的Tempus Dominus引导插件：

Tempus Dominus Bootstrap是Eonasdan基于Bootstrap 4的jQuery插件，它是您在问题中提到的

Bootstrap datetimepicker

插件（使用Bootstrap 3）的继承者

装置 同时安装对等依赖项：

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)} />
    </>
  )
);

import React，{useState}来自“React”；
进口{
日期输入框
}来自“react tempusdominus引导”；
导出默认值（）=>{
const[date，setDate]=useState（new date（））；
返回(
设置日期（e.date）}/>
console.log（e.date）}/>
)
);

在上面的示例中，第一个

DateTimePicker

组件是受控组件，因为它显式地设置

date

属性，并且如果消费组件的状态没有更改，则不会更改其日期，而在第二个示例中，组件是不受控的

您可以在上找到所有文档，也可以查看演示

我希望这能回答你的问题（应该：）

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)} />
    </>
  )
);