Bootstrap 3 datepicker：更改日期显示格式；防止在今天日期之前选择日期答案

【问题标题】：Bootstrap 3 datepicker: Change date display format; Prevent date selections prior to Todays dateBootstrap 3 datepicker：更改日期显示格式；防止在今天日期之前选择日期
【发布时间】：2023-03-11 14:20:01
【问题描述】：

我第一次在酒店网站上使用 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>

对于如何格式化日期显示以及限制过去日期的任何建议，我将不胜感激。

谢谢！

【问题讨论】：

标签： jquery twitter-bootstrap twitter-bootstrap-3 datepicker calendar

【解决方案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);
            }
        });
    }

  };
}();

【讨论】：