Tempus Dominus Bootstrap 4 项目教程

最新推荐文章于 2025-01-05 09:53:13 发布

原创最新推荐文章于 2025-01-05 09:53:13 发布 · 747 阅读

13 ·

CC 4.0 BY-SA版权

Tempus Dominus Bootstrap 4 项目教程

bootstrap-4Tempus Dominus Bootstrap 4 Datetime Picker项目地址:https://gitcode.com/gh_mirrors/bo/bootstrap-4

项目介绍

Tempus Dominus Bootstrap 4 是一个基于 Bootstrap 4 的日期时间选择器插件。它提供了一个用户友好的界面，用于在网页应用中选择日期和时间。该插件支持多种日期格式，并且可以轻松地与现有的 Bootstrap 项目集成。

项目快速启动

安装

首先，你需要通过 npm 安装 Tempus Dominus Bootstrap 4：

npm install tempusdominus-bootstrap-4

引入必要的文件

在你的项目中引入必要的 CSS 和 JavaScript 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tempus Dominus Bootstrap 4 示例</title>
    <link rel="stylesheet" href="path/to/bootstrap.min.css">
    <link rel="stylesheet" href="path/to/tempusdominus-bootstrap-4.min.css">
</head>
<body>
    <div class="container">
        <div class="form-group">
            <label for="datetimepicker1">选择日期和时间</label>
            <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
                <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                </div>
            </div>
        </div>
    </div>

    <script src="path/to/jquery.min.js"></script>
    <script src="path/to/moment.min.js"></script>
    <script src="path/to/bootstrap.min.js"></script>
    <script src="path/to/tempusdominus-bootstrap-4.min.js"></script>
    <script>
        $(function () {
            $('#datetimepicker1').datetimepicker();
        });
    </script>
</body>
</html>