启动日期选择器禁用过去日期而没有当前日期

Bootstrap datepicker disabling past dates without current date

本文关键字：日期 当前日期 选择器 启动 过去      更新时间：2023-09-26

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

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

很好。但是直到今天它都是禁用日期。

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

已更新:我可以解决它为UTC区域如下:

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

或startDate: "+0d"

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

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

var date = new Date();
date.setDate(date.getDate()-1);
$('#date').datepicker({ 
    startDate: date
});

使用minDate

var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('#date').datepicker({ 
    minDate: today
});

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日)禁用当前日期之前的所有日期

use 

startDate: '-0d'


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

可以使用data属性:

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


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

解决方案要简单得多:

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

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

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

在这里

 <script>
          $(function () {
              var date = new Date();
              date.setDate(date.getDate() - 7);
            $('#datetimepicker1').datetimepicker({
                maxDate: 'now',
                showTodayButton: true,
                showClear: true,
                minDate: date
            });
        });
    </script>

试一试:

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

禁用过去日期&突出显示今天的日期:

$(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

禁用所有过去日期

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

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

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

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

In html 

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


<script type="text/javascript">
        $(document).ready(function () {
        var dateToday = new Date();
        dateToday.setDate(dateToday.getDate());
        $('#d_start_date').datepicker({
            autoclose: true,
            startDate: dateToday
        })
    });

禁用过去日期只需使用:

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

以下内容对我有效

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

这取决于您在日期选择器上设置的格式首先我们给它指定了格式

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

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

如果您的需求是动态地禁用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()
            })

我希望它能帮助别人。

相关文章：