设置Tempus Dominus Bootstrap 4的区域设置



我正在尝试使用Tempus Dominus for Bootstrap 4设置日期时间选择器的语言/区域设置。我按照Tempus Dominus Bootstrap 4中的建议更改语言/区域设置,但似乎没有任何工作。我想将区域设置设置为"de"但它保持在"en"无论如何……有人知道解决办法吗?

<!DOCTYPE html>
<html lang="en">
<head>
<title id="doc_title">Ueberblick</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Cache-Control" content="no-store">
<meta http-equiv="Cache-Control" content="must-revalidate">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js" integrity="sha512-k6/Bkb8Fxf/c1Tkyl39yJwcOZ1P4cRrJu77p83zJjN2Z55prbFHxPs9vN7q3l3+tSMGPDdoH51AEU8Vgo1cgAA==" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment-with-locales.min.js"></script>  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css" integrity="sha512-3JRrEUwaCkFUBLK1N8HehwQgu8e23jTH4np5NHOmQOobuC4ROQxFwFgBLTnhcnQRMs84muMh0PnnwXlPq5MGjg==" crossorigin="anonymous" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
</head>
<body>
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker4" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker4"/>
<div class="input-group-append" data-target="#datetimepicker4" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({
format: 'DD.MM.YYYY',
locale: 'de',
todayHighlight: true,
maxDate: new Date(),
minDate: new Date("11/01/2020"),
useCurrent: false,
buttons: {showClear: true, showToday:true, showClose: true},
tooltips:{today: 'Gehe zu: Heute', clear:'Auswahl löschen', close:'Kalender schließen'},
});
});
</script>
</body>

问题是,Tempus Dominus需要moment.js,它需要包含在Tempus Dominus之前。当我添加moment-with-locale .js时,我将其添加在Tempus Dominus之后,因此无法找到它。将导入更改为正确的顺序后,它就可以工作了。此外,有必要将moment-with-locale更改为2.17.0版本。

<!DOCTYPE html>
<html lang="en">
<head>
<title id="doc_title">Ueberblick</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Cache-Control" content="no-store">
<meta http-equiv="Cache-Control" content="must-revalidate">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment-with-locales.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js" integrity="sha512-k6/Bkb8Fxf/c1Tkyl39yJwcOZ1P4cRrJu77p83zJjN2Z55prbFHxPs9vN7q3l3+tSMGPDdoH51AEU8Vgo1cgAA==" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css" integrity="sha512-3JRrEUwaCkFUBLK1N8HehwQgu8e23jTH4np5NHOmQOobuC4ROQxFwFgBLTnhcnQRMs84muMh0PnnwXlPq5MGjg==" crossorigin="anonymous" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
</head>
<body>
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker4" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker4"/>
<div class="input-group-append" data-target="#datetimepicker4" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({
format: 'DD.MM.YYYY',
locale: 'de',
todayHighlight: true,
maxDate: new Date(),
minDate: new Date("11/01/2020"),
useCurrent: false,
buttons: {showClear: true, showToday:true, showClose: true},
tooltips:{today: 'Gehe zu: Heute', clear:'Auswahl löschen', close:'Kalender schließen'},
});
});
</script>
</body>

相关内容

  • 没有找到相关文章

最新更新