Bootstrap 3 datepicker: 更改日期显示格式；防止选择今天日期之前的日期

Question

我第一次在酒店网站上使用 Bootstrap 日期选择器。我已经安装了它，它确实显示了它应该显示的日历。

但是，日期一旦被选中，就会以这种格式显示：dd.mm.yyyy（即：28.10.2020）。 我希望它像这样显示 dd MMM, yyyy（即：2020 年 10 月 28 日）。我尝试使用 class 日期选择器和此代码（如下所示）- 但它不起作用：$('.datepicker').datepicker({format: 'dd MMM, yyyy', todayHighlight: true});

此外，我希望日历不允许您选择今天之前的任何日期。（因此所有过去的日期都显示为灰色，无法选择。 )

您可以在此处的测试页面上查看日历：www.citycentrebudgethotel.com.au/stage/default.asp

以下是 header 脚本：

<!-- 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>

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

谢谢！

Answer 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;
    }
  }
});

Answer 2

好的，我想我已经找到问题所在了。我的 bootstrap/datepicker 版本与文档引用的版本不同，并且不使用相同的变量名称。这就是为什么 Chiperific 的伟大建议对我不起作用。

我已经将他的回答标记为正确，因为如果我有一个正常的设置，它会提供正确的解决方案。

对于其他运行遇到此类问题的人，我将 post 在这里 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 3 datepicker: Change date display format; Prevent date selections prior to Todays date

jquery

calendar

datepicker

twitter-bootstrap

twitter-bootstrap-3

禁用过去的日期：

显示格式