我正在尝试使用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>