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

Question

我想禁用当前日期之前的所有过去日期，而不是当前日期。我正在尝试通过引导 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 日期？

提前致谢。

score 60 · Accepted Answer

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

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

score 23 · Accepted Answer

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

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

score 23 · Accepted Answer

使用minDate

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

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

score 16 · Accepted Answer

利用

startDate: '-0d'

喜欢

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

score 8 · Accepted Answer

8

您可以使用数据属性：

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

于 2016-04-14T11:21:19.040 回答

score 7 · Accepted Answer

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

score 6 · Accepted Answer

解决方案要简单得多：

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

尝试在线演示并填写输入开始日期：now()

score 5 · Accepted Answer

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

score 4 · Accepted Answer

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

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

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

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

有关更多详细信息，请查看https://bootstrap-datepicker.readthedocs.io/en/latest/options.html?highlight=startdate#quick-reference

score 4 · Accepted Answer

试试看：

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

score 4 · Accepted Answer

这里是

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

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

score 3 · Accepted Answer

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

在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">

score 3 · Accepted Answer

禁用所有过去的日期

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

score 3 · Accepted Answer

请参考小提琴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
});
});
});

score 1 · Accepted Answer

在 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
        })

    });

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

以下对我有用

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

score 0 · Accepted Answer

您可以在以下链接中找到您的解决方案：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
        });

score 0 · Accepted Answer

如果您的要求是基于另一个动态禁用 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);
                }
    });

如果您的要求只是禁用了过去的日期，那么您可以使用下面的代码段。

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

如果您的要求只是禁用未来日期，那么您可以使用以下代码段。

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

我希望它会帮助某人。

score 0 · Accepted Answer

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

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

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

20 回答 20

Related

Reference