jQuery Date Picker - Deaktiviert vergangene Daten

89

Ich versuche, einen Datumsbereich mithilfe der Datumsauswahl der Benutzeroberfläche auswählen zu lassen.

Im Feld von / bis sollten Personen nicht in der Lage sein, Daten vor dem heutigen Tag anzuzeigen oder auszuwählen.

Das ist mein Code:

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

Kann mir jemand sagen, wie man Daten vor dem aktuellen Datum deaktiviert?

Harsha MV
quelle

Antworten:

111

Sie müssen ein neues minDateDatumsobjekt erstellen und es so einstellen, wie Sie die Datumsauswahl initialisieren

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

Bearbeiten - von Ihrem Kommentar jetzt funktioniert es wie erwartet http://jsfiddle.net/nicolapeluchetti/dAyzq/1/

Nicola Peluchetti
quelle
2
Ich möchte eine Methode implementieren, mit der die Leute nicht in der Lage sein sollten, ein Datum auszuwählen, das vergangen ist. Wie gestern zuvor usw. Nur ab heute und danach.
Harsha MV
1
@ HarshaMV Ich habe meine Antwort aktualisiert. Sie sollten minDate festlegen, wenn Sie die Datepicker initialisieren.
Nicola Peluchetti
Sie können die showAnim:"",Einstellungen für die Datumsauswahl hinzufügen , um störende Änderungen von Monat und Jahr zu entfernen, wenn Sie Ihre Auswahl treffen.
Misiu
Ich habe Ihr Skript verwendet, erhalte jedoch die Fehlermeldung "Nicht erfasster Referenzfehler: $ ist nicht definiert". Wie werde ich das beheben?
Mable George
@NicolaPeluchetti Das ist genau das, was ich brauche, aber kann dies in asp: Textbox verwendet werden? Ich habe es versucht, aber es funktioniert nicht. Gibt es eine bestimmte Änderung, die ich vornehmen sollte? Vielen Dank im Voraus
wolfQueen
74

Deklarieren Sie die Variable dateToday und legen Sie sie mit der Funktion Date () fest. Verwenden Sie dann diese Variable, um minDate zuzuweisen, das der Parameter von datepicker ist.

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

Das war's ... Die obige Antwort war wirklich hilfreich ... weiter so Jungs ..

Sachin
quelle
Klare und unkomplizierte Antwort. Danke
ASD
46
$('#datepicker-dep').datepicker({
    minDate: 0
});

minDate:0 funktioniert bei mir.

Riya Travel
quelle
19

Verwenden Sie die Option "minDate", um das früheste zulässige Datum einzuschränken. Der Wert "0" bedeutet heute (0 Tage ab heute):

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

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

Mosin
quelle
8

Nur um das hinzuzufügen:

Wenn Sie den Benutzer auch daran hindern müssen, ein Datum in der Vergangenheit manuell einzugeben, ist dies eine mögliche Lösung. Dies ist, was wir letztendlich getan haben (basierend auf der Antwort von @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);
    }
});

Dadurch wird der Wert auf das heutige Datum geändert, wenn der Benutzer ein Datum in der Vergangenheit manuell eingibt.

PålOliver
quelle
6

Live-Demo , versuchen Sie dies,

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

Dies ist ein einfacher Weg, dies zu tun

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

Wir können auch zukünftige Tage deaktivieren

$('#datepicker').datepicker('setEndDate', new Date());
Sameera Prasad Jayasinghe
quelle
1
Danke dir! Du hast Stunden der Frustration gestoppt.
lmiguelvargasf
3

setze startDate Attribut von Datepicker, es funktioniert, unten ist der Arbeitscode

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

jQuery API-Dokumentation - Datepicker

Das minimal wählbare Datum. Bei Einstellung nullgibt es kein Minimum.

Mehrere unterstützte Typen:

Datum: Ein Datumsobjekt, das das Mindestdatum enthält.
Anzahl: Einige Tage ab heute. Zum Beispiel 2repräsentiert two daysvon heute und -1repräsentiert yesterday. Zeichenfolge
: Eine Zeichenfolge in dem durch die dateFormatOption definierten Format oder ein relatives Datum.
Relative Daten müssen Wert- und Periodenpaare enthalten. Gültige Zeiträume sind yfür years, mfür months, wfür weeksund dfür days. Zum Beispiel +1m +7drepräsentiert one month and seven daysvon today.

Um keine früheren Daten als heute anzuzeigen

$('#datepicker').datepicker({minDate: 0});
Mohammad Faisal
quelle
2

Das Attribut " mindate " sollte verwendet werden, um übergebene Daten in jquery datepicker zu deaktivieren.

minDate: new Date () Oder minDate: '0' ist der Schlüssel dafür.

Ex:

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

ODER

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

Ersetzen Sie einfach Ihren Code:

alter Code:

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

});

neuer Code:

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

Indem man es einstellt startDate: new Date()

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

Ich habe eine Funktion zum Deaktivieren des vorherigen Datums und zum Deaktivieren flexibler Wochenendtage (wie Samstag, Sonntag) erstellt.

Wir verwenden die beforeShowDay- Methode des jQuery UI-Datepicker-Plugins.

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

Geben Sie hier die Bildbeschreibung ein

Hier ist heute der 15. September. Ich habe Samstag und Sonntag deaktiviert.

Smit Patadiya
quelle
0

Sie müssen das aktuelle Datum in Variablen wie diesen deklarieren

 $(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)
    });
})
hoga98
quelle
0
$( "#date" ).datetimepicker({startDate:new Date()}).datetimepicker('update', new Date());

new Date(): Funktion Holen Sie sich das heutige Datum Vorheriges Datum sind gesperrt. 100% arbeiten

Muhammad Usman Nasir
quelle