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

【问题标题】：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 });

【问题讨论】：

标签： jquery jquery-mobile twitter-bootstrap


【解决方案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
    });
});

Read more

【讨论】：

  • 希望包含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
});

            【讨论】：

            【解决方案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]

                                      【讨论】：

                                        猜你喜欢
                                        • 2021-04-15
                                        • 2016-07-03
                                        • 2018-10-16
                                        • 1970-01-01
                                        • 2017-05-12
                                        • 2015-11-01
                                        • 2019-11-29
                                        • 2021-01-11
                                        • 2017-03-02
                                        相关资源
                                        最近更新 更多
                                        热门标签
                                        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode