28

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

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

26 回答 26

58

给零mindate，它会禁用过去的日期。

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

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

官方文档可在此处获得

于 2013-04-02T06:55:32.747 回答
19

问题已解决:)

下面是工作代码 

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

})
于 2013-04-23T08:28:33.460 回答
14

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

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

阅读更多

于 2013-04-02T06:54:02.210 回答
10

尝试这个，

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

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

于 2016-08-08T07:17:35.447 回答
9 
$(function () {
    $("#date").datepicker({ minDate: 0 });
});
于 2014-09-30T05:07:31.363 回答
7

这将起作用：

 var dateToday = new Date();    
 $(function () {
     $("#date").datepicker({ 
         minDate: dateToday 
     });
 });
于 2015-07-07T06:52:36.740 回答
4

尝试这个，

$("#datetimepicker2").datepicker({ startDate: "+0d" });
于 2016-10-03T12:55:57.147 回答
4

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

$(document).ready(function() {
    $("#datepicker").datepicker({ startDate:'+0d' });
});
于 2020-03-20T12:35:24.610 回答
4

如果要在页面加载时设置日期，请使用以下命令：

 $('#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");
于 2018-06-15T10:23:12.507 回答
3

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

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

于 2019-10-11T16:48:11.010 回答
3

这对我有用，

$('#datetimepicker2').datetimepicker({
    startDate: new Date()
  });
于 2017-11-09T02:59:59.783 回答
3 
var dateToday = new Date();

$('#datepicker').datepicker({                                     
    'startDate': dateToday
});
于 2016-11-14T07:22:12.153 回答
2 
<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>
于 2018-04-13T12:56:19.687 回答
1

datetimepicker通过提供所有日期选择器输入或文本框属性，data-name='date'可以排除旧日期

$('*[data-name="date"]').datetimepicker({
          format: 'L',
          minDate: new Date()
        });
于 2021-08-31T07:56:51.373 回答
1

您刚刚引入了参数 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);
    });
于 2017-09-21T11:12:16.827 回答
0

加入DateTime.now()_firstDate: DateTime.now()

请看截图。

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);
  }
于 2022-01-21T09:33:15.523 回答
0

使用 datepicker 根据开始日期设置结束日期

  $("#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();
于 2018-12-06T05:38:40.223 回答
0

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

 jQuery(document).ready(function($) {
           $("#datepicker").datepicker({ minDate: 0});
        });
于 2018-07-14T23:23:10.133 回答
0

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

        $("#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'
            }
        });

或者，如果您想禁用previous date也与sat然后sun取消注释此行minDate: new Date()

于 2020-11-06T10:27:31.837 回答
0

这对我有用，

$(function() { $('.datepicker').datepicker({ startDate: '-0m', autoclose: true }); });

于 2020-06-15T19:47:04.137 回答
0

尝试这个。它对我有用。

$('.datepicker').datepicker({
   format: 'mm-dd-yyyy',
   startDate: new Date()
 });
于 2021-06-15T16:40:03.660 回答
0 
$("#datetimepicker2").datepicker({ 
  dateFormat: "mm/dd/yy", 
  minDate: new Date()
});
于 2017-07-25T17:10:11.980 回答
0 
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>
于 2016-10-27T09:28:09.323 回答
0

您可以使用

$('#li_from_date').appendDtpicker({
    "dateOnly": true,
    "autodateOnStart": false,
    "dateFormat": "DD/MM/YYYY",
    "closeOnSelected": true,
    "futureonly": true
});
于 2017-11-28T05:53:46.573 回答
0

添加选项

startDate: new Date()

像这样引用

$('.installment_date').datepicker({
     startDate: new Date()
});
于 2021-12-10T15:02:58.097 回答
-1

要禁用过去的日期，请添加这个给定的 js：

var $input = $('.datepicker').pickadate();
var picker = $input.pickadate('picker');
picker.set('min',true);`][1]
于 2017-07-22T11:32:56.110 回答