Bootstrap datetimepicker



Bootstrap datetimepicker

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张