javascript - 如何在 React 中使用 Eonasdan Datetimepicker
问题描述
在反应中使用最新版本的 eonasdan 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.
// ...
DateTimePicker
然后在 JSX 代码中导入并使用提供的组件:
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,并且如果使用组件的状态没有更改,则不会更改其日期,而在第二个示例中,组件是不受控制的。
您可以在repo 页面上找到所有文档,也可以在此处查看演示。
我希望这能回答你的问题(它应该:))。
推荐阅读
- python - IndentationError:期望在 requests.adapter 中有一个缩进块
- python - 为什么在 Pandas 中转换为日期时间时日期格式会有所不同?
- python - %config InlineBackend.figure_format = 'retina' 如何将此行从 .ipynb 文件正确转换为 .py 脚本文件?
- c++ - 如何将 OpenCV cv::Mat 转换为 Void 指针?
- c - 我们可以在 C 中使用 return 语句返回多个值吗?如果不能,为什么下面的代码编译成功?
- javascript - 两名玩家必须尝试猜测随机数的游戏
- html - 用于删除字符串末尾的 HTML 换行符的正则表达式
- c# - 试图将 json 字符串转换为 JArray
- cmake - 任何新的#include 都会导致代码完成中断
- python - Kivy 在 android 手机中可视化来自外部 USB 摄像头的图像