Bootstrap Datepicker Vergangene Daten deaktivieren, nachdem das erste Datumsfeld festgelegt wurde

Lesezeit: 4 Minuten

Bootstrap Datepicker Vergangene Daten deaktivieren nachdem das erste Datumsfeld festgelegt
Dominik

Ich arbeite an einer WordPress-Website mit dem auf Bootstrap 3 basierenden Theme.

In einem Formular muss ich Kalenderdatumsauswahlen einfügen. Ich habe eine js-Bibliothek von eyecon hinzugefügt (Demo-Website für die Datepicker-Bibliothek). Ich habe es mit Datumswählern zum Laufen gebracht, aber ich habe Probleme, die Auswahl der vergangenen Zeiten für das Ankunftsfeld zu deaktivieren, wenn die Abfahrtszeit eingestellt ist.

Wenn beispielsweise die Abfahrtszeit auf den 1. März eingestellt ist und der Benutzer auf das Ankunftsfeld im angezeigten Kalender klickt, sollten alle Daten vor dem 2. März deaktiviert werden.

Ich habe mehrere Versionen des Codes auf der Demo-Website ausprobiert, aber sie haben nicht funktioniert. Ich denke, das Problem könnte sein, dass ich jQuery im NoConflict-Modus habe.

Mein aktuelles Skript befindet sich in der footer.php meines Themes. Das Kalender-Popup funktioniert und deaktiviert vergangene Daten, deaktiviert jedoch keine Daten vor dem Ankunftsfeld, sobald das Abreisedatum festgelegt ist.

Dies war der erfolgreichste Versuch, da zumindest die Kalender-Popups bei diesem Versuch funktionierten: http://jsfiddle.net/j5ZKc/

Und das ist mein aktuelles Skript:

<script type="text/javascript">
jQuery(function() {
  jQuery('#dp1, #dp2'
  ).datepicker({startDate: '-0m'}).on('changeDate', function(){
    jQuery( '#dp1, #dp2'
    ).datepicker('hide');
  })
});
</script>

Irgendwelche Vorschläge bitte?

  • Ihre angegebene Demo-Seite enthält ein Check-in/Check-out-Beispiel. Sie haben es versucht und es funktioniert nicht? Es sieht für mich vernünftig aus.

    – snrlx

    29. Januar 14 um 18:38 Uhr

  • Ja, ich habe versucht, es zu verwenden, konnte aber vielleicht nicht die richtige Syntax für js finden, da ich es mit dem NoConflict-Modus verwenden musste, wobei jQuery anstelle von $ verwendet wurde

    – Dominik

    29. Januar 14 um 19:39 Uhr

  • Könnten Sie bitte Ihren Beitrag bearbeiten und zeigen, wie Sie es gemacht hätten. Dann kann ich versuchen, Ihre Fehler zu korrigieren.

    – snrlx

    29. Januar 14 um 20:05 Uhr

  • Ich habe meinen Beitrag bearbeitet und einen Link von jsfiddle hinzugefügt. Danke @nvrmnd :))

    – Dominik

    29. Januar 14 um 20:11 Uhr


  • Ok, also habe ich versucht, Ihren Code so zu ändern, dass er in jsFiddle funktioniert … habe das nicht erreicht, aber ich habe ihn in meiner lokalen Umgebung zum Laufen gebracht. Ich habe den Code aus dem Beispiel nicht zu sehr geändert und es hat funktioniert.

    – snrlx

    29. Januar 14 um 21:15 Uhr

Bootstrap Datepicker Vergangene Daten deaktivieren nachdem das erste Datumsfeld festgelegt
snrlx

Nach einigen Schwierigkeiten habe ich endlich etwas für Sie zum Laufen gebracht:

jsFiddle Bootstrap-datepicker

Was habe ich getan:

ich benutzte gegabelter Bootstrap-Datumspicker. Es ist meiner Meinung nach viel besser dokumentiert und einfacher zu verwenden. Ich habe es zum Laufen gebracht, also sollte das für etwas zählen. Zum Beispiel habe ich das Datum des jeweiligen Datepickers per Aufruf bekommen getDate() auf einem Datepicker:

checkout.datepicker("getDate").valueOf()

Wenn Sie Fragen zu meinem Code haben, lassen Sie es mich wissen!

BEARBEITEN:

Ich habe das frühere jsFiddle aktualisiert (siehe Link oben). Es setzt den Wert von #dp2 automatisch auf das ausgewählte Datum von #dp1 + einen Tag. Daher sollten Sie immer im richtigen Monat sein.

Wenn Sie nicht möchten, dass der Code den Fokus auf #dp2 legt, nachdem ein Datum ausgewählt wurde, entfernen Sie einfach die folgende Zeile in jsFiddle:

$('#dp2')[0].focus();

  • Hallo @nvrmnd Vielen Dank! Das hat mein Problem tatsächlich gelöst … Es funktioniert, aber ich habe jetzt ein kleines neues Problem. Die Sache ist, nicht wenn ich ein Abreisedatum wähle, sagen wir am 1. März, es springt automatisch zum Ankunftsfeld und es lässt mich kein Datum vor dem 1. März wählen (das ist richtig), aber ich muss ein paar Monate ab dem aktuellen Datum manuell scrollen um zum 1. März zu gelangen und dann ein Anreisedatum auszuwählen. Gibt es eine Möglichkeit, das Ankunftsfeld zunächst den Monat / das Datum anzeigen zu lassen, das im Abreisefeld ausgewählt wurde? Ich hoffe, ich mache Sinn, sorry für mein Englisch :))

    – Dominik

    30. Januar 14 um 19:22 Uhr

  • Eine andere Frage, die ich habe, ist, wie kann ich das automatische Springen am Ankunftsdatum deaktivieren, sobald das Abreisedatum (#dp1) festgelegt ist? Und würde dieses Skript für mehrere Felder funktionieren? Sagen wir, ich habe 3 Abfahrtsdaten und dann 1 Ankunft? Vielen Dank @nvrmnd Ich schätze deine Hilfe wirklich sehr! :))

    – Dominik

    30. Januar 14 um 19:22 Uhr

  • Ich habe jsFiddle bearbeitet, um Ihre Anforderungen zu erfüllen. Wenn Sie 4 verschiedene Datumsauswahlen verwenden möchten, müssen Sie natürlich einige kleine Änderungen vornehmen, aber es sollte ziemlich einfach sein, dies zu tun.

    – snrlx

    30. Januar 14 um 21:15 Uhr

  • Danke @nvrmnd Hat dir schon mal jemand gesagt, dass du sein Held bist? : )) Nun, Sir … Sie sind mein Held : D Jetzt muss ich nur noch herausfinden, wie ich dieses Skript für meine andere Seite duplizieren kann, auf der ich mehrere Felder für den Kalender für mehrere Ziele habe. Ich nehme an, das einfache Kopieren und Ändern der ID-Namen im Skript sollte den Job richtig machen? Nochmals vielen Dank! :))

    – Dominik

    30. Januar 14 um 22:28 Uhr


  • Genau, IDs anpassen und gut ist. Wenn Ihnen meine Antwort gefällt, sollten Sie sie positiv bewerten/als akzeptierte Antwort markieren, damit andere wissen, dass das Problem gelöst ist.

    – snrlx

    31. Januar 14 um 0:25 Uhr

1643038148 371 Bootstrap Datepicker Vergangene Daten deaktivieren nachdem das erste Datumsfeld festgelegt
CHAND MOHAMMED

Probieren Sie dieses Code-Snippet aus:

$('#changestartdate').datetimepicker({
minDate:new Date()
});

  • minDate wurde aktualisiert auf startDate für alle, die sich das kürzlich angesehen haben.

    – Ross Edman

    6. März 15 um 17:36 Uhr

  • Ich musste minDate über startDate verwenden: startDate gibt einen js-Konsolenfehler von Uncaught TypeError: option startDate is not recognized!

    – Nubtakulär

    23. Juni 15 um 18:55 Uhr


.

619830cookie-checkBootstrap Datepicker Vergangene Daten deaktivieren, nachdem das erste Datumsfeld festgelegt wurde

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy