jQuery Tarih Seçici - geçmiş tarihleri ​​devre dışı bırak


91

UI tarih seçiciyi kullanarak bir tarih Aralığı seçmeye çalışıyorum.

kimden / kimden alanında insanlar bugüne kadarki tarihleri ​​görüntüleyememeli veya seçmemelidir.

Bu benim kodum:

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

Biri bana şimdiki tarihten önceki tarihleri ​​nasıl devre dışı bırakacağımı söyleyebilir.

Yanıtlar:


114

Yeni bir tarih nesnesi oluşturmalı ve bunu tarih minDateseçici başlattığınız zamanki gibi ayarlamalısınız.

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

Düzenleme - yorumunuzdan artık beklendiği gibi çalışıyor http://jsfiddle.net/nicolapeluchetti/dAyzq/1/


2
İnsanların geçmiş bir tarihi seçemeyecekleri bir yol uygulamak istiyorum .. tıpkı dün önceki gün gibi ... Sadece bugünden itibaren.
Harsha MV

1
@HarshaMV Cevabımı güncelledim, sadece veri toplayıcıları başlattığınızda minDate ayarlamalısınız
Nicola Peluchetti

showAnim:"",Seçiminizi yaptığınızda can sıkıcı ay ve yıl değişikliklerini kaldırmak için tarih seçici ayarlarına ekleyebilirsiniz .
Misiu

Komut dosyanızı kullandım, ancak "Yakalanmamış Referans Hatası: $ tanımlı değil" hatası alıyorum. bunu nasıl düzelteceğim
mable george

@NicolaPeluchetti Bu tam olarak ihtiyacım olan şey, ancak bu asp: Textbox'ta kullanılabilir mi? Denedim ama çalışmıyor, yapmam gereken belirli bir değişiklik var mı? Şimdiden teşekkür ederim
wolfQueen

74

DateToday değişkenini bildirin ve onu ayarlamak için Date () işlevini kullanın. Daha sonra, datepicker parametresi olan minDate'e atamak için bu değişkeni kullanın.

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

İşte bu ... Yukarıdaki cevap gerçekten yardımcı oldu ... devam edin çocuklar ..


Açık ve anlaşılır cevap .. Teşekkürler
ASD

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

minDate:0 benim için çalışıyor.


20

İzin verilen en erken tarihi kısıtlamak için "minDate" seçeneğini kullanın. "0" değeri bugün anlamına gelir (bugünden itibaren 0 gün):

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

Dokümanlar burada: http://api.jqueryui.com/datepicker/#option-minDate


8

Sadece buna eklemek için:

Kullanıcının geçmişte manuel olarak bir tarih yazmasını da önlemeniz gerekiyorsa , bu olası bir çözümdür. Sonunda yaptığımız şey bu (@Nicola Peluchetti'nin cevabına göre)

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

Bunun yaptığı şey, kullanıcı manuel olarak geçmiş bir tarih girerse değeri bugünün tarihine değiştirmektir.


6

Canlı Demo , bunu dene,

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

5

Bunu yapmanın kolay yolu bu

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

ayrıca gelecek günleri devre dışı bırakabiliriz

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

1
Teşekkür ederim! Saatler süren hüsranı bıraktın.
lmiguelvargasf

4

datepicker'ın startDate özniteliğini ayarlayın, çalışır, aşağıda çalışma kodu

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

3

Ayarlayarak startDate: new Date()

$('.date-picker').datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    ...
    startDate: new Date(),
});

2

jQuery API belgeleri - datepicker

Seçilebilir minimum tarih. Olarak ayarlandığında nullminimum yoktur.

Birden çok tür desteklenir:

Tarih: Minimum tarihi içeren bir tarih nesnesi.
Sayı: Bugünden itibaren birkaç gün. Örneğin 2temsil two daysbugünden ve -1temsil yesterday.
Dize:dateFormat Seçenek veya göreli tarih tarafından tanımlanan formattaki bir dize .
Göreli tarihler değer ve dönem çiftleri içermelidir; geçerli süreler yfor years, mfor months, wfor weeksve dfor days. Örneğin, +1m +7dtemsil one month and seven dayseden today.

Bugün dışındaki önceki tarihleri ​​göstermemek için

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

2

jquery datepicker'da geçirilen tarihleri ​​devre dışı bırakmak için " mindate " özelliği kullanılmalıdır.

minDate: new Date () Veya minDate: '0' bunun anahtarıdır.

Ex:

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

VEYA

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

2

sadece kodunuzu değiştirin:

eski kod:

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

});

yeni kod:

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

1

Önceki tarihi devre dışı bırakmak, esnek hafta sonu günlerini devre dışı bırakmak için işlev oluşturdum (Cumartesi, Pazar gibi)

JQuery UI datepicker eklentisinin beforeShowDay yöntemini kullanıyoruz .

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


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

görüntü açıklamasını buraya girin

İşte bugünün tarihi 15 Eylül Cumartesi ve Pazar'ı devre dışı bıraktım.


0

bunun gibi değişkenlere güncel tarihi bildirmelisiniz

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

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

new Date(): fonksiyon bugünün tarihini al önceki tarih kilitlenir. % 100 çalışıyor


0

basitçe kullanabilirsin

startDate: 'today'

benim için iyi çalışıyor.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.