jQuery UI DatePicker per mostrare solo l’anno del mese

Sto usando il selettore di date jQuery per visualizzare il calendario su tutta la mia app. Voglio sapere se posso usarlo per visualizzare il mese e l’anno (maggio 2010) e non il calendario?

Ecco un trucco (aggiornato con l’intero file .html):

              

EDIT jsfiddle per l’esempio precedente: http://jsfiddle.net/DBpJe/7755/

MODIFICA 2 Aggiunge il valore del mese in anno per inserire la casella solo quando si fa clic sul pulsante Fine. Permette anche di cancellare i valori della casella di input, che non è ansible nel campo sopra http://jsfiddle.net/DBpJe/5103/

EDIT 3 ha aggiornato la soluzione migliore basata sulla soluzione di rexwolf in basso.
http://jsfiddle.net/DBpJe/5106

Questo codice funziona perfettamente per me:

    

L’output è:

inserisci la descrizione dell'immagine qui

@ Ben Koehler , questo è il prefetto! Ho apportato una piccola modifica in modo che l’utilizzo di una singola istanza del selettore di date più di una volta funzioni come previsto. Senza questa modifica la data viene analizzata in modo errato e la data selezionata in precedenza non viene evidenziata.

               

Le risposte sopra sono piuttosto buone. La mia unica lamencanvas è che non è ansible cancellare il valore una volta che è stato impostato. Inoltre, preferisco l’approccio extend-jquery-like-a-plugin.

Questo funziona perfettamente per me:

 $.fn.monthYearPicker = function(options) { options = $.extend({ dateFormat: "MM yy", changeMonth: true, changeYear: true, showButtonPanel: true, showAnim: "" }, options); function hideDaysFromCalendar() { var thisCalendar = $(this); $('.ui-datepicker-calendar').detach(); // Also fix the click event on the Done button. $('.ui-datepicker-close').unbind("click").click(function() { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); thisCalendar.datepicker('setDate', new Date(year, month, 1)); }); } $(this).datepicker(options).focus(hideDaysFromCalendar); } 

Quindi invoca in questo modo:

 $('input.monthYearPicker').monthYearPicker(); 
  

  

Questo risolverà il problema =) Ma volevo il timeFormat aaaa-mm

Solo provato in FF4 però

Oggi ho avuto questo stesso bisogno e ho trovato questo su github, funziona con jQueryUI e ha un mese di selezione al posto dei giorni nel calendario

https://github.com/thebrowser/jquery.ui.monthpicker

Ecco cosa mi è venuto in mente. Nasconde il calendario senza bisogno di un blocco di stile aggiuntivo e aggiunge un pulsante di cancellazione per affrontare il problema di non essere in grado di cancellare il valore dopo aver fatto clic sull’input. Funziona anche bene con più monthpickers sulla stessa pagina.

HTML:

  

JavaScript:

 $(".monthpicker").datepicker({ changeMonth: true, changeYear: true, dateFormat: "yy-mm", showButtonPanel: true, currentText: "This Month", onChangeMonthYear: function (year, month, inst) { $(this).val($.datepicker.formatDate('yy-mm', new Date(year, month - 1, 1))); }, onClose: function(dateText, inst) { var month = $(".ui-datepicker-month :selected").val(); var year = $(".ui-datepicker-year :selected").val(); $(this).val($.datepicker.formatDate('yy-mm', new Date(year, month, 1))); } }).focus(function () { $(".ui-datepicker-calendar").hide(); }).after( $("clear").click(function() { $(this).prev().val(''); }) ); 

Avevo bisogno di un selezionatore mese / anno per due campi (da & a) e quando ne è stato scelto uno il massimo / minimo è stato impostato sull’altro … a la raccolta delle date del biglietto aereo. Avevo problemi nell’impostare il massimo e il minimo … le date dell’altro campo venivano cancellate. Grazie a molti dei post precedenti … ho finalmente capito. Devi impostare le opzioni e le date in un ordine molto specifico.

Vedi questo violino per la soluzione completa: mese / anno Picker @ JSFiddle

Codice:

 var searchMinDate = "-2y"; var searchMaxDate = "-1m"; if ((new Date()).getDate() <= 5) { searchMaxDate = "-2m"; } $("#txtFrom").datepicker({ dateFormat: "M yy", changeMonth: true, changeYear: true, showButtonPanel: true, showAnim: "", minDate: searchMinDate, maxDate: searchMaxDate, showButtonPanel: true, beforeShow: function (input, inst) { if ((datestr = $("#txtFrom").val()).length > 0) { var year = datestr.substring(datestr.length - 4, datestr.length); var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), "#txtFrom").datepicker('option', 'monthNamesShort')); $("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1)); $("#txtFrom").datepicker('setDate', new Date(year, month, 1)); } }, onClose: function (input, inst) { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); $("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1)); $("#txtFrom").datepicker('setDate', new Date(year, month, 1)); var to = $("#txtTo").val(); $("#txtTo").datepicker('option', 'minDate', new Date(year, month, 1)); if (to.length > 0) { var toyear = to.substring(to.length - 4, to.length); var tomonth = jQuery.inArray(to.substring(0, to.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort')); $("#txtTo").datepicker('option', 'defaultDate', new Date(toyear, tomonth, 1)); $("#txtTo").datepicker('setDate', new Date(toyear, tomonth, 1)); } } }); $("#txtTo").datepicker({ dateFormat: "M yy", changeMonth: true, changeYear: true, showButtonPanel: true, showAnim: "", minDate: searchMinDate, maxDate: searchMaxDate, showButtonPanel: true, beforeShow: function (input, inst) { if ((datestr = $("#txtTo").val()).length > 0) { var year = datestr.substring(datestr.length - 4, datestr.length); var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort')); $("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1)); $("#txtTo").datepicker('setDate', new Date(year, month, 1)); } }, onClose: function (input, inst) { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); $("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1)); $("#txtTo").datepicker('setDate', new Date(year, month, 1)); var from = $("#txtFrom").val(); $("#txtFrom").datepicker('option', 'maxDate', new Date(year, month, 1)); if (from.length > 0) { var fryear = from.substring(from.length - 4, from.length); var frmonth = jQuery.inArray(from.substring(0, from.length - 5), $("#txtFrom").datepicker('option', 'monthNamesShort')); $("#txtFrom").datepicker('option', 'defaultDate', new Date(fryear, frmonth, 1)); $("#txtFrom").datepicker('setDate', new Date(fryear, frmonth, 1)); } } }); 

Aggiungilo anche a un blocco di stile come menzionato sopra:

 .ui-datepicker-calendar { display: none !important; } 

Ho combinato molte delle buone risposte sopra e arrivo su questo:

  $('#payCardExpireDate').datepicker( { dateFormat: "mm/yy", changeMonth: true, changeYear: true, showButtonPanel: true, onClose: function(dateText, inst) { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); $(this).datepicker('setDate', new Date(year, month, 1)).trigger('change'); }, beforeShow : function(input, inst) { if ((datestr = $(this).val()).length > 0) { year = datestr.substring(datestr.length-4, datestr.length); month = datestr.substring(0, 2); $(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1)); $(this).datepicker('setDate', new Date(year, month-1, 1)); } } }).focus(function () { $(".ui-datepicker-calendar").hide(); $("#ui-datepicker-div").position({ my: "center top", at: "center bottom", of: $(this) }); }); 

Questo si è dimostrato funzionante, ma ho dovuto affrontare molti bug, quindi sono stato costretto a eseguire patch in diversi punti di DatePicker:

 if($.datepicker._get(inst, "dateFormat") === "mm/yy") { $(".ui-datepicker-calendar").hide(); } 

patch1: in _showDatepicker: per levigare la pelle;

patch2: in _checkOffset: per correggere il posizionamento del selezionatore del mese (altrimenti quando il campo si trova nella parte inferiore del browser, il controllo dell’offset è distriggersto);

patch3: in onClose di _hideDatepicker: altrimenti alla chiusura i campi della data lampeggeranno per un periodo molto breve che è molto fastidioso.

So che la mia correzione era tutt’altro che buona, ma per ora funziona. Spero che sia d’aiuto.

Sono solo io o non funziona come dovrebbe in IE (8)? La data cambia quando fai clic su done, ma il datepicker si apre di nuovo, finché non fai clic in qualche punto della pagina per perdere l’attenzione sul campo di input …

Sto cercando di risolvere questo.

               

Se stai cercando un raccoglitore di mesi prova questo jquery.mtz.monthpicker

Questo ha funzionato bene per me.

Informazioni su: http://www.mattkruse.com/javascript/calendarpopup/

Seleziona l’esempio di selezione del mese

dopo aver scavato jQueryUI.com per datepicker, ecco la mia conclusione e la risposta alla tua domanda.

Innanzitutto, direi di no alla tua domanda. Non è ansible utilizzare jQueryUi DatePicker per il prelievo solo del mese e dell’anno. Non è supportato Non ha alcuna funzione di callback per questo.

Ma puoi modificarlo per mostrare solo il mese e l’anno usando il css per hide i giorni, ecc. E penso che non avrà ancora senso, perché hai bisogno delle date per fare clic per scegliere una data.

Posso dire che devi solo usare un altro datepicker. Come quello che ha suggerito Roger.

Ho avuto il problema del selezionatore di date mescolato con il selezionatore del mese. L’ho risolto così.

  $('.monthpicker').focus(function() { $(".ui-datepicker-calendar").show(); }).datepicker( { changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM/yy', create: function (input, inst) { }, onClose: function(dateText, inst) { var month = 1+parseInt($("#ui-datepicker-div .ui-datepicker-month :selected").val()); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); } }); 

Se qualcuno lo desidera anche per più calendari non è molto difficile aggiungere questa funzionalità a jquery ui. con ricerca minificata di:

 x+='
'+(/all|left/.test(t)&&C==0?c?f:n:"")+(

aggiungi questo davanti a x

 var accl = ''; if(this._get(a,"justMonth")) {accl = ' ui-datepicker-just_month';} 

Cercare

 

anche cercare

 this._defaults={ 

sostituirlo con

 this._defaults={justMonth:false, 

per css dovresti usare:

 .ui-datepicker table.ui-datepicker-just_month{ display: none; } 

dopo che tutto è finito, vai alle funzioni di init datepicker desiderate e fornisci var di impostazione

 $('#txt_month_chart_view').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM yy', justMonth: true, create: function(input, inst) { $(".ui-datepicker table").addClass("badbad"); }, onClose: function(dateText, inst) { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); $(this).datepicker('setDate', new Date(year, month, 1)); } }); 

justMonth: true è la chiave qui 🙂

Fatto un paio di perfezionamenti alla risposta quasi perfetta di BrianS sopra:

  1. Ho regexato il valore impostato in show perché penso che in questo caso lo rendano leggermente più leggibile (anche se sto usando un formato leggermente diverso)

  2. Il mio cliente non desiderava un calendario, quindi ho aggiunto un’aggiunta su mostra / nascondi per farlo senza influire su altri datepicker. La rimozione della class avviene con un timer per evitare che il tavolo ritorni a lampeggiare quando il datario si affievolisce, il che sembra essere molto evidente in IE.

EDIT: Un problema rimasto da risolvere con questo è che non c’è modo di svuotare il DatePicker: svuota il campo e fai clic su di esso e si ripopola con la data selezionata.

EDIT2: Non sono riuscito a risolverlo bene (cioè senza aggiungere un pulsante Clear separato accanto all’input), quindi ho finito usando solo questo: https://github.com/thebrowser/jquery.ui.monthpicker – se qualcuno può ottenere l’interfaccia utente standard per farlo sarebbe fantastico.

  $('.typeof__monthpicker').datepicker({ dateFormat: 'mm/yy', showButtonPanel:true, beforeShow: function(input, dpicker) { if(/^(\d\d)\/(\d\d\d\d)$/.exec($(this).val())) { var d = new Date(RegExp.$2, parseInt(RegExp.$1, 10) - 1, 1); $(this).datepicker('option', 'defaultDate', d); $(this).datepicker('setDate', d); } $('#ui-datepicker-div').addClass('month_only'); }, onClose: function(dt, dpicker) { setTimeout(function() { $('#ui-datepicker-div').removeClass('month_only') }, 250); var m = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var y = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); $(this).datepicker('setDate', new Date(y, m, 1)); } }); 

Hai anche bisogno di questa regola di stile:

 #ui-datepicker-div.month_only .ui-datepicker-calendar { display:none } 

Come molti altri, ho riscontrato numerosi problemi nel tentativo di farlo, e solo una combinazione delle soluzioni pubblicate, e alla fine un grosso trucco per renderlo perfetto, mi ha dato una soluzione.

Problemi con altre soluzioni in questo thread che ho provato:

  1. Selezionando una nuova data in un datepicker, si modifica anche la data (interna) di altri datepicker, quindi quando si aprivano di nuovo gli altri (o si tentava di ottenere la loro data), avrebbero una data diversa da quella visualizzata nel loro input assegnato -campo.
  2. Il datepicker non “ricorda” la data in cui è stata riaperta.
  3. Il codice per la giocoleria delle date utilizzava la sottostringa, quindi non era compatibile con tutti i formati.
  4. “My monthpicker” ha modificato solo il campo di input alla chiusura, anziché ogni volta che i valori sono stati modificati.
  5. Il campo di input non viene aggiornato correttamente, se si digita una stringa di input formattata erroneamente per una data, quindi si fa clic su “Chiudi” sul datepicker.
  6. Non posso avere datepicker normali, che mostrano i giorni, sulla stessa pagina di monthpickers, che non mostrano i giorni.

Ho finalmente trovato un modo per risolvere tutti questi problemi . I primi quattro possono essere risolti semplicemente prestando attenzione a come fai riferimento ai tuoi date e monthpickers nel loro codice interno e, naturalmente, facendo qualche aggiornamento manuale dei tuoi raccoglitori. Questo puoi vedere negli esempi di istanziazione nella parte inferiore. Il quinto problema può essere aiutato aggiungendo un codice personalizzato alle funzioni datepicker.

NOTA: NON è necessario utilizzare i seguenti script monthpicker per correggere i primi tre problemi nel normale Datepicker. Basta usare lo script di istanza di datepicker nella parte inferiore di questo post.

Ora, per usare monthpickers e riparare l’ultimo problema, dobbiamo separare i datepickers e i monthpickers. Potremmo ottenere uno dei pochi addon di jQuery-UI monthpicker là fuori, ma alcuni mancano di flessibilità / abilità di localizzazione, alcuni mancano di supporto per l’animazione … quindi, cosa fare? Tira il tuo “proprio” dal codice datepicker! Questo ti fa diventare un monthpicker pienamente funzionante, con tutte le funzionalità di DatePicker, senza la visualizzazione dei giorni.

Ho fornito un js-script monthpicker e il relativo script CSS , utilizzando il metodo descritto di seguito, con il codice jQuery-UI v1.11.1. Copia semplicemente questi snippet di codice in due nuovi file, monthpicker.js e monthpicker.css, rispettivamente.


Ecco il processo che ho seguito, per clonare il datepicker originale e renderlo un mese

Se non ti interessa come li ho fatti, scorri questa sezione e vai alla riga “Ora per aggiungere i datepickers e monthpickers alla pagina!”

Ho preso tutto il codice javascript da jquery-ui-1.11.1.js relativo al proprio 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 ciclo for che crea l’intero div di ui-datepicker-calendar (l’altra soluzione nasconde usando il CSS). Questo può essere trovato nel _generateHTML: function (inst).

Trova la riga che dice:

 "" +

Segna tutto da dopo il tag div di chiusura e giù (e non includendo) la riga dove dice:

 drawMonth++; 

Ora sarà infelice, perché abbiamo bisogno di chiudere alcune cose. Dopo il tag div di chiusura precedente, aggiungi questo:

 "; 

Il codice dovrebbe ora essere cucito insieme bene. Ecco uno snippet di codice che mostra cosa avresti dovuto finire:

 ...other code... calender += "
" + (/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 "
"; drawMonth++; if (drawMonth > 11) { drawMonth = 0; drawYear++; } ...other code...

Poi ho copiato / incollato il codice da jquery-ui.css relativo ai datepickers in un nuovo file CSS, e ho sostituito le seguenti stringhe:

  • “datepicker” ==> “monthpicker”

Ora per aggiungere i datepickers e monthpickers alla pagina!

Questi seguenti frammenti di codice javascript funzionano con più datepicker e / o monthpickers nella pagina, senza i problemi sopra menzionati! Risolto generalmente usando ‘$ (questo).’ Un sacco 🙂

Il primo script è per un normale datepicker e il secondo è per i “nuovi” monthpickers.

L’out-commented .after , che consente di creare un elemento per cancellare il campo di input, viene rubato dalla risposta di Paul Richards.

Sto usando il formato “MM yy” nel mio mese, e il formato “aa-mm-g” nel mio datepicker, ma questo è completamente compatibile con tutti i formati , quindi sei libero di usare quello che vuoi. Basta cambiare l’opzione ‘date date’. Le opzioni standard ‘showButtonPanel’, ‘showAnim’ e ‘yearRange’ sono ovviamente opzionali e personalizzabili secondo i tuoi desideri.


Aggiunta di un datepicker

Creazione di Datepicker. Questo va da 90 anni fa e ai giorni nostri. Ti aiuta a mantenere il campo di input corretto, specialmente se imposti le opzioni defaultDate, minDate e maxDate, ma può gestirlo se non lo fai. Funzionerà con qualsiasi dataFormat scelto.

  $('#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 // $("clear").click(function() { // $(this).prev().val(''); // }) //) ; 

Adding a monthpicker

Include the monthpicker.js file and the monthpicker.css file in the page you want to use the monthpickers.

Monthpicker instantiation The value retrieved from this monthpicker, is always the FIRST day of the selected month. Starts at the current month, and ranges from 100 years ago and 10 years into the future.

  $('#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 // $("clear").click(function() { // $(this).prev().val(''); // }) //) ; 

Questo è tutto! That’s all you need to make a monthpicker.

I can’t seem to make a jsfiddle work with this, but it is working for me in my ASP.NET MVC project. Just do what you normally do to add a datepicker to your page, and incorporate the above scripts, possibly by changing the selector (meaning $(“#MyMonthTextBox”)) to something that works for you.

Spero che questo aiuti qualcuno.

Links to pastebins for some extra date- and monthpicker setups:

  1. Monthpicker working on the last day of the month . The date you get from this monthpicker will always be the last day of the month.

  2. Two collaborating monthpickers ; ‘start’ is working on the first of the month, and ‘end’ is working on the last of the month. They are both restricted by each other, so choosing a month on ‘end’ which is before the selected month on ‘start’, will change ‘start’ to be the same month as ‘end’. E viceversa. OPTIONAL: When selecting a month on ‘start’, the ‘minDate’ is set on ‘end’. To remove this feature, comment out one line in onClose (read the comments).

  3. Two collaborating datepickers ; They are both restricted by each other, so choosing a date on ‘end’ which is before the selected date on ‘start’, will change ‘start’ to be the same month as ‘end’. E viceversa. OPTIONAL: When selecting a date on ‘start’, the ‘minDate’ is set on ‘end’. To remove this feature, comment out one line in onClose (read the comments).

Add one more simple solution

  $(function() { $('.monthYearPicker').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'M yy' }).focus(function() { var thisCalendar = $(this); $('.ui-datepicker-calendar').detach(); $('.ui-datepicker-close').click(function() { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); thisCalendar.datepicker('setDate', new Date(year, month, 1)); }); }); }); 

http://jsfiddle.net/tmnasim/JLydp/
Features :

  • display only month/year
  • Adds the month year value to input box only on clicking of Done button
  • No “reopen” behavior when click “Done”
    ————————————
    another solution that work well for datepicker and monthpicker in the same page:(also avoid the bug of mutiple click on previous button in IE, that may occur if we use focus function)
    JS fiddle link

I liked the @user1857829 answer and his “extend-jquery-like-a-plugin approach”. I just made a litte modification so that when you change month or year in any way the picker actually writes the date in the field. I found that I’d like that behaviour after using it a bit.

 jQuery.fn.monthYearPicker = function(options) { options = $.extend({ dateFormat: "mm/yy", changeMonth: true, changeYear: true, showButtonPanel: true, showAnim: "", onChangeMonthYear: writeSelectedDate }, options); function writeSelectedDate(year, month, inst ){ var thisFormat = jQuery(this).datepicker("option", "dateFormat"); var d = jQuery.datepicker.formatDate(thisFormat, new Date(year, month-1, 1)); inst.input.val(d); } function hideDaysFromCalendar() { var thisCalendar = $(this); jQuery('.ui-datepicker-calendar').detach(); // Also fix the click event on the Done button. jQuery('.ui-datepicker-close').unbind("click").click(function() { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); thisCalendar.datepicker('setDate', new Date(year, month, 1)); thisCalendar.datepicker("hide"); }); } jQuery(this).datepicker(options).focus(hideDaysFromCalendar); } 

I’ve had certain difficulties with the accepted answer and no other one could be used with a minimum effort as a base. So, I decided to tweak the latest version of the accepted answer until it satisfies at least minimum JS coding/reusability standards.

Here is a way much cleaner solution than the 3rd (latest) edition of the Ben Koehler ‘s accepted answer. Moreover, it will:

  • work not only with the mm/yy format, but with any other including the OP’s MM yy .
  • not hide the calendar of other datepickers on the page.
  • not implicitly pollute the global JS object with the datestr , month , year etc variables.

Check it out:

 $('.date-picker').datepicker({ dateFormat: 'MM yy', changeMonth: true, changeYear: true, showButtonPanel: true, onClose: function (dateText, inst) { var isDonePressed = inst.dpDiv.find('.ui-datepicker-close').hasClass('ui-state-hover'); if (!isDonePressed) return; var month = inst.dpDiv.find('.ui-datepicker-month').find(':selected').val(), year = inst.dpDiv.find('.ui-datepicker-year').find(':selected').val(); $(this).datepicker('setDate', new Date(year, month, 1)).change(); $('.date-picker').focusout(); }, beforeShow: function (input, inst) { var $this = $(this), // For the simplicity we suppose the dateFormat will be always without the day part, so we // manually add it since the $.datepicker.parseDate will throw if the date string doesn't contain the day part dateFormat = 'd ' + $this.datepicker('option', 'dateFormat'), date; try { date = $.datepicker.parseDate(dateFormat, '1 ' + $this.val()); } catch (ex) { return; } $this.datepicker('option', 'defaultDate', date); $this.datepicker('setDate', date); inst.dpDiv.addClass('datepicker-month-year'); } }); 

And everything else you need is the following CSS somewhere around:

 .datepicker-month-year .ui-datepicker-calendar { display: none; } 

Questo è tutto. Hope the above will save some time for further readers.

I know it’s a little late response, but I got the same problem a couple of days before and I have came with a nice & smooth solution. First I found this great date picker here

Then I’ve just updated the CSS class (jquery.calendarPicker.css) that comes with the example like this:

 .calMonth { /*border-bottom: 1px dashed #666; padding-bottom: 5px; margin-bottom: 5px;*/ } .calDay { display:none; } 

The plugin fires an event DateChanged when you change anything, so it doesn’t matter that you are not clicking on a day (and it fits nice as a year and month picker)

Spero che sia d’aiuto!

I also needed a month picker. I made a simple one with year on header and 3 rows of 4 months below. Check it out: Simple monthyear picker with jQuery .

I tried the various solutions provided here and they worked fine if you simply wanted a couple of drop downs.

The best (in appearance etc) ‘picker’ ( https://github.com/thebrowser/jquery.ui.monthpicker ) suggested here is basically a copy of an old version of jquery-ui datepicker with the _generateHTML rewritten. However, I found it no longer plays nicely with current jquery-ui (1.10.2) and had other issues (doesn’t close on esc, doesn’t close on other widget opening, has hardcoded styles).

Rather than attempt to fix that monthpicker and rather than reattempt the same process with the latest datepicker, I went with hooking into the relevant parts of the existing date picker.

This involves overriding:

  • _generateHTML (to build the month picker markup)
  • parseDate (as it doesn’t like it when there’s no day component),
  • _selectDay (as datepicker uses .html() to get the day value)

As this question is a bit old and already well answered, here’s only the _selectDay override to show how this was done:

 jQuery.datepicker._base_parseDate = jQuery.datepicker._base_parseDate || jQuery.datepicker.parseDate; jQuery.datepicker.parseDate = function (format, value, settings) { if (format != "M y") return jQuery.datepicker._hvnbase_parseDate(format, value, settings); // "M y" on parse gives error as doesn't have a day value, so 'hack' it by simply adding a day component return jQuery.datepicker._hvnbase_parseDate("d " + format, "1 " + value, settings); }; 

As stated, this is an old question, but I found it useful so wanted to add feedback with an alterantive solution.

for a monthpicker, using JQuery v 1.7.2, I have the following javascript which is doing just that

$l("[id$=txtDtPicker]"). monthpicker ({
showOn: "both",
buttonImage: "../../images/Calendar.png",
buttonImageOnly: true,
pattern: 'yyyymm', // Default is 'mm/yyyy' and separator char is not mandatory
monthNames: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
});

Everyone here is getting value of month , year like this,

 var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var month = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 

But just now I’m facing issue while fetching values from > and < . Because It give us value of selected value in dropdown so it provides us old value not new values.

So, As per the document of Jquery UI :- http://api.jqueryui.com/datepicker/ . We can directly fetch year , month from function. For other values like day etc. we can easily access them through inst object of jqueryUI function. We can access inst like below,

  var day = inst.selectedDay; 

So, Using onChangeMonthYear we can get current month , year and day values directly from function so no need to work out for selected value.

HTML :-

  

Script :-

 $( function() { $(".monthPicker").datepicker({ dateFormat: 'MM yy', changeMonth: true, changeYear: true, showButtonPanel: true, beforeShow: true, onChangeMonthYear: function(year , month , inst) { setTimeout(function() { $('.ui-datepicker-calendar').hide(); }); var day = inst.selectedDay; month = month; year = year; var current_date = year + "-" + month + "-" + day ; } }); $(".monthPicker").focus(function () { $(".ui-datepicker-calendar").hide(); $("#ui-datepicker-div").position({ my: "center top", at: "center bottom", of: $(this) }); }); }); 

Note :- It can be useful when we want inline monthpicker. Just replace input field to division and we can use it inline while using inline make sure you are using onChangeMonthYear ,

For Inline MonthPicker :-

 

Thanks for Ben Koehler’s solution.

However, I had a problem with multiple instances of datepickers, with some of them needed with day selection. Ben Koehler’s solution (in edit 3) works, but hides the day selection in all instances. Here’s an update that solves this issue :

 $('.date-picker').datepicker({ dateFormat: "mm/yy", changeMonth: true, changeYear: true, showButtonPanel: true, onClose: function(dateText, inst) { if($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1) { $(this).datepicker( 'setDate', new Date( $("#ui-datepicker-div .ui-datepicker-year :selected").val(), $("#ui-datepicker-div .ui-datepicker-month :selected").val(), 1 ) ).trigger('change'); $('.date-picker').focusout(); } $("#ui-datepicker-div").removeClass("month_year_datepicker"); }, beforeShow : function(input, inst) { if((datestr = $(this).val()).length > 0) { year = datestr.substring(datestr.length-4, datestr.length); month = datestr.substring(0, 2); $(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1)); $(this).datepicker('setDate', new Date(year, month-1, 1)); $("#ui-datepicker-div").addClass("month_year_datepicker"); } } }); 

Use onSelect call back and remove the year portion manually and set the text in the field manually