引导日期选择器禁用没有当前日期的过去日期答案

【问题标题】：Bootstrap datepicker disabling past dates without current date引导日期选择器禁用没有当前日期的过去日期
【发布时间】：2013-04-13 22:26:33
【问题描述】：

我想禁用当前日期之前的所有过去日期，而不是当前日期。我正在尝试通过引导 datepicker 库“bootstrap-datepicker”并使用以下代码：

$('#date').datepicker({ 
    startDate: new Date() 
});

它工作正常。但它是禁用日期直到今天。

例如，如果今天是 2013 年 4 月 20 日，我通过设置 startDate: new Date() 禁用过去的日期。但我可以从 04-21-2013 中选择日期。

更新：对于 UTC 区域，我可以如下解决：

var d = new Date();
options["startDate"] = new Date(d.setDate(d.getDate() - 1));

或startDate: "+0d"

但是当 UTC 提前一天时，这些方法不起作用。对于我在加利福尼亚的客户，这意味着在下午 5:00 我的客户不能再选择他当地的当前日期作为有效日期。为了解决这个问题，我暂时使用startDate: "-1d"，但当然在 5 之前这意味着昨天是可见的。

现在有没有人想出更好的方法，因为我不想告诉用户输入 UTC 日期？

提前致谢。

【问题讨论】：

你在使用 Bootstrap 2.0.4+ jQuery 1.7.1+ 吗？
我正在使用 Bootstrap v2.2.1 和 jQuery 1.8.1

标签： javascript jquery twitter-bootstrap bootstrap-datepicker

【解决方案1】：

var date = new Date();
date.setDate(date.getDate()-1);

$('#date').datepicker({ 
    startDate: date
});

【讨论】：

如果将来时区发生变化，会发生什么？
我不完全确定。你可能想看看这个线程：Need to display local times over DST transitions using Javascript Date Object
我得到了 TypeError: 选项 startDate 无法识别！你知道问题所在
您的脚本使用时间短，但它允许用户选择昨天的日期。但this 解决方案有效。希望有所帮助。
无论如何这可以动态完成而不是在选项中设置？

【解决方案2】：

HTML

<input type="text" name="my_date" value="4/26/2015" class="datepicker">

JS

jQuery(function() {
  var datepicker = $('input.datepicker');

  if (datepicker.length > 0) {
    datepicker.datepicker({
      format: "mm/dd/yyyy",
      startDate: new Date()
    });
  }
});

这将在打开日历时突出显示默认日期为 4/26/2015（2015 年 4 月 26 日）禁用当前日期之前的所有日期。

【讨论】：

【解决方案3】：

使用minDate

var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

$('#date').datepicker({ 
    minDate: today
});

【讨论】：

为简单起见，请使用moment.js，如minDate: moment()
让未来的用户知道，此解决方案适用于不同的插件（'bootstrap-datetimepicker'）。

【解决方案4】：

使用

startDate: '-0d'

喜欢

$("#datepicker").datepicker({
    startDate: '-0d',
    changeMonth: true
});

【讨论】：

【解决方案5】：

你可以使用data属性：

<div class="datepicker" data-date-start-date="+1d"></div>

【讨论】：

【解决方案6】：

var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
	$('#date').datetimepicker({
		startDate: today
	});

【讨论】：

【解决方案7】：

解决方案要简单得多：

$('#date').datepicker({ 
    startDate: "now()" 
});

尝试Online Demo 并填写输入开始日期：now()

【讨论】：

仅供参考，startDate: "tomorrow" 或 startDate: "yesterday" 如果需要也可以使用。

【解决方案8】：

<script type="text/javascript">
$('.datepicker').datepicker({
    format: 'dd/mm/yyyy',
    todayHighlight:'TRUE',
    startDate: '-0d',
    autoclose: true,
})

【讨论】：

您能否解释一下为什么这应该有效，以及为什么它比 2 年前接受的答案更好？

【解决方案9】：

这里是

 <script>
          $(function () {
              var date = new Date();
              date.setDate(date.getDate() - 7);

            $('#datetimepicker1').datetimepicker({
                maxDate: 'now',
                showTodayButton: true,
                showClear: true,
                minDate: date
            });
        });
    </script>

【讨论】：

【解决方案10】：

试试看：

$(function () {
     $('#datetimepicker').datetimepicker({  minDate:new Date()});
});

【讨论】：

【解决方案11】：

禁用过去的日期并突出显示今天的日期：

$(function () {
    $('.input-daterange').datepicker({
        startDate : new Date(),
        todayHighlight : true
    });
});

禁用未来日期并突出显示今天的日期：

$(function () {
    $('.input-daterange').datepicker({
        endDate : new Date(),
        todayHighlight : true
    });
});

【讨论】：

【解决方案12】：

禁用所有过去的日期

<script type="text/javascript">
        $(function () {
            /*--FOR DATE----*/
            var date = new Date();
            var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

            //Date1
            $('#ctl00_ContentPlaceHolder1_txtTranDate').datepicker({
              format: 'dd-mm-yyyy',
              todayHighlight:'TRUE',
              startDate: today,
              endDate:0,
              autoclose: true
            });

        });
</script>

禁用所有未来日期

 var date = new Date();
 var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

   //Date1
   $('#ctl00_ContentPlaceHolder1_txtTranDate').datepicker({
       format: 'dd-mm-yyyy',
       todayHighlight:'TRUE',
       minDate: today,
       autoclose: true
   });

【讨论】：

【解决方案13】：

请参考小提琴http://jsfiddle.net/Ritwika/gsvh83ry/

**With three fields having date greater than the **
<input type="text" type="text" class="form-control datepickstart" />
<input type="text" type="text" class="form-control datepickend" />
<input type="text" type="text" class="form-control datepickthird" />

var date = new Date();
 date.setDate(date.getDate()-1);
$('.datepickstart').datepicker({
 autoclose: true,
 todayHighlight: true,
 format: 'dd/mm/yyyy',
  startDate: date
});
$('.datepickstart').datepicker().on('changeDate', function() {
    var temp = $(this).datepicker('getDate');
    var d = new Date(temp);
  d.setDate(d.getDate() + 1);
  $('.datepickend').datepicker({
 autoclose: true,
 format: 'dd/mm/yyyy',
 startDate: d
}).on('changeDate', function() {
    var temp1 = $(this).datepicker('getDate');
    var d1 = new Date(temp1);
   d1.setDate(d1.getDate() + 1);
  $('.datepickthird').datepicker({
 autoclose: true,
 format: 'dd/mm/yyyy',
 startDate: d1
});
});
});

【讨论】：

【解决方案14】：

您可以简单地在html输入标签中添加数据属性：

在rails html中：

<%= form.text_field :appointment_date, 'data-provide': 'datepicker', 'data-date-start-date': "+0d" %>

HTML：

<input data-provide="datepicker" data-date-start-date="+0d" type="text" name="appointment_date" id="appointment_date">

【讨论】：

data-date-start-date="+0d" 做到了。谢谢
我在 Rails 上工作，它帮助了我，赞成。提供data:{ provide:'datepicker', 'date-start-date': "+1d"} 以获取明天的日期

【解决方案15】：

在 html 中

<input class="required form-control" id="d_start_date" name="d_start_date" type="text" value="">

在Js端

<script type="text/javascript">
        $(document).ready(function () {
        var dateToday = new Date();
        dateToday.setDate(dateToday.getDate());

        $('#d_start_date').datepicker({
            autoclose: true,
            startDate: dateToday
        })

    });

【讨论】：

【解决方案16】：

要禁用过去的日期，只需使用：

  $('.input-group.date').datepicker({
       format: 'dd/mm/yyyy',
       startDate: 'today'
  });

【讨论】：

【解决方案17】：

以下对我有用

$('.input-group.date').datepicker({
     format: 'dd/mm/yyyy',
     startDate: new Date()
});

【讨论】：

这没有回答问题。你应该给出一个解决问题的答案，解释它为什么起作用，解释它如何起作用，这样其他人可以学习。你是怎么想出这个答案的？这是您应该在答案中包含的内容。您的回答在当前状态下对其他读者没有帮助。

【解决方案18】：

这取决于您在日期选择器上放置的格式所以首先我们给了它格式。

    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!

    var yyyy = today.getFullYear();
    if(dd<10){
        dd='0'+dd;
    } 
    if(mm<10){
        mm='0'+mm;
    } 
    var today = yyyy+'-'+mm+'-'+dd; //Here you put the format you want

然后传递日期选择器（取决于您使用的版本，可能是 startDate 或 minDate 这是我的情况）

    //Datetimepicker
    $(function () {
        $('#datetimepicker1').datetimepicker({
            minDate: today, //pass today's date
            daysOfWeekDisabled: [0],
            locale: 'es',
            inline: true,
            format: 'YYYY-MM-DD HH:mm', //format of my datetime (to save on mysqlphpadmin)
            sideBySide: true
        });
    });

【讨论】：

【解决方案19】：

您可以在以下链接中找到您的解决方案：https://codepen.io/ahmetcadirci25/pen/NpMNzJ

这对我有用。

我的代码：

        var date = new Date();
        date.setDate(date.getDate());

        $('#datetimepicker1').datetimepicker({
            isRTL: false,
            format: 'dd.mm.yyyy hh:ii',
            autoclose: true,
            language: 'tr',
            startDate: date
        });

【讨论】：

【解决方案20】：

如果您的要求是基于一个对另一个动态禁用 startDate 和 endDate，您可以这样做。

$('#date2').datepicker({
            todayHighlight: true,
            autoclose: true,
            format: "dd/mm/yyyy",
            clearBtn : true
        }).on('show', function(e){
            var date = $('#date3').datepicker('getDate');
            if(date){
             $('#date2').datepicker('setEndDate', date);
                }
    });

        $('#date3').datepicker({
            todayHighlight: true,
            autoclose: true,
            format: "dd/mm/yyyy",
            clearBtn : true
        }).on('show', function(e){
            var date = $('#date2').datepicker('getDate');
            if(date){
             $('#date3').datepicker('setStartDate', date);
                }
    });

如果您的要求只是在过去的日期被禁用，那么您可以使用下面的 sn-p。

$('#date2').datepicker({
            todayHighlight: true,
            autoclose: true,
            format: "dd/mm/yyyy",
            clearBtn : true,
            startDate : new Date()
        })

如果您的要求只是禁用未来日期，那么您可以使用下面的 sn-p。

 $('#date2').datepicker({
                todayHighlight: true,
                autoclose: true,
                format: "dd/mm/yyyy",
                clearBtn : true,
                endDate : new Date()
            })

我希望它会对某人有所帮助。

【讨论】：