71

Próbuję ustawić zakres dat za pomocą opcji wyboru daty interfejsu użytkownika.Wybór daty jQuery - wyłączanie dat przeszłych

w polu od/do osoby nie powinny mieć możliwości wyświetlania ani wybierania dat poprzednich do dnia dzisiejszego.

To jest mój kod:

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

Czy ktoś mi powiedzieć jak wyłączyć daty ubiegłych do chwili obecnej.

Odpowiedz

83

Musisz utworzyć nowy obiekt Date i ustawić go jako minDate kiedy zainicjować 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); 
    } 
}); 

Edycja - z komentarzem teraz działa zgodnie z oczekiwaniami http://jsfiddle.net/nicolapeluchetti/dAyzq/1/

+2

Chcę wdrożyć sposób, w jaki ludzie nie powinni być w stanie wybrać daty, która minęła ...jak wczoraj dzień wcześniej itd. Tylko od dzisiaj i dalej. –

+1

@HarshaMV zaktualizowałem moją odpowiedź, powinieneś ustawić minDate kiedy zainicjujesz datepickers –

+0

@PoweRoy i zaktualizowałem odpowiedź po jego komentarzu –

65

stwierdzenie dateToday zmienną i wykorzystać date () aby ustawić to .. następnie użyj tej zmiennej, aby przypisać do minDate, która jest parametrem datepicker.

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

... To jest to odpowiedź Przede był bardzo pomocny ... tak trzymać chłopaki ..

+0

Dzięki za te informacje –

+0

Jasna i prosta odpowiedź .. Dzięki – ASD

1

zestaw atrybut startDate z datepicker, to działa, poniżej jest kod roboczych

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

jQuery API documentation - datepicker

Minimalna możliwa do wyboru data. Po ustawieniu na null nie ma minimum.

Wiele rodzajów obsługiwane:

Data: obiekt Date zawierające minimalną datę.
Numer: Liczba dni od dzisiaj. Na przykład 2 reprezentuje two days od dzisiaj i -1 reprezentuje yesterday.
Ciąg: Ciąg w formacie określonym przez opcję dateFormat lub datą względną.
Względne daty muszą zawierać wartości i pary okresów; ważne okresy to y dla years, m dla months, w dla weeks i d dla days. Na przykład +1m +7d reprezentuje one month and seven days z today.

Aby nie wyświetlać wcześniejsze daty inne niż dzisiaj

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

masz zadeklarować bieżącą datę na zmienne takie jak ta

$(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) 
    }); 
}) 
40
$('#datepicker-dep').datepicker({ 
    minDate: 0 
}); 

minDate:0 pracuje dla mnie.

7

Wystarczy dodać do tego:

Jeśli trzeba także uniemożliwić użytkownikowi ręcznie wpisać datę w przeszłości, jest to możliwe rozwiązanie. To, co skończyło się robi (na podstawie odpowiedzi @Nicola Peluchetti za)

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

Co to robi to, aby zmienić wartość do dnia dzisiejszego, gdy użytkownik ręcznie rodzaje datę w przeszłości.

+0

Dzięki za udostępnienie. To działa dobrze. +1. – OO7

4

Live Demo, spróbuj tego,

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

"mindate" atrybut powinien być używany do wyłączania przekazywane dat w jQuery datepicker.

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

Ex: 

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

LUB

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

new Date(): funkcja dostać datę dzisiejszą poprzednia data są zablokowane. 100% pracuje

2

prostu wymienić swój kod:

stary kod:

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

}); 

nowy kod:

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

Użyj opcji "minDate", aby ograniczyć najwcześniejszą dopuszczalną datą. Wartość "0" oznacza dzisiaj (0 dni od dzisiaj):

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

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

1

Jest to łatwy sposób, aby to zrobić

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

również możemy wyłączyć przyszłe dni

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

Utworzono funkcję, aby wyłączyć poprzednią datę, disa ble elastyczne dni weekendowe (np. sobota, niedziela)

Używamy beforeShowDay metody wtyczki datepicker jQuery UI.

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

enter image description here

Oto dzisiejsza data to 15 września mam wyłączone w soboty i niedziele.

Powiązane problemy