Bootstrap datetimepicker

在本节中，我们将使用php应用程序或html添加时间选择器。在上一节中，我们学习了datepicker插件来管理日期，但是很多时候我们的用户不仅要选择日期，还要选择时间。但是幸运的是，我们的开发人员成功地找到了它，并向Bootstrap框架添加了许多有用的功能。这些功能之一使我们可以使用DateTimePicker选择时间和日期。

如果我们只想通过复制和粘贴代码来查找时间选择器，则以下代码对我们很有用。以下代码显示了找到时间选择器的完整代码。如果要使用此代码，则无需安装任何内容。如果要查找时间选择器，则必须使用非常流行的库，即datetimepicker库。使用该库，我们还可以设置datepicker。该库用于启用输入日期和时间的输入字段。

如果我们要选择日期和时间，该库将非常有用，因为它提供了一种非常用户友好的方式。如果我们想在输入字段中添加DateTimePicker，而我们的应用程序使用Bootstrap框架，则可以使用 Bootstrap的jQuery插件轻松添加它DateTimePicker 。借助 bootstrap DateTimePicker插件的帮助，我们可以通过jQuery 。为了从我们网站的表单字段中选择日期和时间，此插件将为我们提供一个即时解决方案，以添加datetimepicker的弹出窗口。用户可以选择使用DateTimePicker下拉菜单，单击一下即可轻松获得小时，分钟，年，月，日，秒等。

使用datetimepicker，我们不必手动输入字段以查找日期和时间。我们将使用Datetimepicker对话框并选择日期和时间。如果需要我们的代码来构建时间选择器和日期选择器，则可以使用datetimepicker库进行设置。在我们的示例中，我们设置了" HH: mm"格式，这是我们的自定义格式。如果我们要添加其他格式，例如" HH: mm: ss"，我们也可以这样做。

示例:

<html lang="en">
<head>
    <title> Example of Bootstrap Timepicker </title>  
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>  
</head>
<body>
<div class="container" style="margin-top: 20px">
    <div style="position: relative">
        <input class="form-control" type="text" id="time"/>
    </div>
</div>
<script>
    $('#time').datetimepicker({
        format: 'HH:mm'
    });
</script>
</body>
</html>

执行上述代码时，我们将看到以下输出:

Bootstrap datetimepicker_https://bianchenghao6.com_【Bootstrap 教程】_第1张

Bootstrap Clearfix

Bootstrap Display