Bootstrap 4 日期选择器
Posted
技术标签:
【中文标题】Bootstrap 4 日期选择器【英文标题】：Bootstrap 4 datepicker 【发布时间】：2018-09-09 09:33:36 【问题描述】：我想在 Bootstrap 4 中使用 datepicker https://bootstrap-datepicker.readthedocs.io/en/latest/index.html。
按照上面页面上的示例，我可以使其与 Bootstrap 3 一起使用。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<main class="container">
<div class="row" style="padding-top: 100px">
<div class="col">
<input data-date-format="dd/mm/yyyy" id="datepicker">
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$('#datepicker').datepicker(
weekStart: 1,
daysOfWeekHighlighted: "6,0",
autoclose: true,
todayHighlight: true,
);
$('#datepicker').datepicker("setDate", new Date());
</script>
</body>使用此代码日期选择器显示正确。
但在 Bootstrap 4 上做同样的事情：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></head>
<body>
<main class="container">
<div class="row" style="padding-top: 100px">
<div class="col">
<input data-date-format="dd/mm/yyyy" id="datepicker">
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script type="text/javascript">
$('#datepicker').datepicker(
weekStart: 1,
daysOfWeekHighlighted: "6,0",
autoclose: true,
todayHighlight: true,
);
$('#datepicker').datepicker("setDate", new Date());
</script>
</body>让它看起来不那么专业：
Bootstrap 4 版本中的字体和间距似乎搞砸了。
如何在 Bootstrap 4 中获得与 datepicker 相同的外观？
谢谢
【问题讨论】：
问题的标题误导了我。我以为它与官方引导日期选择器有关，但它只是一些第三方项目。 【参考方案1】：你也可以像下面这样覆盖默认的日期选择器类：
默认引导字体大小是 1rem 或 16px 所以更新 .datepicker 类
font-size: 0.875em; 或/和更新单元格的宽度和高度：
.datepicker td, .datepicker th
width: 1.5em;
height: 1.5em;
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></head>
<body>
<main class="container">
<div class="row" style="padding-top: 100px">
<div class="col">
<input data-date-format="dd/mm/yyyy" id="datepicker">
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style type="text/css">
// solution 1:
.datepicker
font-size: 0.875em;
/* solution 2: the original datepicker use 20px so replace with the following:*/
.datepicker td, .datepicker th
width: 1.5em;
height: 1.5em;
</style>
<script type="text/javascript">
$('#datepicker').datepicker(
weekStart: 1,
daysOfWeekHighlighted: "6,0",
autoclose: true,
todayHighlight: true,
);
$('#datepicker').datepicker("setDate", new Date());
</script>
</body>【讨论】：
【参考方案2】：来自文档：
bootstrap-datepicker.standalone.css
可用于在不依赖 Twitter Bootstrap 库的情况下包含日期选择器。
【讨论】：
【参考方案3】：你可以试试https://github.com/satyandra-softuvo/bootstrap4-datetimepicker
$.extend(true, $.fn.datetimepicker.defaults,
icons:
time: 'far fa-clock',
date: 'far fa-calendar',
up: 'fas fa-arrow-up',
down: 'fas fa-arrow-down',
previous: 'fas fa-chevron-left',
next: 'fas fa-chevron-right',
today: 'fas fa-calendar-check',
clear: 'far fa-trash-alt',
close: 'far fa-times-circle'
);
【讨论】：
以上是关于Bootstrap 4 日期选择器的主要内容，如果未能解决你的问题，请参考以下文章