Wie viele andere bin ich bei dem Versuch, dies zu tun, auf zahlreiche Probleme gestoßen, und nur eine Kombination der veröffentlichten Lösungen und schließlich ein großer Hack, um es perfekt zu machen, hat mir eine Lösung gebracht.
Probleme mit anderen Lösungen in diesem Thread, die ich ausprobiert habe:
- Wenn Sie ein neues Datum in einer Datumsauswahl auswählen, wird auch das (interne) Datum anderer Datumsauswahl geändert. Wenn Sie also die anderen erneut öffnen (oder versuchen, ihr Datum abzurufen), haben sie ein anderes Datum als das in ihrer zugewiesenen Eingabe angezeigte -Feld.
- Der Datepicker würde sich beim erneuten Öffnen nicht an das Datum "erinnern".
- Der Code zum Jonglieren der Daten verwendete Teilzeichenfolgen, sodass er nicht mit allen Formaten kompatibel war.
- "My monthpicker" hat das Eingabefeld nur beim Schließen geändert und nicht, wenn die Werte geändert wurden.
- Das Eingabefeld wird nicht korrekt aktualisiert, wenn Sie eine falsch formatierte Eingabezeichenfolge für ein Datum eingeben und dann auf der Datumsauswahl auf "Schließen" klicken.
- Ich kann keine normalen Datepicker, die die Tage anzeigen, auf derselben Seite haben wie Monthpicker, die die Tage nicht anzeigen.
Ich habe endlich einen Weg gefunden, all diese Probleme zu beheben . Die ersten vier können einfach behoben werden, indem Sie sorgfältig darauf achten, wie Sie Ihre Datums- und Monatsauswahl in ihrem internen Code referenzieren, und natürlich einige manuelle Aktualisierungen Ihrer Auswahl vornehmen. Dies können Sie in den Instanziierungsbeispielen unten sehen. Das fünfte Problem kann behoben werden, indem den Datepicker-Funktionen benutzerdefinierter Code hinzugefügt wird.
HINWEIS: Sie müssen NICHT die folgenden Monthpicker-Skripte verwenden, um die ersten drei Probleme in Ihrem normalen Datepicker zu beheben. Verwenden Sie einfach das Datepicker-Instanziierungsskript am Ende dieses Beitrags.
Um nun Monthpicker zu verwenden und das letzte Problem zu beheben, müssen wir die Datepicker und die Monthpicker trennen. Wir könnten eines der wenigen jQuery-UI-Monthpicker-Addons da draußen bekommen, aber einige haben keine Flexibilität / Fähigkeit zur Lokalisierung, andere keine Animationsunterstützung ... also, was tun? Rollen Sie Ihre "eigenen" aus dem Datepicker-Code! Auf diese Weise erhalten Sie einen voll funktionsfähigen Monthpicker mit allen Funktionen des Datepickers, ohne dass Tage angezeigt werden müssen.
Ich habe ein Monthpicker-JS-Skript und das zugehörige CSS-Skript unter Verwendung der unten beschriebenen Methode mit dem Code jQuery-UI v1.11.1 geliefert. Kopieren Sie diese Code-Schnipsel einfach in zwei neue Dateien, monthpicker.js und monthpicker.css.
Wenn Sie mehr über den recht einfachen Vorgang erfahren möchten, mit dem ich den Datepicker in einen Monthpicker konvertiert habe, scrollen Sie zum letzten Abschnitt.
Fügen Sie nun die Datepicker und Monthpicker zur Seite hinzu!
Diese folgenden Javascript-Codefragmente funktionieren mit mehreren Datepickern und / oder Monthpickern auf der Seite, ohne die oben genannten Probleme! Im Allgemeinen durch Verwendung von '$ (this)' behoben. viel :)
Das erste Skript ist für einen normalen Datepicker und das zweite für die "neuen" Monthpicker.
Das auskommentierte .after , mit dem Sie ein Element zum Löschen des Eingabefelds erstellen können, wird aus Paul Richards 'Antwort gestohlen.
Ich verwende das "MM yy" -Format in meinem Monthpicker und das 'yy-mm-dd'-Format in meinem Datepicker, aber dies ist vollständig kompatibel mit allen Formaten , sodass Sie jedes gewünschte Format verwenden können. Ändern Sie einfach die Option 'dateFormat'. Die Standardoptionen 'showButtonPanel', 'showAnim' und 'yearRange' sind natürlich optional und können an Ihre Wünsche angepasst werden.
Hinzufügen eines Datepickers
Datepicker-Instanziierung.
Dieser geht von vor 90 Jahren bis heute. Es hilft Ihnen, das Eingabefeld korrekt zu halten, insbesondere wenn Sie die Optionen defaultDate, minDate und maxDate festlegen. Wenn Sie dies nicht tun, kann es damit umgehen. Es funktioniert mit jedem von Ihnen ausgewählten dateFormat.
$('#MyDateTextBox').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showMonthAfterYear: true,
showWeek: true,
showAnim: "drop",
constrainInput: true,
yearRange: "-90:",
minDate: new Date((new Date().getFullYear() - 90), new Date().getMonth(), new Date().getDate()),
maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
onClose: function (dateText, inst) {
// When onClose is called after we have clicked a day (and not clicked 'Close' or outside the datepicker), the input-field is automatically
// updated with a valid date-string. They will always pass, because minDate and maxDate are already enforced by the datepicker UI.
// This try is to catch and handle the situations, where you open the datepicker, and manually type in an invalid date in the field,
// and then close the datepicker by clicking outside the datepicker, or click 'Close', in which case no validation takes place.
try {
// If datepicker can parse the date using our formatstring, the instance will automatically parse
// and apply it for us (after the onClose is done).
// If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
// If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());
// typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
// reset to the last set default date.
// You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
if (typedDate == null)throw "No date selected";
// We do a manual check to see if the date is within minDate and maxDate, if they are defined.
// If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
var minDate = $(this).datepicker("option", "minDate");
var maxDate = $(this).datepicker("option", "maxDate");
if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";
// We update the default date, because the date seems valid.
// We do not need to manually update the input-field, as datepicker has already done this automatically.
$(this).datepicker('option', 'defaultDate', typedDate);
}
catch (err) {
console.log("onClose: " + err);
// Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
// a new valid date, by clicking on a day.
// Instead, we set the current date, as well as the value of the input-field, to the last selected (and
// accepted/validated) date from the datepicker, by getting its default date. This only works, because
// we manually change the default date of the datepicker whenever a new date is selected, in both 'beforeShow'
// and 'onClose'.
var date = $(this).datepicker('option', 'defaultDate');
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
$(this).datepicker('setDate', date);
}
},
beforeShow: function (input, inst) {
// beforeShow is particularly irritating when initializing the input-field with a date-string.
// The date-string will be parsed, and used to set the currently selected date in the datepicker.
// BUT, if it is outside the scope of the minDate and maxDate, the text in the input-field is not
// automatically updated, only the internal selected date, until you choose a new date (or, because
// of our onClose function, whenever you click close or click outside the datepicker).
// We want the input-field to always show the date that is currently chosen in our datepicker,
// so we do some checks to see if it needs updating. This may not catch ALL cases, but these are
// the primary ones: invalid date-format; date is too early; date is too late.
try {
// If datepicker can parse the date using our formatstring, the instance will automatically parse
// and apply it for us (after the onClose is done).
// If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
// If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());
// typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
// reset to the last set default date.
// You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
if (typedDate == null)throw "No date selected";
// We do a manual check to see if the date is within minDate and maxDate, if they are defined.
// If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
var minDate = $(this).datepicker("option", "minDate");
var maxDate = $(this).datepicker("option", "maxDate");
if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";
// We update the input-field, and the default date, because the date seems valid.
// We also manually update the input-field, as datepicker does not automatically do this when opened.
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), typedDate));
$(this).datepicker('option', 'defaultDate', typedDate);
}
catch (err) {
// Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
// a new valid date, by clicking on a day.
// We want the same behavior when opening the datepicker, so we set the current date, as well as the value
// of the input-field, to the last selected (and accepted/validated) date from the datepicker, by getting
// its default date. This only works, because we manually change the default date of the datepicker whenever
// a new date is selected, in both 'beforeShow' and 'onClose', AND have a default date set in the datepicker options.
var date = $(this).datepicker('option', 'defaultDate');
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
$(this).datepicker('setDate', date);
}
}
})
//.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
// $("<a href='javascript: void(0);'>clear</a>").click(function() {
// $(this).prev().val('');
// })
//)
;
Hinzufügen eines Monthpickers
Fügen Sie die Datei monthpicker.js und die Datei monthpicker.css in die Seite ein, auf der Sie die monthpickers verwenden möchten.
Monthpicker-Instanziierung
Der von diesem Monthpicker abgerufene Wert ist immer der ERSTE Tag des ausgewählten Monats. Beginnt im aktuellen Monat und reicht von vor 100 Jahren bis zu 10 Jahren in die Zukunft.
$('#MyMonthTextBox').monthpicker({
dateFormat: 'MM yy',
changeMonth: true,
changeYear: true,
showMonthAfterYear: true,
showAnim: "drop",
constrainInput: true,
yearRange: "-100Y:+10Y",
minDate: new Date(new Date().getFullYear() - 100, new Date().getMonth(), 1),
maxDate: new Date((new Date().getFullYear() + 10), new Date().getMonth(), 1),
defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
// Monthpicker functions
onClose: function (dateText, inst) {
var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
$(this).monthpicker('option', 'defaultDate', date);
$(this).monthpicker('setDate', date);
},
beforeShow: function (input, inst) {
if ($(this).monthpicker("getDate") !== null) {
// Making sure that the date set is the first of the month.
if($(this).monthpicker("getDate").getDate() !== 1){
var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
$(this).monthpicker('option', 'defaultDate', date);
$(this).monthpicker('setDate', date);
}
} else {
// If the date is null, we reset it to the defaultDate. Make sure that the defaultDate is always set to the first of the month!
$(this).monthpicker('setDate', $(this).monthpicker('option', 'defaultDate'));
}
},
// Special monthpicker function!
onChangeMonthYear: function (year, month, inst) {
$(this).val($.monthpicker.formatDate($(this).monthpicker('option', 'dateFormat'), new Date(year, month - 1, 1)));
}
})
//.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
// $("<a href='javascript: void(0);'>clear</a>").click(function() {
// $(this).prev().val('');
// })
//)
;
Das ist es!
Das ist alles, was Sie brauchen, um einen Monatspicker zu machen.
Ich kann anscheinend keine jsfiddle damit arbeiten lassen, aber es funktioniert für mich in meinem ASP.NET MVC-Projekt. Tun Sie einfach das, was Sie normalerweise tun, um Ihrer Seite einen Datepicker hinzuzufügen, und integrieren Sie die oben genannten Skripte, möglicherweise indem Sie den Selektor (dh $ ("# MyMonthTextBox")) auf etwas ändern, das für Sie funktioniert.
Ich hoffe das hilft jemandem.
Links zu Pastebins für einige zusätzliche Datums- und Monatsauswahl-Setups:
Monthpicker arbeitet am letzten Tag des Monats . Das Datum, das Sie von diesem Monatspicker erhalten, ist immer der letzte Tag des Monats.
Zwei zusammenarbeitende Monthpicker ; 'start' arbeitet am ersten des Monats und 'end' arbeitet am letzten des Monats. Sie sind beide voneinander eingeschränkt. Wenn Sie also einen Monat am Ende auswählen, der vor dem ausgewählten Monat am Anfang liegt, ändert sich der Start in den gleichen Monat wie das Ende. Und umgekehrt. OPTIONAL: Wenn Sie einen Monat bei 'Start' auswählen, wird das 'minDate' bei 'Ende' auf diesen Monat gesetzt. Um diese Funktion zu entfernen, kommentieren Sie eine Zeile in onClose aus (lesen Sie die Kommentare).
Zwei zusammenarbeitende Datepicker ; Sie sind beide voneinander eingeschränkt. Wenn Sie also ein Datum am Ende auswählen, das vor dem ausgewählten Datum am Start liegt, wird "Start" in den gleichen Monat wie "Ende" geändert. Und umgekehrt. OPTIONAL: Wenn Sie ein Datum bei 'Start' auswählen, wird das 'minDate' bei 'Ende' auf dieses Datum gesetzt. Um diese Funktion zu entfernen, kommentieren Sie eine Zeile in onClose aus (lesen Sie die Kommentare).
Wie ich den DatePicker in einen MonthPicker verwandelt habe
Ich habe den gesamten Javascript-Code aus jquery-ui-1.11.1.js, der sich auf ihren Datepicker bezieht, in eine neue js-Datei eingefügt und die folgenden Zeichenfolgen ersetzt:
- "datepicker" ==> "monthpicker"
- "Datepicker" ==> "Monthpicker"
- "Datumsauswahl" ==> "Monatsauswahl"
- "Datumsauswahl" ==> "Monatsauswahl"
Dann habe ich den Teil der for-Schleife entfernt, der das gesamte UI-Datepicker-Kalender-Div erstellt (das Div, das andere Lösungen mithilfe von CSS verbergen). Dies kann in der _generateHTML: Funktion (inst) gefunden werden.
Suchen Sie die Zeile mit der Aufschrift:
"</div><table class='ui-datepicker-calendar'><thead>" +
Markieren Sie alles von nach dem schließenden div-Tag bis zur Zeile (und ohne diese ), in der steht:
drawMonth++;
Jetzt wird es unglücklich sein, weil wir einige Dinge schließen müssen. Fügen Sie nach dem Schließen des Div-Tags von zuvor Folgendes hinzu:
";
Der Code sollte jetzt gut zusammengefügt werden. Hier ist ein Code-Snippet, das zeigt, was Sie am Ende hätten haben sollen:
...other code...
calender += "<div class='ui-monthpicker-header ui-widget-header ui-helper-clearfix" + cornerClass + "'>" +
(/all|left/.test(cornerClass) && row === 0 ? (isRTL ? next : prev) : "") +
(/all|right/.test(cornerClass) && row === 0 ? (isRTL ? prev : next) : "") +
this._generateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate,
row > 0 || col > 0, monthNames, monthNamesShort) + // draw month headers
"</div>";
drawMonth++;
if (drawMonth > 11) {
drawMonth = 0;
drawYear++;
}
...other code...
Dann habe ich den Code aus jquery-ui.css, der sich auf die Datepicker bezieht, in eine neue CSS-Datei kopiert / eingefügt und die folgenden Zeichenfolgen ersetzt:
- "datepicker" ==> "monthpicker"
