Question

我正在使用bootstrap datepicker。

我已经使用代码来禁用星期日，星期六和所有早期日期，但我今天也需要禁用它。我怎么能这样做？

这是我的代码

function disableWeekends($this) {
        var $days = $this.find('.datepicker-days tr').each(function() {
            var $days = $(this).find('.day');
            // disable Sunday
            $days.eq(0).addClass('disabled').click(false);
            // disable Saturday
            $days.eq(6).addClass('disabled').click(false);
        });
    }

// create the date picker
        var nowTemp = new Date();
        var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);



$('#demo_date').datepicker({
            onRender: function(date) {
                return date.valueOf() < now.valueOf() ? 'disabled' : '';
            }
        }).on('changeDate', function(ev){
            $(this).datepicker('hide');
            $('.help-tip').popover('hide');                
        });

        // get instance of the jQuery object created by
        // datepicker
        var datepicker = $('#demo_date').data('datepicker');

        if(datepicker) {
            // disable weekends in the pre-rendered version
            disableWeekends(datepicker.picker);

            // disable weekends whenever the month changes
            var _fill = datepicker.fill;
            datepicker.fill = function () {
                _fill.call(this);
                disableWeekends(this.picker);
            };
        }

Answer 1

使用startDate和daysOfWeekDisabled选项获取所需结果。

＆＃13;

$(function() {
  $('.datepicker').datepicker({
    autoclose: true,
    weekStart: 1,
    startDate: '+1d',
    daysOfWeekDisabled: [0, 6]
  });
});

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>


<input class="datepicker" type="text">

＆＃13;

Bootstrap 2.2.2：

＆＃13;

$(function() {
  $('.datepicker').datepicker({
    autoclose: true,
    weekStart: 1,
    startDate: '+1d',
    daysOfWeekDisabled: [0, 6]
  });
});

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" rel="stylesheet" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>


<input class="datepicker" type="text">

＆＃13;

Answer 2

在这一行：

return date.valueOf() < now.valueOf() ? 'disabled' : '';

将<替换为<=。

如何从bootstrap datepicker禁用所有过去的日期以及今天

2 个答案: