Bootstrap 选择器
Bootstrap Datepicker
Bootstrap Datepicker用于显示带有日期，月份和时间的日历。
您可以使用以下代码在 Bootstrap 中创建日期选择器。
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Bootstrap DatePicker</title>
</head>
<body>
<h1 align = "center">Bootstrap datepicker</h1>
<div class = "container">
<div class = "row">
<div class = "col-sm-12" align = "center">
<input type = "date" name = "date">
</div>
</div>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src ="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap Timepicker
Bootstrap timepicker用于显示以分钟或秒为单位的时间。
示例:
<html>
<head>
<title>Bootstrap date and time</title>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<script>
$(function() {
$('#datetimepicker1').datetimepicker();
});
</script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<style>
.container {
margin-top : 5px;
margin-left : 10px;
width : 600px;
}
</style>
</head>
<body>
</br>
<div class ="container">
<div class ="row">
<div class ='col-sm-6'>
<div class ="form-group">
<div class = 'input-group date' id='datetimepicker3'>
<input type = 'text' class="form-control" />
<span class = "input-group-addon">
<span class = "glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type = "text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
</script>
</div>
</div>
</body>
</html>
启动日期时间选择器
启动日期时间选择器是一个输入字段，用于显示带有时间的日历。
在Bootstrap中，有以下两种显示日期时间选择器的方法-
方法1: 不使用日历和时间图标
您可以按照下面的代码可显示日期和时间，而无需使用日期和时间图标。
<html>
<head>
<title>Bootstrap date and time</title>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<script>
$(function() {
$('#datetimepicker1').datetimepicker();
});
</script>
<link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<style>
.container {
margin-top: 5px;
margin-left: 10px;
width: 600px;
}
</style>
</head>
<body>
<div class = "container">
<div class = "row">
<div class = 'col-sm-6'>
<input type = 'text' class = "form-control" id = 'datetimepicker1' />
</div>
<script type = "text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker();
});
</script>
</div>
</div>
</body>
</html
方法2: 使用日期和时间图标
添加图标可使您的选择器更加美观。您可以使用以下代码在选择器上添加日期和时间图标。
代码:
<html>
<head>
<title>Bootstrap date and time</title>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<script>
$(function() {
$('#datetimepicker1').datetimepicker();
});
</script>
<link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<style>
.container {
margin-top: 5px;
margin-left: 10px;
width: 600px;
}
</style>
</head>
<body>
</br>
<div class ="container">
<div class ="row">
<div class ='col-sm-6'>
<div class ="form-group">
<div class ='input-group date' id='datetimepicker1'>
<input type ='text' class="form-control" />
<span class ="input-group-addon">
<span class ="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
