gpt4 book ai didi

jquery - Bootstrap 日期时间选择器现在显示日历

转载 作者:行者123 更新时间:2023-12-01 01:31:14 25 4
gpt4 key购买 nike

最近,我开始升级我的一个旧项目,该项目是用纯 php/javascript 编写的,以开始使用 Laravel。我开始配置一些基本的东西,比如 select2、tinymce、date(time)picker,这就是我陷入困境的地方。不知何故,日历(日期)部分在默认模式下无法正确显示。

这是我用于配置日期时间选择器的 javascript 和 html 代码。

Javascript:

$(function() {
$('input.date-time-picker#picker1').datetimepicker({
format: 'YYYY-MM-DD HH:mm',
icons: {
clear: 'fa fa-trash fa-fw',
close: 'fa fa-times fa-fw',
date: 'fa fa-calendar fa-fw',
down: 'fa fa-chevron-down fa-fw',
next: 'fa fa-chevron-right fa-fw',
previous: 'fa fa-chevron-left fa-fw',
time: 'fa fa-clock-o fa-fw',
up: 'fa fa-chevron-up fa-fw',
today: 'fa fa-calendar-times-o fa-fw'
},
/* sideBySide: true, */
showClear: true,
showClose: true,
showTodayButton: true,
});

$('input.date-time-picker#picker2').datetimepicker({
format: 'YYYY-MM-DD HH:mm',
icons: {
clear: 'fa fa-trash fa-fw',
close: 'fa fa-times fa-fw',
date: 'fa fa-calendar fa-fw',
down: 'fa fa-chevron-down fa-fw',
next: 'fa fa-chevron-right fa-fw',
previous: 'fa fa-chevron-left fa-fw',
time: 'fa fa-clock-o fa-fw',
up: 'fa fa-chevron-up fa-fw',
today: 'fa fa-calendar-times-o fa-fw'
},
sideBySide: true,
});
});

HTML:

<!doctype html>

<html lang="en">

<head>
<meta charset="utf-8">

<title>Datetimepicker error</title>
<meta name="description" content="Bootstrap 4 datetimepicker error">
<meta name="author" content="Reflexecute">
</head>

<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
Wrong
</div>
<div class="card-body">
<div class="form-group">
<span class="label"><i class="fa fa-calendar"></i> Date time picker</span>
<input type="text" name="date-time-picker" id="picker1" class="form-control date-time-picker">
</div>
</div>
</div>
<div class="card">
<div class="card-header">
Sidebyside workaround
</div>
<div class="card-body">
<div class="form-group">
<span class="label"><i class="fa fa-calendar"></i> Date time picker</span>
<input type="text" name="date-time-picker" id="picker2" class="form-control date-time-picker">
</div>
</div>
</div>
</div>
</div>
</div>
</body>

</html>

这是一个包含错误和解决方法的 js fiddle :https://jsfiddle.net/Reflexecute/v6uzL2r9/

解决方法(sideBySide: true => 并排 View )目前有效,但我更喜欢默认 View ,因为并排 View 没有清晰的“今天”和“关闭”按钮。

有人有建议吗,因为我能找到的所有错误/修复都与现在显示有关,但没有修复它。

最佳答案

通过将toolbarPlacement设置为“top”或“bottom”,您可以在使用sideBySide时强制显示带有关闭按钮的工具栏。

尝试 toolbarPlacement: "bottom"

关于jquery - Bootstrap 日期时间选择器现在显示日历,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53334000/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com