Como muitos outros, eu encontrei vários problemas ao tentar fazer isso, e apenas uma combinação das soluções postadas e, eventualmente, um grande truque para torná-lo perfeito, me trouxe uma solução.
Problemas com outras soluções neste segmento que eu tentei:
- A seleção de uma nova data em um selecionador de datas também alteraria a data (interna) de outros seletores de datas; portanto, quando você abrisse os outros novamente (ou tentasse obter a data deles), eles teriam uma data diferente da exibida na entrada atribuída. -campo.
- O marcador de data não "lembraria" a data quando aberto novamente.
- O código para manipular as datas usava substring para não ser compatível com todos os formatos.
- "My monthpicker" mudou apenas o campo de entrada ao fechá-lo, e não sempre que os valores foram alterados.
- O campo de entrada não é atualizado corretamente, se você digitar uma string de entrada formatada incorretamente para uma data e, em seguida, clique em 'Fechar' no selecionador de datas.
- Não posso ter seletores de datas normais, que mostram os dias, na mesma página que os seletores de mês, que não mostram os dias.
Finalmente encontrei uma maneira de corrigir todos esses problemas . Os quatro primeiros podem ser corrigidos simplesmente tomando cuidado com a forma como você faz referência aos seus selecionadores de data e mês no código interno e, é claro, fazendo algumas atualizações manuais dos seus selecionadores. Isso você pode ver nos exemplos de instanciação na parte inferior. O quinto problema pode ser ajudado adicionando algum código personalizado às funções do datepicker.
NOTA: NÃO é necessário usar os seguintes scripts do monthpicker para corrigir os três primeiros problemas no datepicker normal. Basta usar o script de instanciação datepicker na parte inferior desta postagem.
Agora, para usar os seletores de mês e corrigir o último problema, precisamos separar os seletores de data e os seletores de mês. Poderíamos ter um dos poucos complementos de mês do picador de jQuery-UI por aí, mas alguns não têm flexibilidade / capacidade de localização, outros não têm suporte para animação ... então, o que fazer? Role o seu "próprio" a partir do código datepicker! Com isso, você obtém um medidor de meses em pleno funcionamento, com todas as funcionalidades do medidor de data, apenas sem a exibição de dias.
Forneci um js-script do monthpicker e o script CSS que o acompanha , usando o método descrito abaixo, com o código jQuery-UI v1.11.1. Simplesmente copie esses trechos de código para dois novos arquivos, monthpicker.js e monthpicker.css, respectivamente.
Se você quiser ler sobre o processo bastante simples pelo qual converti o datepicker em um monthpicker, role para baixo até a última seção.
Agora, adicione os seletores de data e mês à página!
Os seguintes trechos de código javascript funcionam com vários seletores de datas e / ou seletores de mês na página, sem os problemas acima mencionados! Corrigido geralmente usando '$ (this).' muito :)
O primeiro script é para um seletor de datas normal e o segundo é para os "novos" seletores de mês.
O .after comentado , que permite criar algum elemento para limpar o campo de entrada, é roubado da resposta de Paul Richards.
Estou usando o formato "MM yy" no meu monthpicker e o formato 'aa-mm-dd' no meu datepicker, mas isso é totalmente compatível com todos os formatos , portanto, você pode usar o que quiser. Simplesmente altere a opção 'dateFormat'. As opções padrão 'showButtonPanel', 'showAnim' e 'yearRange' são obviamente opcionais e personalizáveis para seus desejos.
Adicionando um datepicker
Instanciação do datepicker.
Este vai de 90 anos atrás e até os dias atuais. Ele ajuda a manter o campo de entrada correto, especialmente se você definir as opções defaultDate, minDate e maxDate, mas poderá lidar com isso se não o fizer. Ele funcionará com qualquer dateFormat que você escolher.
$('#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('');
// })
//)
;
Adicionando um monthpicker
Inclua o arquivo monthpicker.js e o arquivo monthpicker.css na página que você deseja usar.
Instanciação do monthpicker
O valor recuperado deste monthpicker, é sempre o PRIMEIRO dia do mês selecionado. Começa no mês atual e varia de 100 anos atrás e 10 anos no 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('');
// })
//)
;
É isso aí!
É tudo o que você precisa para fazer uma escolha mensal.
Parece que não consigo fazer com que o jsfiddle funcione com isso, mas está funcionando para mim no meu projeto asp.net MVC. Faça o que você normalmente faz para adicionar um datepicker à sua página e incorpore os scripts acima, possivelmente alterando o seletor (que significa $ ("# MyMonthTextBox")) para algo que funcione para você.
Espero que isso ajude alguém.
Links para pastebins para algumas configurações extras de data e mês:
Monthpicker trabalhando no último dia do mês . A data que você obtém deste mês é sempre o último dia do mês.
Dois coletores mensais colaboradores ; 'start' está funcionando no primeiro dia do mês e 'end' está funcionando no último dia do mês. Ambos são restritos um pelo outro, portanto, a escolha de um mês no 'final' anterior ao mês selecionado no 'início' mudará 'início' para o mesmo mês que 'final'. E vice versa. OPCIONAL: Ao selecionar um mês em 'start', a 'minDate' em 'end' é definida para esse mês. Para remover esse recurso, comente uma linha em onClose (leia os comentários).
Dois coletores de datas colaboradores ; Ambos são restritos um pelo outro, portanto, escolher uma data no 'final' anterior à data selecionada no 'início' mudará 'início' para o mesmo mês que 'final'. E vice versa. OPCIONAL: Ao selecionar uma data em 'início', o 'minDate' em 'final' é definido para essa data. Para remover esse recurso, comente uma linha em onClose (leia os comentários).
Como mudei o DatePicker para um MonthPicker
Peguei todo o código javascript do jquery-ui-1.11.1.js referente ao datepicker, colei-o em um novo arquivo js e substitui as seguintes strings:
- "datepicker" ==> "monthpicker"
- "Datepicker" ==> "Monthpicker"
- "selecionador de data" ==> "selecionador de mês"
- "Selecionador de data" ==> "Selecionador de mês"
Em seguida, removi a parte do loop for, que cria toda a div ui-datepicker-calendar (a div que outras soluções ocultam usando CSS). Isso pode ser encontrado na função _generateHTML: (inst).
Encontre a linha que diz:
"</div><table class='ui-datepicker-calendar'><thead>" +
Marque tudo, desde o div-tag de fechamento e até (e não incluindo) a linha onde está escrito:
drawMonth++;
Agora vai ser infeliz porque precisamos fechar algumas coisas. Após o fechamento da tag div de antes, adicione este:
";
O código agora deve ser bem costurado. Aqui está um trecho de código mostrando o que você deveria ter acabado:
...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...
Em seguida, copiei / colei o código do jquery-ui.css pertencente aos datepickers para um novo arquivo CSS e substitui as seguintes strings:
- "datepicker" ==> "monthpicker"
