如何在 /bootstrap 4.6 应用程序中正确显示日期时间选择器?
How to show datetimepicker correctly in /bootstrap 4.6 app?
我想在我的 laravel 8 应用中使用 jquery 3.4/bootstrap 4.6 添加 datetimepicker,但添加 m
@section('headerscripts')
<link rel="stylesheet" href="{{admin_assets}}/css/jquery.fancybox.min.css"/>
<link rel="stylesheet" href="{{admin_assets}}/css/selectize.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" integrity="sha256-yMjaV542P+q1RnH6XByCPDfUFhmOafWbeLPmqKh11zo=" crossorigin="anonymous" />
{{-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">--}}
@stop
...
@section('footerscripts')
<script src="{{admin_assets}}/js/jquery.fancybox.min.js"></script>
<script src="{!!admin_assets!!}/js/pages/crud/forms/widgets/select2.js"></script>
<script src="{!!admin_assets!!}/js/pages/crud/forms/editors/summernote.js"></script>
<script src="{!!admin_assets!!}/js/pages/crud/forms/editors/AutoNumeric/AutoNumeric.js"></script>
<script src="{{admin_assets}}/js/jquery.caret.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js" integrity="sha256-5YmaxAwMjIpMrVlK84Y/+NjCpKnFYa8bWWBbUHSBGfU=" crossorigin="anonymous"></script>
...
$(document).ready(function () {
$('#dob').datetimepicker();
...
<div class="form-group">
<label for="user_id">
User <span class="text-danger">*</span>
</label>
<div class="input-group" id="dob">
<input type="text" class="form-control" placeholder="Date Of Birth">
<div class="input-group-addon">
<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
</div>
</div>
但是在表单上有日期时间选择器(浏览器控制台没有任何错误)
似乎不支持图标:https://prnt.sc/1r10yxn
如果取消注释行
@section('headerscripts')
section
{{-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">--}}
datetimepicker 的所有图标都显示正常,但我的页面上有一些设计中断。
我认为将 3.3.7/css/bootstrap.min.css 添加到我的 bootstrap 4.6 以获得图标支持不是一个好主意。
有没有办法正确修复?
也许我的应用程序有一些更好的 datetimepicker 库?
谢谢!
同时使用 Bootstrap 的两个版本是不明智的。某些 css 元素可能会更改或弃用,这会导致您的设计损坏。
我建议在 here
使用 daterangepicker
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<input id="my-calendar" type="text" name="date">
<i class="fa fa-calendar" aria-hidden="true"></i> <!-- Using Font Awesome -->
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
$('#my-calendar').daterangepicker({
"singleDatePicker": true,
"showDropdowns": true,
locale: { format: 'DD/MM/YYYY' },
});
</script>
我想在我的 laravel 8 应用中使用 jquery 3.4/bootstrap 4.6 添加 datetimepicker,但添加 m
@section('headerscripts')
<link rel="stylesheet" href="{{admin_assets}}/css/jquery.fancybox.min.css"/>
<link rel="stylesheet" href="{{admin_assets}}/css/selectize.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" integrity="sha256-yMjaV542P+q1RnH6XByCPDfUFhmOafWbeLPmqKh11zo=" crossorigin="anonymous" />
{{-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">--}}
@stop
...
@section('footerscripts')
<script src="{{admin_assets}}/js/jquery.fancybox.min.js"></script>
<script src="{!!admin_assets!!}/js/pages/crud/forms/widgets/select2.js"></script>
<script src="{!!admin_assets!!}/js/pages/crud/forms/editors/summernote.js"></script>
<script src="{!!admin_assets!!}/js/pages/crud/forms/editors/AutoNumeric/AutoNumeric.js"></script>
<script src="{{admin_assets}}/js/jquery.caret.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js" integrity="sha256-5YmaxAwMjIpMrVlK84Y/+NjCpKnFYa8bWWBbUHSBGfU=" crossorigin="anonymous"></script>
...
$(document).ready(function () {
$('#dob').datetimepicker();
...
<div class="form-group">
<label for="user_id">
User <span class="text-danger">*</span>
</label>
<div class="input-group" id="dob">
<input type="text" class="form-control" placeholder="Date Of Birth">
<div class="input-group-addon">
<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
</div>
</div>
但是在表单上有日期时间选择器(浏览器控制台没有任何错误) 似乎不支持图标:https://prnt.sc/1r10yxn
如果取消注释行
@section('headerscripts')
section
{{-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">--}}
datetimepicker 的所有图标都显示正常,但我的页面上有一些设计中断。 我认为将 3.3.7/css/bootstrap.min.css 添加到我的 bootstrap 4.6 以获得图标支持不是一个好主意。 有没有办法正确修复?
也许我的应用程序有一些更好的 datetimepicker 库?
谢谢!
同时使用 Bootstrap 的两个版本是不明智的。某些 css 元素可能会更改或弃用,这会导致您的设计损坏。
我建议在 here
使用daterangepicker
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<input id="my-calendar" type="text" name="date">
<i class="fa fa-calendar" aria-hidden="true"></i> <!-- Using Font Awesome -->
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
$('#my-calendar').daterangepicker({
"singleDatePicker": true,
"showDropdowns": true,
locale: { format: 'DD/MM/YYYY' },
});
</script>