jquery - datepicker民國年 - datepicker限制日期



jQuery Date Picker-禁用過去的日期 (10)

我正在嘗試使用UI日期選擇器來選擇日期範圍。

在從/到領域,人們不應該能夠查看或選擇在當前之前的日期。

這是我的代碼:

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

有人可以告訴我如何禁用在當前日期之前的日期。


http://api.jqueryui.com/datepicker/#option-minDate

最小可選日期。 設置為null ,沒有最小值。

支持多種類型:

日期:包含最小日期的日期對象。
數量:從今天開始的幾天。 例如2表示從今天開始的two days-1表示yesterday
字符串:dateFormat選項定義的格式或相對日期的字符串。
相對日期必須包含價值和周期對; 有效期為y yearsmmonthswweeksddays 。 例如, +1m +7d代表從today one month and seven days

為了不顯示除今天以外的其他日期

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

現場演示 ,試試這個,

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


只是為了補充一點:

如果您還需要防止用戶過去手動輸入日期,這是一個可能的解決方案。 這就是我們最終做的(基於@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);
    }
});

如果用戶手動輸入過去的日期,它會將值更改為今天的日期。


您必須創建一個新的日期對象,並在初始化日期選擇器時將其設置為minDate

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


應該使用“ mindate ”屬性來禁用jquery datepicker中的傳遞日期。

minDate:new Date()或者minDate:'0'是這個的關鍵。

Ex:

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

要么

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

聲明dateToday變量並使用Date()函數來設置它..然後使用該變量分配給dateDicker的參數minDate。

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

就是這樣......上面的回答真的很有幫助......讓他們繼續下去......


設置datepicker的startDate屬性,它工作,下面是工作代碼

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

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

new Date() :函數獲取今日日期前一日期被鎖定。 100%的工作


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

minDate:0適合我。





jquery-ui-datepicker