jQuery日期选择器 - 禁用过去的日期

Question

我想使用UI日期选择器有一个日期范围选择。

在from/to字段中，人们不应该能够查看或选择当天之前的日期。

这是我的代码：

$(function() { 
    var dates = $("#from, #to").datepicker({ 
     defaultDate: "+1w", 
     changeMonth: true, 
     numberOfMonths: 1, 
     onSelect: function(selectedDate) { 
      var option = this.id == "from" ? "minDate" : "maxDate", 
       instance = $(this).data("datepicker"), 
       date = $.datepicker.parseDate(
        instance.settings.dateFormat || 
        $.datepicker._defaults.dateFormat, 
        selectedDate, instance.settings); 
      dates.not(this).datepicker("option", option, date); 
     } 
    }); 
}); 

有人能告诉我如何禁用日期以前的以当前日期。

Answer 1

您必须创建一个新的Date对象，并将其设置为minDate当你初始化datepickers

<label for="from">From</label> <input type="text" id="from" name="from"/> <label for="to">to</label> <input type="text" id="to" name="to"/> 

var dateToday = new Date(); 
var dates = $("#from, #to").datepicker({ 
    defaultDate: "+1w", 
    changeMonth: true, 
    numberOfMonths: 3, 
    minDate: dateToday, 
    onSelect: function(selectedDate) { 
     var option = this.id == "from" ? "minDate" : "maxDate", 
      instance = $(this).data("datepicker"), 
      date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings); 
     dates.not(this).datepicker("option", option, date); 
    } 
}); 

编辑 - 从你的评论，现在它按预期工作http://jsfiddle.net/nicolapeluchetti/dAyzq/1/

Answer 2

声明dateToday变量和使用日期（ ）函数来设置它.. 然后使用该变量分配给作为datepicker参数的minDate。

var dateToday = new Date(); 
$(function() { 
    $("#datepicker").datepicker({ 
     numberOfMonths: 3, 
     showButtonPanel: true, 
     minDate: dateToday 
    }); 
}); 

就是这样......上面的回答是真正有用的......坚持下去家伙..日期选择器的

Answer 3

集的startDate属性，它的工作原理，下面是工作的代码

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

Answer 4

jQuery API documentation - datepicker

最小可选日期。当设置为null时，没有最小值。支持

多种类型：

日期：含有最小日期的日期对象。
号码：从今天开始的几天。例如，2代表从现在起的two days，-1代表yesterday。
字符串：由dateFormat选项或相对日期定义的格式中的字符串。
相对日期必须包含值和期间对;有效期限为y为years,m为months,w为weeks和d为days。例如，+1m +7d代表today代表one month and seven days。

为了不显示比今天

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

Answer 5

以往其他的约会，你必须声明当前的日期到变量这样

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

Answer 6

$('#datepicker-dep').datepicker({ 
    minDate: 0 
}); 

minDate:0为我工作。

Answer 7

只需添加到此：

如果您还需要防止用户手动键入在过去的日期，这是一个可能的解决方案。这是我们落得这样做（基于@Nicola Peluchetti的答案）

var dateToday = new Date(); 

$("#myDatePickerInput").change(function() { 
    var updatedDate = $(this).val(); 
    var instance = $(this).data("datepicker"); 
    var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, updatedDate, instance.settings); 

    if (date < dateToday) { 
     $(this).datepicker("setDate", dateToday); 
    } 
}); 

这样做是对的值更改为今天的日期如果用户手动类型在过去的某个日期。

Answer 8

Live Demo，试试这个，

$('#from').datepicker(
    { 
     minDate: 0, 
     beforeShow: function() { 
     $(this).datepicker('option', 'maxDate', $('#to').val()); 
     } 
    }); 
    $('#to').datepicker(
    { 
     defaultDate: "+1w", 
     beforeShow: function() { 
     $(this).datepicker('option', 'minDate', $('#from').val()); 
     if ($('#from').val() === '') $(this).datepicker('option', 'minDate', 0);        
    } 
    }); 

Answer 9

“MINDATE” 属性应该用于禁用jQuery的日期选择器传递日期。

minDate: new Date() Or minDate: '0' is the key for this.

Ex: 

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

OR

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

Answer 10

$("#date").datetimepicker({startDate:new Date()}).datetimepicker('update', new Date()); 

new Date()：函数来获取今天的日期 以前的日期被锁定。 100％的工作

Answer 11

只需更换代码：

旧代码：

$("#dateSelect").datepicker({ 
    showOtherMonths: true, 
    selectOtherMonths: true, 
    changeMonth: true, 
    changeYear: true, 
    showButtonPanel: true, 
    dateFormat: 'yy-mm-dd' 

}); 

新代码：

$("#dateSelect").datepicker({ 
    showOtherMonths: true, 
    selectOtherMonths: true, 
    changeMonth: true, 
    changeYear: true, 
    showButtonPanel: true, 
    dateFormat: 'yy-mm-dd', 
    minDate: 0 
}); 

Answer 12

使用 “的minDate” 选项来限制最早允许的日期。这里

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

文档： 值 “0” 表示今日（从0天今天）http://api.jqueryui.com/datepicker/#option-minDate

Answer 13

这是简单的方法来做到这一点

$('#datepicker').datepicker('setStartDate', new Date()); 

我们也可以禁用以后的日子里

$('#datepicker').datepicker('setEndDate', new Date()); 

Answer 14

我已经创建了禁用上一个日期的函数，disa ble周末灵活的日子（如周六，周日）

我们在使用beforeShowDay jQuery UI datepicker插件的方法。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
var NotBeforeToday = function(date) { 
 
\t \t var now = new Date(); //this gets the current date and time 
 
\t \t if (date.getFullYear() == now.getFullYear() && date.getMonth() == now.getMonth() && date.getDate() >= now.getDate() && (date.getDay() > 0 && date.getDay() < 6)) 
 
\t \t \t return [true,""]; 
 
\t \t if (date.getFullYear() >= now.getFullYear() && date.getMonth() > now.getMonth() && (date.getDay() > 0 && date.getDay() < 6)) 
 
\t \t \t return [true,""]; 
 
\t \t if (date.getFullYear() > now.getFullYear() && (date.getDay() > 0 && date.getDay() < 6)) 
 
\t \t \t return [true,""]; 
 
\t \t return [false,""]; 
 
\t } 
 

 

 
jQuery("#datepicker").datepicker({ 
 
\t \t beforeShowDay: NotBeforeToday 
 
    });

这里今天的日期是9月15号我已经停用周六和周日。