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號我已經停用週六和週日。