在日期选择器上禁用过去的日期

Posted 2023-05-08

技术标签:

【中文标题】在日期选择器上禁用过去的日期【英文标题】：disable past dates on datepicker 【发布时间】：2013-03-23 09:09:50 【问题描述】：

如何在 datetimepicker 上禁用当前日期的过去日期？我尝试了几篇类似问题的帖子，但无法实现，以下是我尝试过的

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
 href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript"
 src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script> 
<script type="text/javascript"
 src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
 src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
 src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
$(function() 
  $('#datetimepicker2').datetimepicker(
    language: 'en',
    pick12HourFormat: true
  );
);
</script>

<div id="datetimepicker2" class="input-append">
<input data-format="MM/dd/yyyy" type="text"/>
<span class="add-on">
  <i  data-date-icon="icon-calendar">
  </i>
</span>

我也试过了

$("datetimepicker2").datepicker( changeYear: true, dateFormat: 'dd/mm/yy', showOn: 'none', showButtonPanel: true,  minDate:'0d' );

和

$("#datetimepicker2").datepicker( minDate: 0 );

【问题讨论】：

到目前为止，在tarruda.github.com/bootstrap-datetimepicker的帮助下这篇文章可能对您有帮助：Disable previous dates in date picker 【参考方案1】：

给mindate 赋值为零，它将禁用过去的日期。

$( "#datepicker" ).datepicker( minDate: 0);

这是一个 Live fiddle 工作示例http://jsfiddle.net/mayooresan/ZL2Bc/

The official documentation is available here

【讨论】：

这在 jsfiddle 中可以正常工作，但在我的项目中却不行，我还包括是的，这在 JSFiddler 中可以正常工作，但是当我们添加 jQuery UI 并且我不打算在我的项目中使用 jQuery UI 时，因为我正在使用 boostrap，是否有另一种方法可以在没有 jQuery UI 的情况下这样做？ "+1" 使用本教程很有帮助：How to disable previous dates in date picker using JQuery【参考方案2】：

问题已解决:)

下面是工作代码

$(function()
    $('#datepicker').datepicker(
        startDate: '-0m'
        //endDate: '+2d'
    ).on('changeDate', function(ev)
        $('#sDate1').text($('#datepicker').data('date'));
        $('#datepicker').datepicker('hide');
    );

)

【讨论】：

#sDate1 是谁的 ID？【参考方案3】：

minDate: dateToday 或minDate: '0' 是这里的关键。尝试设置 minDate 属性。

$(function() 
    $( "#datepicker" ).datepicker(
        numberOfMonths: 2,
        showButtonPanel: true,
        minDate: dateToday // minDate: '0' would work too
    );
);

【讨论】：

希望包含jQuery UI js 我不打算在我的项目中使用 jQuery UI，因为我正在使用 boostrap，如果没有 jQuery UI，还有其他方法吗？ network.convergenceservices.in/forum/40-joomla-tricks/… 完成，下面是代码： $(function() $('#datepicker1').datepicker( startDate: '-0m' //endDate: '+2d' ).on ('changeDate', function(ev) $('#sDate1').text($('#datepicker1').data('date')); $('#datepicker1').datepicker('hide') ; ); );【参考方案4】：

试试这个，

$( "#datepicker" ).datepicker( minDate: new Date());

这里，new Date() 表示今天的日期......

【讨论】：

【参考方案5】：

$(function () 
    $("#date").datepicker( minDate: 0 );
);

【讨论】：

【参考方案6】：

这会起作用：

 var dateToday = new Date();    
 $(function () 
     $("#date").datepicker( 
         minDate: dateToday 
     );
 );

【讨论】：

【参考方案7】：

试试这个，

$("#datetimepicker2").datepicker( startDate: "+0d" );

【讨论】：

【参考方案8】：

如果您想在页面加载时设置日期，请使用：

 $('#datetimepicker1').datetimepicker(
  minDate: new Date()
  );

这会将今天的日期设置为页面加载本身的开始日期并禁用之前的所有日期。但是，如果您想在单击特定文本框时设置日期而不是在页面加载时设置日期，请使用以下命令： $('#datetimepicker1').datetimepicker(); $("#datetimepicker1").on("click", function (e) $('#datetimepicker1').data("DateTimePicker").minDate(new Date()); );

如果我们不想将当前日期设置为最小日期，我们可以使用指定格式的任何字符串来代替 new Date()。例如：

$('#datetimepicker1').data("DateTimePicker").minDate("10/15/2018");

【讨论】：

【参考方案9】：

以下解决方案对我有用。我希望，这对你也有帮助。

$(document).ready(function() 
    $("#datepicker").datepicker( startDate:'+0d' );
);

【讨论】：

startDate: '+0d' 仅有效。 new Date() 解决方案对我不起作用。谢谢【参考方案10】：

var dateToday = new Date();

$('#datepicker').datepicker(                                     
    'startDate': dateToday
);

【讨论】：

欢迎堆栈溢出 :-) 请看How to Answer【参考方案11】：

这对我有用，

$('#datetimepicker2').datetimepicker(
    startDate: new Date()
  );

【讨论】：

【参考方案12】：

要禁用所有以前的日期，请将开始日期设为今天日期

startDate: new Date()

解决方案：禁用今天之前的所有日期

$(function() 
    $( "#datepicker" ).datepicker( startDate: new Date());
 );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"></script>

<div> Select Date <input type="text" id="datepicker" /></div>

解决方案：禁用特定日期的所有过去日期。

$(function() 
    $( "#datepicker" ).datepicker( startDate: new Date("2019-10-15"));
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"></script>

<div> Select Date <input type="text" id="datepicker" /></div>

这将禁用日期 2019 年 10 月 15 日（2019-10-15）之前的所有天

【讨论】：

【参考方案13】：

<div class="input-group date" data-provide="datepicker" data-date-start-date="0d">
    <input type="text" class="form-control" id="input_id" name="input_name" />
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </div>
</div>

【讨论】：

任何让提问者朝着正确方向前进的答案都是有帮助的，但请尝试在您的答案中提及任何限制、假设或简化。简洁是可以接受的，但更全面的解释会更好。【参考方案14】：

您刚刚引入了下面提到的参数 startDate。

var todaydate = new Date();
    $(".leave-day").datepicker(
        autoclose: true,
        todayBtn: "linked",
        todayHighlight: true,
        startDate: todaydate     
      
    ).on('changeDate', function (e) 
        var dateCalendar = e.format();
        dateCalendar = moment(dateCalendar, 'MM/DD/YYYY').format('YYYY-MM-DD');
        $("#date-leave").val(dateCalendar);
    );

【讨论】：

【参考方案15】：

旧日期可以从datetimepicker 中排除然后给你所有的日期选择器输入或文本框属性data-name='date'

$('*[data-name="date"]').datetimepicker(
          format: 'L',
          minDate: new Date()
        );

【讨论】：

【参考方案16】：

Try this'
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <!-- table -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <!-- end table -->

    <script>
       $(function() 
        $('#example').DataTable();
        $("#from_date").datepicker(
            dateFormat: "mm/d/yy",
            maxDate: 0,

            onSelect: function () 



                var minDate = $(this).datepicker('getDate');

                $('#to_date').datepicker('setDate', minDate);
                $('#to_date').datepicker('option', 'maxDate', 0);
                $('#to_date').datepicker('option', 'minDate', minDate);
            
        );
        $('#to_date').datepicker(
            dateFormat: "mm/d/yy"
        );

       );
       </script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <!-- table -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <!-- end table -->

    <script>
       $(function() 
        $('#example').DataTable();
        $("#from_date").datepicker(
            dateFormat: "mm/d/yy",
            maxDate: 0,

            onSelect: function () 



                var minDate = $(this).datepicker('getDate');

                $('#to_date').datepicker('setDate', minDate);
                $('#to_date').datepicker('option', 'maxDate', 0);
                $('#to_date').datepicker('option', 'minDate', minDate);
            
        );
        $('#to_date').datepicker(
            dateFormat: "mm/d/yy"
        );

       );
       </script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <!-- table -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <!-- end table -->

    <script>
       $(function() 
        $('#example').DataTable();
        $("#from_date").datepicker(
            dateFormat: "mm/d/yy",
            maxDate: 0,

            onSelect: function () 



                var minDate = $(this).datepicker('getDate');

                $('#to_date').datepicker('setDate', minDate);
                $('#to_date').datepicker('option', 'maxDate', 0);
                $('#to_date').datepicker('option', 'minDate', minDate);
            
        );
        $('#to_date').datepicker(
            dateFormat: "mm/d/yy"
        );

       );
       </script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <!-- table -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <!-- end table -->

    <script>
       $(function() 
        $('#example').DataTable();
        $("#from_date").datepicker(
            dateFormat: "mm/d/yy",
            maxDate: 0,

            onSelect: function () 



                var minDate = $(this).datepicker('getDate');

                $('#to_date').datepicker('setDate', minDate);
                $('#to_date').datepicker('option', 'maxDate', 0);
                $('#to_date').datepicker('option', 'minDate', minDate);
            
        );
        $('#to_date').datepicker(
            dateFormat: "mm/d/yy"
        );

       );
       </script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <!-- table -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <!-- end table -->

    <script>
       $(function() 
        $('#example').DataTable();
        $("#from_date").datepicker(
            dateFormat: "mm/d/yy",
            maxDate: 0,

            onSelect: function () 



                var minDate = $(this).datepicker('getDate');

                $('#to_date').datepicker('setDate', minDate);
                $('#to_date').datepicker('option', 'maxDate', 0);
                $('#to_date').datepicker('option', 'minDate', minDate);
            
        );
        $('#to_date').datepicker(
            dateFormat: "mm/d/yy"
        );

       );
       </script>

【讨论】：

【参考方案17】：

$("#datetimepicker2").datepicker( 
  dateFormat: "mm/dd/yy", 
  minDate: new Date()
);

【讨论】：

【参考方案18】：

你可以使用

$('#li_from_date').appendDtpicker(
    "dateOnly": true,
    "autodateOnStart": false,
    "dateFormat": "DD/MM/YYYY",
    "closeOnSelected": true,
    "futureonly": true
);

【讨论】：

【参考方案19】：

**这在我的 wordpress 插件中有效 **

 jQuery(document).ready(function($) 
           $("#datepicker").datepicker( minDate: 0);
        );

【讨论】：

【参考方案20】：

使用日期选择器根据开始日期设置结束日期

  $("#AddEvent_txtStartDate").datepicker(
        onSelect: function () 
            minDate = $("#AddEvent_txtStartDate").datepicker("getDate");
            var mDate = new Date(minDate.setDate(minDate.getDate()));
            $("#AddEvent_txtEndDate").datepicker("setDate", mDate);
            $("#AddEvent_txtEndDate").datepicker("option", "minDate", mDate);
        
    );  
    $("#AddEvent_txtEndDate").datepicker();

【讨论】：

【参考方案21】：

这对我有用，

$(函数() $('.datepicker').datepicker( 开始日期：'-0m'，自动关闭：真 ); );

【讨论】：

之所以有效，是因为您在 0m 之前添加了一个减号 (-)。这意味着从今天起减去几个月。您可以找到有关此here 的更多信息。【参考方案22】：

注意：此脚本在您使用 daterangepicker 库时有效。如果您想禁用daterangepicker 上的Sat 或Sunday 日期，请输入这行代码。

        $("#event_start").daterangepicker(
            // minDate: new Date(),
            minYear: 2000,
            showDropdowns: true,
            singleDatePicker: true,
            timePicker: true,
            timePicker24Hour: false,
            timePickerIncrement: 15,
            drops:"up",
            isInvalidDate: function(date) 
                //return true if date is sunday or saturday
                return (date.day() == 0 || date.day() == 6);
            ,
            locale: 
                format: 'MM/DD/YYYY hh:mm A'
            
        );

或者，如果您想同时使用sat 和sun 禁用previous date，则取消注释此行minDate: new Date()

【讨论】：

【参考方案23】：

试试这个。它对我有用。

$('.datepicker').datepicker(
   format: 'mm-dd-yyyy',
   startDate: new Date()
 );

【讨论】：

【参考方案24】：

添加选项

startDate: new Date()

这样引用

$('.installment_date').datepicker(
     startDate: new Date()
);

【讨论】：

【参考方案25】：

在firstDate: DateTime.now()中添加DateTime.now()

请查看Screenshot。

DateTime? date;
  Future pickDate(BuildContext context) async 
    final initialDate = DateTime.now();
    final newDate = await showDatePicker(
      currentDate: DateTime.now(),
      context: context,
      initialDate: date ?? initialDate,
      firstDate: DateTime.now(),
      lastDate: DateTime(DateTime.now().year + 5),
    );

    if (newDate == null) return;

    setState(() => date = newDate);

【讨论】：

【参考方案26】：

To disable past dates，添加这个给定的js：

var $input = $('.datepicker').pickadate();
var picker = $input.pickadate('picker');
picker.set('min',true);`][1]

【讨论】：

以上是关于在日期选择器上禁用过去的日期的主要内容，如果未能解决你的问题，请参考以下文章

如何在日期选择器角度禁用过去的日期

如何根据 PHP 数据库中的结果在 jQuery 日期选择器上禁用一周中的某些天

在引导日期选择器中禁用过去的日期

禁用日期选择器过去的日期和时间

Angular：如何配置日期选择器以禁用多个日期范围？

如何在日期选择器中禁用自定义日期以及以前的日期？