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

Question

Answer 1

将 0 赋予

mindate

，它将禁用过去的日期。

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

这是一个现场小提琴工作示例http://jsfiddle.net/mayooresan/ZL2Bc/

官方文档可以在这里

Answer 2

问题已解决：）

下面是工作代码

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

})

Answer 3

minDate: dateToday

或

minDate: '0'

是这里的关键。尝试设置 minDate 属性。

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

了解更多

Answer 4

试试这个，

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

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

Answer 5

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

Answer 6

这会起作用：

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

Answer 7

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

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

Answer 8

试试这个，

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

Answer 9

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

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

Answer 10

var dateToday = new Date();

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

Answer 11

这对我有用，

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

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

Answer 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>

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

Answer 15

旧日期可以从

datetimepicker

中排除给你所有的日期选择器输入或文本框属性

data-name='date'

然后

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

Answer 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>

Answer 17

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

Answer 18

你可以使用

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

Answer 19

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

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

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

Answer 21

这对我有用，

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

Answer 22

注意： 此脚本在您使用

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

Answer 23

试试这个。它对我有用。

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

Answer 24

添加选项

startDate: new Date()

这样参考

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

Answer 25

在

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

Answer 26

// Previous one day back.
//minDate 0 means current date, and MinDate -1 previous 1 day back.
<p>Date: <input type="text" id="datepicker" /></p>
$(function() {
    $( "#datepicker" ).datepicker({ 
     dateFormat: "dd/mm/yy",
     changeMonth: true,
     changeYear: true,
     yearRange: "-0:+1",
    minDate: -1
    
    });
  });

Answer 27

试试这个。它对我有用：

 const startDatePicker = document.getElementById('travelStartDate');
 startDatePicker.addEventListener('focus', () => {
   startDatePicker.min = new Date().toISOString().split('T')[0];
 });

Answer 28

window.onload = function() {
    const today = new Date().toISOString().split('T')[0];
    const dateInput = document.getElementById('date');
    dateInput.setAttribute('min', today);
}

这会将输入日期设置为今天。它不会禁止用户选择过去的日期。

Answer 29

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

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

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

问题描述投票：0回答：29

29个回答

最新问题

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

问题描述 投票：0回答：29

29个回答

最新问题

问题描述投票：0回答：29