Bootstrap 3 datepicker：更改日期显示格式；防止在今天日期之前选择日期
Posted
技术标签:
【中文标题】Bootstrap 3 datepicker：更改日期显示格式；防止在今天日期之前选择日期【英文标题】：Bootstrap 3 datepicker: Change date display format; Prevent date selections prior to Todays date 【发布时间】：2021-02-10 09:10:28 【问题描述】：我第一次在酒店网站上使用 Bootstrap 日期选择器。我已经安装了它，它确实显示了它应该显示的日历。
但是，日期一旦选择，就会以这种格式显示：dd.mm.yyyy（即：28.10.2020）。 我希望它显示为 dd MMM, yyyy（即：2020 年 10 月 28 日）。我尝试使用类 datepicker 和这段代码（如下所示） - 但它不起作用：$('.datepicker').datepicker(format: 'dd MMM, yyyy', todayHighlight: true);
另外，我希望日历不允许您选择今天之前的任何日期。（因此所有过去的日期都显示为灰色，无法选择。）
您可以在此处查看测试页面上的日历：www.citycentrebudgethotel.com.au/stage/default.asp
这里是头脚本：
<!-- javascript 1/2 -->
<script type="text/javascript" src="assets/plugins/jquery/jquery.min.js"></script>
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/plugins/fancybox/source/jquery.fancybox.css">
<link rel="stylesheet" href="assets/plugins/layer-slider/layerslider/css/layerslider.css">
<link rel="stylesheet" href="assets/plugins/sky-forms-pro/skyforms/css/sky-forms.css">
<link rel="stylesheet" href="assets/plugins/sky-forms-pro/skyforms/custom/custom-sky-forms.css">
<!--[if lt IE 9]><link rel="stylesheet" href="assets/plugins/sky-forms-pro/skyforms/css/sky-forms-ie8.css"><![endif]-->
<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
以下是页脚脚本：
<!-- JS Global Compulsory -->
<!-- JAVASCRIPT 2/2 -->
<script type="text/javascript" src="assets/plugins/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- JS Implementing Plugins -->
<script type="text/javascript" src="assets/plugins/back-to-top.js"></script>
<script type="text/javascript" src="assets/plugins/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="assets/plugins/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<script type="text/javascript" src="assets/plugins/layer-slider/layerslider/js/greensock.js"></script>
<script type="text/javascript" src="assets/plugins/layer-slider/layerslider/js/layerslider.transitions.js"></script>
<script type="text/javascript" src="assets/plugins/layer-slider/layerslider/js/layerslider.kreaturamedia.jquery.js"></script>
<script type="text/javascript" src="assets/plugins/sky-forms-pro/skyforms/js/jquery-ui.min.js"></script>
<!-- JS Customization -->
<script type="text/javascript" src="assets/js/custom.js"></script>
<!-- JS Page Level -->
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/plugins/layer-slider.js"></script>
<script type="text/javascript" src="assets/js/plugins/datepicker.js"></script>
<script type="text/javascript">
jQuery(document).ready(function()
App.init();
App.initFancybox();
LayerSlider.initLayerSlider();
Datepicker.initDatepicker();
);
</script>
<script type="text/javascript">
$(document).ready(function()
$('.fancybox-media').fancybox(
openEffect : 'none',
closeEffect : 'none',
helpers :
media :
);
$('.datepicker').datepicker(
format: 'dd MMM, yyyy',
todayHighlight: true
);
);
</script>
这是显示日历字段的代码：
<form action="#" id="sky-form" class="sky-form">
<div class="row" style="margin: auto;">
<section class="col-md-6">
<label class="input">
<i class="icon-append fa fa-calendar"></i>
<input type="text" name="start" id="start" placeholder="Check In Date" class="datepicker">
</label>
</section>
<section class="col-md-6">
<label class="input">
<i class="icon-append fa fa-calendar"></i>
<input type="text" name="finish" id="finish" placeholder="Check out Date" class="datepicker">
</label>
</section>
</div>
</form>
对于如何格式化日期显示以及限制过去日期的任何建议，我将不胜感激。
谢谢！
【问题讨论】：
【参考方案1】：禁用过去的日期：
Bootstrap Datepicker 提供startDate 的选项：
https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#startdate
创建一个新的 Date 对象而不给它任何选项将默认为今天：
var d = new Date():
尝试将其用于startDate 选项：
$('.datepicker').datepicker(startDate: new Date());
显示格式
引号很重要，请尝试在格式周围使用双引号：
$('.datepicker').datepicker(format: "dd MMM, yyyy", todayHighlight: true);
如果失败，我有时会发现我需要通过toDisplay 设置这个值：
$('.datepicker').datepicker(
format:
// We're sending an object, not a string
toDisplay: function (date, format, language)
// this gets messy, sorry
var d = new Date(date);
var year = new Intl.DateTimeFormat('en', year: 'numeric' ).format(d);
var month = new Intl.DateTimeFormat('en', month: 'short' ).format(d);
var day = new Intl.DateTimeFormat('en', day: '2-digit' ).format(d);
return day + " " + month + ", " + year;
);
【讨论】：
感谢@chiperific 的快速回复。对于过去的日期，我看到它是 startDate 选项，但我不知道如何将其设置为今天的日期（不是特定日期，但无论 TODAY 日期是什么。）你能提供一个例子吗？对于格式日期，我尝试了您的两个建议。都没有奏效。我想也许我出于某种原因没有选择此代码？我在错误的地方上课吗？你能看到我可能编码错误而无法访问此功能的任何内容吗？其他一些插件代码会覆盖它吗？ 我刚刚注意到格式选项有一个默认值：“mm/dd/yyyy”，但我的日期显示为 dd.mm.yyyy（使用句点而不是斜杠，并且还使用澳大利亚日期格式，这对我有好处，但不是默认格式）。所以如果我没有选择这个功能，那么我应该看到默认格式，我也没有这样做。所以现在我真的认为可能有另一个脚本在某个地方设置不同？有没有办法解决这个问题？ 在澳大利亚日期格式上，可能是某些东西正在本地化您的格式：new Intl.DateTimeFormat('en-AU');，浏览器或 Javascript。
我为startDate 添加了一些示例代码，让您朝着正确的方向前进。【参考方案2】：
好的，我想我已经找到了问题所在。我的 bootstrap/datepicker 版本与文档引用的版本不同，并且不使用相同的变量名。这就是为什么 Chiperific 的伟大建议对我不起作用的原因。
我已经继续并将他的答案标记为正确，因为如果我有一个正常的设置，它会提供正确的解决方案。
对于遇到此类问题的其他人，我将在此处发布我的网站正在使用的 datepicker.js。此脚本已调整为以我想要的格式显示日期，并且也不允许选择过去的日期：
var Datepicker = function ()
return
//Datepickers
initDatepicker: function ()
// Regular datepicker
$('#date').datepicker(
dateFormat: 'dd MM, yy',
prevText: '<i class="fa fa-angle-left"></i>',
nextText: '<i class="fa fa-angle-right"></i>'
);
// Date range
$('#start').datepicker(
dateFormat: 'dd MM, yy',
prevText: '<i class="fa fa-angle-left"></i>',
nextText: '<i class="fa fa-angle-right"></i>',
minDate: 'TODAY()',
onSelect: function( selectedDate )
$('#finish').datepicker('option', 'minDate', selectedDate);
);
$('#finish').datepicker(
dateFormat: 'dd MM, yy',
prevText: '<i class="fa fa-angle-left"></i>',
nextText: '<i class="fa fa-angle-right"></i>',
onSelect: function( selectedDate )
$('#start').datepicker('option', 'maxDate', selectedDate);
);
// Inline datepicker
$('#inline').datepicker(
dateFormat: 'dd MM, yy',
prevText: '<i class="fa fa-angle-left"></i>',
nextText: '<i class="fa fa-angle-right"></i>'
);
// Inline date range
$('#inline-start').datepicker(
dateFormat: 'dd MM, yy',
prevText: '<i class="fa fa-angle-left"></i>',
nextText: '<i class="fa fa-angle-right"></i>',
onSelect: function( selectedDate )
$('#inline-finish').datepicker('option', 'minDate', selectedDate);
);
$('#inline-finish').datepicker(
dateFormat: 'dd MM, yy',
prevText: '<i class="fa fa-angle-left"></i>',
nextText: '<i class="fa fa-angle-right"></i>',
onSelect: function( selectedDate )
$('#inline-start').datepicker('option', 'maxDate', selectedDate);
);
;
();
【讨论】：
以上是关于Bootstrap 3 datepicker：更改日期显示格式；防止在今天日期之前选择日期的主要内容，如果未能解决你的问题，请参考以下文章
减小 bootstrap-datepicker 字段的大小并更改文本颜色
在更改时验证 bootstrap-datepicker 字段
BootStrap DatePicker 日历输入更改不更新日历
text 更改日期格式Ng-bootstrap Datepicker Angular 5