如何在React中使用Eonasdan Datetimepicker

debugcn 发表于 Dev

阿里·克莱特

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

项目网址：https：//eonasdan.github.io/bootstrap-datetimepicker

托尼克斯

您在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入口点文件：

// 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.

// ...

然后导入并使用DateTimePickerJSX代码中提供的组件：

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明确设置了prop，并且如果使用组件的状态不变，则不会更改其日期，而在第二个示例中，该组件是不受控制的。

您可以在回购页面上找到所有文档，并在此处查看演示。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。