将日期选择器转换为日期时间选择器

Question

在我的站点中，使用 Bootstrap 4，我有一个完美运行的日期选择器实例，它给我一个日历来选择日期。但是，我也想修改它以使用时间。我已经尝试了很多不同版本的日期时间选择器并按正确顺序放置了 CDN 文件，但无论出于何种原因，有些东西是冲突的。

我希望有人能为我指出使用日期时间选择器的最佳方式，或者只是将时间与此结合起来，以一种适合我现在使用的方式。

这是工作日期选择器的代码：

$('#datepicker').datepicker({
    weekStart: 1,
    daysOfWeekHighlighted: "6,0",
    autoclose: true,
    todayHighlight: true,
});
$('#datepicker').datepicker("setDate", new Date());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

<h6>Set New Expiration: <input data-date-format="mm/dd/yyyy" id="datepicker" name="datepicker"></h6>

Answer 1

您可以使用 AuspeXeu DateTimePicker。它还支持键盘导航。

$(".datepicker").datetimepicker({
    format: 'm/d/yyyy',
    datesDisabled: ['2018-06-20'],
    autoclose: true
});
function showDate()
{
   console.log($('.datepicker').data("datetimepicker").getDate());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.js"></script>
<link href="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<input class="datepicker" type="text">
<button onclick="showDate()">Get Date</button>

将日期选择器转换为日期时间选择器

converting datepicker to datetimepicker

datepicker

bootstrap-datetimepicker

bootstrap-4