Come molti altri, ho riscontrato numerosi problemi nel tentativo di farlo, e solo una combinazione delle soluzioni pubblicate, e alla fine un grande hack per renderlo perfetto, ha mi fornito una soluzione.
Problemi con altre soluzioni in questo thread che ho provato:
- Selezionando una nuova data in un datepicker, cambierebbe anche la data (interna) di altri datepicker, quindi quando aprivi di nuovo gli altri (o provavi a ottenere la loro data), avrebbero una data diversa da quella visualizzata nell'input assegnato -campo.
- Il datepicker non "ricorda" la data quando viene riaperta.
- Il codice per destreggiarsi tra le date utilizzava la sottostringa, quindi non era compatibile con tutti i formati.
- "My monthpicker" ha modificato il campo di input solo alla chiusura, anziché ogni volta che i valori sono stati modificati.
- Il campo di input non viene aggiornato correttamente, se si digita una stringa di input formattata in modo errato per una data e quindi si fa clic su "Chiudi" nel datepicker.
- Non posso avere normali datepicker, che mostrano i giorni, sulla stessa pagina dei mesi, che non mostrano i giorni.
Ho finalmente trovato il modo di risolvere tutti questi problemi . I primi quattro possono essere risolti semplicemente facendo attenzione a come si fa riferimento ai propri data e mese nel loro codice interno e, naturalmente, facendo un aggiornamento manuale dei propri selettori. Questo è visibile negli esempi di istanza nella parte inferiore. Il quinto problema può essere risolto aggiungendo del codice personalizzato alle funzioni datepicker.
NOTA: NON è necessario utilizzare i seguenti script di mesepicker per correggere i primi tre problemi nel normale datepicker. Usa semplicemente lo script di istanza di datepicker nella parte inferiore di questo post.
Ora, per usare i mestruatori e correggere l'ultimo problema, abbiamo bisogno di separare i datepicker e i monthpicker. Potremmo ottenere uno dei pochi add-on jpery-UI del mesepicker là fuori, ma alcuni mancano di flessibilità / capacità di localizzazione, altri mancano di supporto per l'animazione ... quindi, cosa fare? Crea il tuo "proprio" dal codice datepicker! Questo ti dà un mesepicker perfettamente funzionante, con tutte le funzionalità del datepicker, solo senza la visualizzazione dei giorni.
Ho fornito un js-script di Monthpicker e lo script CSS di accompagnamento , utilizzando il metodo descritto di seguito, con il codice jQuery-UI v1.11.1. Basta copiare questi frammenti di codice in due nuovi file, monthpicker.js e monthpicker.css, rispettivamente.
Se vuoi leggere il processo piuttosto semplice con cui ho convertito il datepicker in un mesepicker, scorri verso il basso fino all'ultima sezione.
Ora per aggiungere datepicker e monthpicker alla pagina!
Questi seguenti frammenti di codice javascript funzionano con più datepicker e / o monthpicker sulla pagina, senza i problemi di cui sopra! Risolto generalmente usando '$ (questo).' Un sacco :)
Il primo script è per un normale datepicker e il secondo è per i "nuovi" monthpicker.
Il .after fuori commento , che consente di creare qualche elemento per cancellare il campo di input, viene rubato dalla risposta di Paul Richards.
Sto usando il formato "MM yy" nel mio monthpicker e il formato "yy-mm-dd" nel mio datepicker, ma questo è completamente compatibile con tutti i formati , quindi sei libero di usare quello che vuoi. Cambia semplicemente l'opzione 'dateFormat'. Le opzioni standard 'showButtonPanel', 'showAnim' e 'yearRange' sono ovviamente opzionali e personalizzabili secondo i tuoi desideri.
Aggiunta di un datepicker
Istanza di Datepicker.
Questo risale a 90 anni fa e ai giorni nostri. Ti aiuta a mantenere corretto il campo di input, specialmente se imposti le opzioni defaultDate, minDate e maxDate, ma può gestirlo in caso contrario. Funzionerà con qualsiasi data Formatta che scegli.
$('#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('');
// })
//)
;
Aggiunta di un mesepicker
Includere il file monthpicker.js e il file monthpicker.css nella pagina in cui si desidera utilizzare monthpickers.
Istantanea di Monthpicker
Il valore recuperato da questo monthpicker è sempre il PRIMO giorno del mese selezionato. Inizia il mese corrente e va da 100 anni fa e 10 anni nel futuro.
$('#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('');
// })
//)
;
Questo è tutto!
Questo è tutto ciò di cui hai bisogno per creare un mesepicker.
Non riesco a far funzionare un jsfiddle con questo, ma funziona per me nel mio progetto ASP.NET MVC. Fai semplicemente quello che fai normalmente per aggiungere un datepicker alla tua pagina e incorpora gli script sopra, possibilmente cambiando il selettore (che significa $ ("# MyMonthTextBox")) in qualcosa che funzioni per te.
Spero che questo aiuti qualcuno.
Collegamenti a pastebins per alcune configurazioni extra di date e mese:
Monthpicker lavora l'ultimo giorno del mese . La data che riceverai da questo mesepicker sarà sempre l'ultimo giorno del mese.
Due collaboratori di mese che collaborano ; 'start' sta lavorando il primo del mese e 'end' sta lavorando l'ultimo del mese. Entrambi sono limitati l'uno dall'altro, quindi scegliendo un mese su "fine" che è prima del mese selezionato su "inizio", cambierà "inizio" in modo che sia lo stesso mese di "fine". E viceversa. FACOLTATIVO: quando si seleziona un mese su "inizio", la "data minima" su "fine" viene impostata su quel mese. Per rimuovere questa funzione, commenta una riga in onClose (leggi i commenti).
Due datepicker collaboranti ; Entrambi sono limitati l'uno dall'altro, quindi scegliendo una data su "fine" che è precedente alla data selezionata su "inizio", cambierà "inizio" in modo che sia lo stesso mese di "fine". E viceversa. FACOLTATIVO: quando si seleziona una data su "inizio", la "data minima" su "fine" viene impostata su quella data. Per rimuovere questa funzione, commenta una riga in onClose (leggi i commenti).
Come ho cambiato DatePicker in MonthPicker
Ho preso tutto il codice javascript da jquery-ui-1.11.1.js relativo al loro datepicker, incollato in un nuovo file js e sostituito le seguenti stringhe:
- "datepicker" ==> "monthpicker"
- "Datepicker" ==> "Monthpicker"
- "selezione data" ==> "selezione mese"
- "Selezione data" ==> "Selezione mese"
Quindi ho rimosso la parte del for-loop che crea l'intero div ui-datepicker-calendar (il div che altre soluzioni nascondono usando i CSS). Questo può essere trovato in _generateHTML: function (inst).
Trova la riga che dice:
"</div><table class='ui-datepicker-calendar'><thead>" +
Contrassegna tutto da dopo il div-tag di chiusura e fino a (e non incluso) la linea dove dice:
drawMonth++;
Ora sarà infelice perché dobbiamo chiudere alcune cose. Dopo aver chiuso il div-tag di prima, aggiungi questo:
";
Il codice ora dovrebbe essere unito bene insieme. Ecco uno snippet di codice che mostra cosa avresti dovuto finire:
...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...
Quindi ho copiato / incollato il codice da jquery-ui.css relativo ai datepicker in un nuovo file CSS e ho sostituito le seguenti stringhe:
- "datepicker" ==> "monthpicker"
