webentwicklung-frage-antwort-db.com.de

JQuery Datepicker - kein Standarddatum

Ich möchte das Standarddatum in meinem JQuery Datepicker entfernen.

Ich versuche den folgenden Code:

$(this).datepicker({defaultDate: ''});

Aber es scheint nicht zu funktionieren. Das heutige Datum ist immer noch als Standard ausgewählt.

22
user352985

Ich habe das Problem mit einem versteckten altField umgangen:

<div id="DatePicker"></div>
<input type="hidden" value="" name="Date" id="Date" />

und das folgende Skript:

<script>
    $(function () {

        $('#DatePicker').datepicker({
            altField: '#Date', // ID of the hidden field
            altFormat: 'dd/mm/yy'
        });

        // Remove the style for the default selected day (today)
        $('.ui-datepicker-current-day').removeClass('ui-datepicker-current-day');

        // Reset the current selected day
        $('#Date').val('');
    });
</script>

Dann habe ich das ausgeblendete Feld #Date in meinen Überprüfungsroutinen verwendet.

9
Lee Gunn

Keine der Antworten zum Zeitpunkt dieses Schreibens funktionierte wirklich für mich, daher war meine Lösung aus ein paar Antworten (für einen Inline-Datepicker) zusammengeschustert.

    $('.calendar').datepicker("setDate", null); // this unsets the datepicker's internal selected date; it still shows a highlight on today's date that looks like a selected date though
    $('.calendar').find(".ui-datepicker-current-day").removeClass("ui-datepicker-current-day"); // this actually removes the highlight
8
J. Polfer

Dies ist eigentlich ein offenes Problem mit jQuery UI Datepicker. Hier ist das Ticket für die Ausgabe:

Ticket 8159

Der Kern dieses Problems ist die Tatsache, dass Datepicker einen defaultDate-Wert von null falsch verarbeitet. Von den hier angebotenen Lösungen gefällt mir das von j-polfer am besten und hat es deshalb positiv bewertet. Der Grund für diese Lösung besteht jedoch darin, dass in die Methode setDate ein Patch integriert ist, um die Auswahl zu löschen, wenn null in den Parameter date übergeben wird. Aber ich wollte warum herausfinden, dass der Datepicker nicht richtig auf das defaultDate: null in den Optionen reagierte, und so habe ich mir die Quelle angesehen.

Ich fand, dass ich drei Änderungen am Quellcode Datepicker vornehmen musste, um dieses Problem zu beheben. Hier sind die Änderungen, die ich vorgenommen habe:

  1. Die Methode _getDefaultDate gab das aktuelle Datum zurück, wenn die Option defaultDate leer war oder fehlte (Dies ist der Kern des Problems). 

Ich habe diese Methode von hier aus geändert ...

    _getDefaultDate: function(inst) {
        return this._restrictMinMax(inst,this._determineDate(inst,this._get(inst, "defaultDate"), new Date()));
    }

dazu ....

_getDefaultDate: function(inst) {
    var def = this._get(inst, "defaultDate");
    return def !== null ? this._restrictMinMax(inst, this._determineDate(inst, def , new Date())): null;
},
  1. Die Methode _setDate setzte den ausgewählten Tag auf den aktuellen Tag, an dem null in den Parameter date übergeben wurde. Ich habe die Zeilen geändert, um dies zu korrigieren:

Ich habe diese Zeile geändert ...

inst.selectedDay = inst.currentDay = newDate.getDate();

zu...

inst.selectedDay = date == null? 0: inst.currentDay = newDate.getDate();

und diese Linie ...

this._adjustInstDate(inst);

zu...

if (date != null) {
    this._adjustInstDate(inst);
}
  1. Schließlich hat die Methode _generateHTML einen Rückgabewert von null aus _getDefaultDate nicht verarbeitet. 

Also habe ich diese Zeile geändert ...

    (defaultDate.getTime() === printDate.getTime() && defaultDate.getTime() === selectedDate.getTime()) ?

zu...

(defaultDate != null && (defaultDate.getTime() === printDate.getTime() && defaultDate.getTime() === selectedDate.getTime())) ?

Das ist es. Jetzt reagiert die Option DatepickerdefaultDate intuitiver auf den Wert von null, der übergeben wird, oder auf das Fehlen dieser Option.

$('#test').datepicker({ altField: '#alt'});  // No date selected
$('#test').datepicker({ altField: '#alt', defaultDate: null});  // No date selected
$('#test').datepicker({ altField: '#alt', defaultDate: 0});  // Today selected
$('#test').datepicker({ altField: '#alt', defaultDate: +1});  // Tomorrow selected
$('#test').datepicker({ altField: '#alt', defaultDate: -1});  // Yesterday selected

Hier ist eine Demo in JSFIDDLE: Datepicker Demo mit defaultDate null

Bitte beachten: Diese Änderungen wurden nicht ausführlich getestet. Daher kann es andere Probleme geben, wenn die _getDefaultDate-Methode jetzt null zurückgeben kann. Also erstmal selber testen! ;)

Hoffe das hilft jemandem! :)

6
BruceHill

Basierend auf den Antworten, die hier veröffentlicht wurden, konnte ich etwas schaffen, das funktionierte. Für meine Zwecke hatte ich einen immer sichtbaren Kalender. Wenn Sie dies für einen Popup-Kalender benötigen, sollten Sie in der Lage sein, den vorhandenen onSelect-Handler zu verwenden, um beim ersten Öffnen etwas Ähnliches auszuführen.

$("selector").datepicker(/* options */).find(".ui-state-active").removeClass("ui-state-active");

Zum Glück ist es mit der neuesten Version von jQuery UI (1.10.2 zum Zeitpunkt des Schreibens) wirklich so einfach. Es scheint nicht zu stören, dass das Widget korrekt funktioniert. Der einzige Nachteil ist, dass die Verwendung des getDate-Getters dazu führt, dass normalerweise das standardmäßig gewählte Datum gewesen wäre.

Für die Zwecke meines Codes ist dies akzeptabel, da meine Benutzer nicht fortfahren können (sie haben nicht einmal die Schaltfläche "Weiter"), bis sie ein gültiges Datum in der Kommissionierung angeklickt haben. Wenn dies nicht der Fall ist, sollte etwas wie Florian Peschkas Antwort Ihnen das geben, was Sie brauchen.

4
Chris Hall

Um den Datepicker-Dialog zu öffnen, muss er in einigen Monaten eines Jahres geöffnet werden. Ich meine, Sie möchten diesen Dialog anzeigen und leer sein? ... 

Ich denke, wenn Sie kein Standarddatum übergeben möchten, erhalten Sie am besten das aktuelle Datum mit:

$(document).ready(function() {
  $('#datepicker').datepicker();
});

Die Übergabe dieses Befehls schlägt fehl, weil das angegebene defaultDate nicht null ist, sondern leer ist

$(this).datepicker({defaultDate: ''});

Dies ist etwas, das tun wird, was im vorherigen Code beabsichtigt war

$(this).datepicker({defaultDate: null});

das Verhalten entspricht jedoch dem ersten Codeblock in dieser Antwort.

3
Garis M Suero

Ich habe das gleiche Problem mit inline datepicker . Das Plugin fügt auf der heutigen Zelle/td die Klasse .ui-datepicker-current-day und .ui-state-active hinzu. Meine Lösung ist die Verwendung einer benutzerdefinierten Klasse, z. B. .ui-datepicker-selected-day, und implementiert beforeShowDay, um die Anzeige des ausgewählten Tages zu steuern. Sowas in der Art:

$("datepicker").datepicker({
  beforeShowDay: function(date) {
  var dateIso = $.datepicker.formatDate("yy-mm-dd", date);
  var dateSelected = $("input").val();
  var classDate = "";
  if(dateSelected === dateIso){
    return [false,"ui-datepicker-selected-day"];
  }else{
    return [true];
  }
}

Beispiel für css zum "Hervorheben" der Zelle:

.ui-widget-content .ui-datepicker-selected-day .ui-state-active{
  background-color: red;
}
+ disable some css from the plugin
2
Remy Mellet

Ich habe $('.datefield').val('') verwendet, um ein leeres Datum anstelle des Standarddatums anzuzeigen.

1
Niraj

Ich weiß, dass dies eine alte Frage ist, und ich habe sie gefunden, weil ich dieselbe Anforderung hatte. Zeigen Sie kein Datum in der Eingabe (Textfeld) an, und wählen Sie ein Datum aus dem Datumsauswahlfeld aus.

Der Markup (MVC)

<div class="leftContent">
     @Html.TextBox("DateShipOn", Nothing, New With {.class = "DateShipOn", .readonly = "readonly"})
</div>

HTML-Ausgabe:

<div class="leftContent">
    <input id="DateShipOn" class="DateShipOn hasDatepicker" type="text" value="" readonly="readonly" name="DateShipOn">
</div>

Skript (in Dokument bereit):

$('.DateShipOn').datepicker({
    constrainInput: true,
    display: true,
    border: true,
    background: true,
    maxDate: "+1m",
    minDate: new Date('@minDate')
});

$('.DateShipOn').datepicker("setDate", new Date());

Der obige Code bewirkt, dass das Eingabefeld den Wert der Variablen 'minDate' in der Anzeige hat UND wenn Sie auf die Eingabe klicken, der Datumsauswahlpunkt herunterfällt und das 'minDate' standardmäßig ausgewählt ist.

Hinweis: Wir erlauben keine manuelle Eingabe. Dies ist der Grund für das Attribut 'readonly'.

Auflösung:

In meinem Fall musste ich nur die Zeile kommentieren/entfernen:

$('.DateShipOn').datepicker("setDate", new Date());

Das Ergebnis:

Der Effekt ist der auf dem Display;

  • Es gibt keinen Standarddatumswert in der Eingabe (Textfeld).
  • Der Benutzer kann die Eingabe nicht eingeben (Textfeld)
  • Die Datumsauswahl fällt herunter, und es ist kein Standarddatum ausgewählt
  • Das minDate verhindert, dass Datumsangaben vor dem minDate-Wert ausgewählt werden
  • Das maxDate verhindert, dass Datumsangaben nach dem maxDate-Wert ausgewählt werden

Hinweis: Bei meiner Anforderung beschränkt das '+ 1m' für maxDate die Datumsauswahl auf nur 30 Tage ab dem minDate-Wert.

Hoffe, das hilft jemandem.

1
Ed DeGagne

Funktioniert bei mir:

$(document).ready(function() {
    $("#datepicker .ui-state-active").removeClass("ui-state-active");
    $("#datepicker .ui-state-highlight").removeClass("ui-state-highlight");
    $("#datepicker .ui-datepicker-today").removeClass("ui-datepicker-today");
});
0

Ich hatte ein ähnliches Problem, aber mit einem bestimmten Verhalten.

(Als Randbemerkung denke ich, dass das erwartete Verhalten darin bestehen sollte, mit dem aktuellen Datum im Kalender zu beginnen, aber nicht es auszuwählen.)

Meine Implementierung beinhaltete einen Inline-Kalender mit einer versteckten Eingabe altField. Was ich tat, war, die altField-Option zu entfernen und eine onSelect-Funktion hinzuzufügen, mit der sie aktualisiert wurde. Auf diese Weise sieht das heutige Datum immer noch ausgewählt aus, aber das ausgeblendete Feld, das den tatsächlichen Wert darstellt, bleibt leer.

0
uv.

Meine Lösung beinhaltet das Überschreiben von jQuery's append, sodass wir die Elemente jedes Mal entfernen können, wenn der HTML-Code regeneriert und an das div angehängt wird. Dadurch wird ein Blinken des Standarddatums beim Wechseln der Monate behoben, und der Hover wird ebenfalls gelöscht.

(function($) {
    var origAppend = $.fn.append;

    $.fn.append = function () {
        return origAppend.apply(this, arguments).trigger("append");
    };
})(jQuery);

var datePickerDiv = $("#date-picker");
datePickerDiv.bind("append", function() {
  $(this).find(".ui-datepicker-days-cell-over").removeClass("ui-datepicker-days-cell-over");
  $(this).find(".ui-datepicker-today a ").removeClass("ui-state-highlight ui-state-active ui-state-hover");
});

datePickerDiv.datepicker();
0
billmccord