Podobnie jak wiele innych, napotkałem wiele problemów, próbując to zrobić, i tylko kombinacja opublikowanych rozwiązań, a ostatecznie duży hack, aby uczynić to idealnym, dało mi rozwiązanie.
Problemy z innymi rozwiązaniami w tym wątku, które próbowałem:
- Wybór nowej daty w selektorze dat zmienia również (wewnętrzną) datę innych wybieraczy dat, więc kiedy ponownie otworzysz inne (lub spróbujesz uzyskać ich datę), będą mieli inną datę niż ta wyświetlana w przypisanym do nich wejściu -pole.
- Selektor daty nie „zapamięta” daty, gdy zostanie ponownie otwarty.
- Kod do żonglowania datami podciągów, więc nie był kompatybilny ze wszystkimi formatami.
- „Mój Monthpicker” zmieniał pole wejściowe tylko po jego zamknięciu, a nie za każdym razem, gdy zmieniano wartości.
- Pole wejściowe nie jest poprawnie aktualizowane, jeśli wpiszesz niepoprawnie sformatowany ciąg wejściowy dla daty, a następnie klikniesz „Zamknij” na selektorze dat.
- Nie mogę mieć zwykłych datepickerów, które pokazują dni, na tej samej stronie co miesiącpickery, które nie pokazują dni.
W końcu znalazłem sposób na rozwiązanie wszystkich tych problemów . Pierwsze cztery można naprawić, zachowując ostrożność w odniesieniu do sposobu wybierania datowników i osób wybierających miesiące w ich wewnętrznym kodzie, i oczywiście wykonując kilka ręcznych aktualizacji wybieraczy. Można to zobaczyć w przykładach tworzenia instancji u dołu. Piąty problem można rozwiązać, dodając niestandardowy kod do funkcji datepicker.
UWAGA: NIE musisz używać następujących skryptów Monthpicker, aby naprawić pierwsze trzy problemy w normalnym narzędziu datepicker. Po prostu użyj skryptu tworzenia wystąpień datepicker u dołu tego postu.
Teraz, aby użyć Monthpickers i naprawić ostatni problem, musimy oddzielić datepickers i Monthpickers. Moglibyśmy uzyskać jeden z niewielu dodatków jpuery-UI na miesiąc, ale niektórym brakuje elastyczności / zdolności lokalizacji, niektórym brakuje wsparcia animacji ... więc co robić? Rzuć swój „własny” z kodu datepicker! Daje to w pełni funkcjonalny moduł wyboru miesiąca, ze wszystkimi funkcjami modułu wyboru daty, bez wyświetlania dni.
Dostarczyłem skrypt js Monthpicker i towarzyszący mu skrypt CSS , używając metody opisanej poniżej, z kodem jQuery-UI v1.11.1. Po prostu skopiuj te fragmenty kodu do dwóch nowych plików, odpowiednio monthpicker.js i monthpicker.css.
Jeśli chcesz przeczytać o dość prostym procesie, za pomocą którego przekonwertowałem datepicker na monthpicker, przewiń w dół do ostatniej sekcji.
Teraz, aby dodać datepickers i monthpickers do strony!
Poniższe fragmenty kodu javascript działają z wieloma modułami wyboru daty i / lub miesiącami na stronie, bez wyżej wymienionych problemów! Naprawiono ogólnie za pomocą „$ (this)”. dużo :)
Pierwszy skrypt jest przeznaczony dla normalnego datepicker'a, a drugi dla „nowych” monthpickerów.
Skomentowane później , który pozwala utworzyć element do wyczyszczenia pola wejściowego, został skradziony z odpowiedzi Paula Richardsa.
Używam formatu „MM rr” w narzędziu Monthpicker i formatu „rr-mm-dd” w narzędziu datepicker, ale jest on w pełni kompatybilny ze wszystkimi formatami , więc możesz swobodnie używać dowolnego z nich. Po prostu zmień opcję „dateFormat”. Standardowe opcje „showButtonPanel”, „showAnim” i „yearRange” są oczywiście opcjonalne i można je dostosować do własnych życzeń.
Dodawanie datownika
Tworzenie wystąpienia Datepicker.
Ten trwa od 90 lat do dziś. Pomaga zachować poprawność pola wejściowego, zwłaszcza jeśli ustawisz opcje defaultDate, minDate i maxDate, ale może to obsłużyć, jeśli tego nie zrobisz. Będzie działał z dowolnym wybranym formatem daty.
$('#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('');
// })
//)
;
Dodanie selektora miesiąca
Dołącz plik monthpicker.js i plik monthpicker.css na stronie, z której chcesz korzystać z Monthpickers.
Tworzenie instancji Monthpicker
Wartość pobrana z tego selektora miesięcy jest zawsze PIERWSZYM dniem wybranego miesiąca. Rozpoczyna się w bieżącym miesiącu i waha się od 100 lat temu i 10 lat w przyszłość.
$('#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('');
// })
//)
;
Otóż to!
To wszystko, czego potrzebujesz, aby wybrać miesięcznik.
Nie mogę sprawić, aby jsfiddle z tym działało, ale działa dla mnie w moim projekcie ASP.NET MVC. Po prostu zrób to, co zwykle robisz, aby dodać datepicker do swojej strony i dołączyć powyższe skrypty, prawdopodobnie zmieniając selektor (czyli $ („# MyMonthTextBox”)) na coś, co działa dla Ciebie.
Mam nadzieję, że to komuś pomoże.
Odnośniki do pastebins dla niektórych dodatkowych ustawień wyboru daty i miesiąca:
Monthpicker działa na ostatni dzień miesiąca . Datą otrzymaną z tego selektora miesiąca będzie zawsze ostatni dzień miesiąca.
Dwóch współpracujących członków miesiąca ; „początek” działa pierwszego dnia miesiąca, a „koniec” działa ostatniego miesiąca. Oba są wzajemnie ograniczone, więc wybranie miesiąca „końca”, który jest przed wybranym miesiącem „początku”, zmieni „początek” na ten sam miesiąc co „koniec”. I wzajemnie. OPCJONALNIE: Wybierając miesiąc przy „początku”, „minDate” przy „końcu” jest ustawiany na ten miesiąc. Aby usunąć tę funkcję, skomentuj jeden wiersz w onClose (przeczytaj komentarze).
Dwóch współpracujących datepickerów ; Oba są wzajemnie ograniczone, więc wybranie daty „końca”, która jest wcześniejsza niż wybrana data „początku”, zmieni „początek” na ten sam miesiąc, co „koniec”. I wzajemnie. OPCJONALNIE: Wybierając datę przy „początku”, „minDate” przy „końcu” jest ustawiane na tę datę. Aby usunąć tę funkcję, skomentuj jeden wiersz w onClose (przeczytaj komentarze).
Jak zmieniłem DatePicker na MonthPicker
Wziąłem cały kod javascript z jquery-ui-1.11.1.js odnoszący się do ich datepicker, wkleiłem go do nowego pliku js i zastąpiłem następujące ciągi:
- „datepicker” ==> „monthpicker”
- „Datepicker” ==> „Monthpicker”
- „wybór daty” ==> „wybór miesiąca”
- „Wybór daty” ==> „Wybór miesiąca”
Następnie usunąłem część pętli for, która tworzy cały div div ui-datepicker-calendar (div, który inne rozwiązania ukrywają za pomocą CSS). Można to znaleźć w _generateHTML: function (inst).
Znajdź linię, która mówi:
"</div><table class='ui-datepicker-calendar'><thead>" +
Oznacz wszystko od zamykającego tagu div, aż do (i nie wliczając) linii, w której jest napisane:
drawMonth++;
Teraz będzie nieszczęśliwy, ponieważ musimy zamknąć niektóre rzeczy. Po tym zamykającym tagu div z poprzedniej strony dodaj:
";
Kod powinien być teraz ładnie połączony. Oto fragment kodu pokazujący, z czym powinieneś skończyć:
...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...
Następnie skopiowałem / wkleiłem kod z jquery-ui.css dotyczący datepickers do nowego pliku CSS i zastąpiłem następujące ciągi:
- „datepicker” ==> „monthpicker”
