jquery - jQuery 编辑的 Bootstrap datetimepicker 没有出现
问题描述
我正在尝试使用 Bootstrap datetimepicker,但我使用的 jQuery 代码似乎根本不起作用。我正在分解 CodePen 中其他人的工作代码(使用他们的 jQuery 代码),但它在我的身上不起作用,我已经多次检查了类、id 和库。这里无脑。
我想知道其他更清晰的眼睛是否会发现问题。
这是我的CodePen:https ://codepen.io/fergos2/pen/xxxeXqa
这是我的基础:https ://codepen.io/johnfinkdesign/pen/NRyBZb
在此先感谢您的帮助!
if (/Mobi/.test(navigator.userAgent)) {
// if mobile device, use native pickers
$(".date-container input").attr("type", "date");
$(".time-container input").attr("type", "time");
} else {
// if desktop device, use DateTimePicker
$("#datepicker").datetimepicker({
useCurrent: false,
format: "DD-MM-YYYY",
// disabling past dates
minDate: moment(),
showTodayButton: true,
icons: {
next: "fa fa-chevron-right",
previous: "fa fa-chevron-left",
today: 'todayText',
}
});
$("#timepicker").datetimepicker({
format: "LT",
icons: {
up: "fa fa-chevron-up",
down: "fa fa-chevron-down"
}
});
}
.container {
padding: 20px;
}
form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
input {
width: 20vw;
padding: 10px;
outline: none;
border: 1px solid black;
border-radius: 0.25rem;
}
}
.date-container {
position: relative;
margin-bottom: 10px;
}
.time-container {
position: relative;
}
.date-icon,
.time-icon {
position: absolute;
bottom: 0;
right: 0;
cursor: pointer;
color: #495057;
white-space: nowrap;
background-color: #e9ecef;
padding: .64rem .75rem;
border-top-right-radius: .25rem;
border-bottom-right-radius: .25rem;
border: 1px solid black;
}
.todayText:before {
content: "Today's Date"
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<form>
<div class="date-container" id="datepicker">
<input placeholder="DD/MM/YYYY">
<span class="date-icon">
<i class="fa fa-calendar"></i>
</span>
</div>
<div class="time-container" id="timepicker">
<input placeholder="HH:MM">
<span class="time-icon">
<i class="fa fa-clock"></i>
</span>
</div>
</form>
</div>
解决方案
推荐阅读
- angular - 以编程方式角度动画,如何在 ngOnDestroy 之前调用动画生成器以进行离开动画
- python - 你如何在一个类中,在另一个函数中使用一个函数?
- typescript - TypeScript:plugin:prettier/recommended for eslint,无法使用 override 关键字
- css - CSS:我可以缩放包含容器的图像吗?
- python - python写入文件异常发生
- webpack - webpack-dev-server 触发大量 hot-update.js (404)
- apache - 这些 htaccess 指令是什么意思?
- laravel - Laravel Nova - 如何关闭仪表板中表格的自动复数?
- c# - 生成一个二维整数数组并将其拆分为 c# 中的形状
- python - ValueError - 数据函数