Solucionado
Alguém pode me dar uma luz por favor. Esse sistema ja tenho no JAVA , mas gostaria de criá-lo com javascript. Três botões com mês/ano anterior, atual e posterior: || Abril de 2017 || Maio de 2017 || Junho de 2017 -- ao clicar no mês/ano ele altera conforme a data decrescente ( esquerda) ou crescente (direita), a bem da verdade preciso de empurrão, se alguém puder contribuir, agradeço muito!
Oi Clerman, tudo bem? Desculpa, não entendi bem o que você está querendo fazer. Pode explicar de novo de alguma outra forma pra ver se eu consigo te ajudar?
Olá Wanderson! Preciso de 3 botões e que o do meio tenha a data atual e o da direita a data posterior e da esquerda a data anterior e que ao clicar em qualquer um dos 3 , por exemplo o da esquerda que tem a data posterior essa data se torna a atual e entra outra data nele sendo sempre a posterior Aqui tem um exemplo aproximado de como preciso, mas com as datas nos botões de prev e next. http://jsfiddle.net/TV57Q/38/ Obs.: Lembrando que o que preciso é com exceção dos dias só preciso do mês/ano.
Oi Clerman, seu código já estava bem perto do que você queria fazer, eu só troquei o setDate que tava utilizando para atualizar apenas o mês com o setMonth. As regras de +1 e -1 continuaram as mesmas. Verifica seu JSFiddle novamente? Vou colar o código aqui só pra ser prático:
var date = new Date();
$(function () {
$('#field').val(date);
$('#prev').click(function () {
date.setMonth(date.getMonth() - 1);
$('#field').val(date.toLocaleDateString())
});
$('#next').click(function () {
date.setMonth(date.getMonth() + 1);
$('#field').val(date.toLocaleDateString())
});
});Olá Wanderson Macêdo. No meu caso preciso que os botões prev receba a data anterior e o botão prev receba a posterior respectiva a do campo field, não tenho conseguido setar os valores para esses botões. E o dia não pode ser apresentado e a data tem que ser no formato "MMMM de yyyy". Pode ajudar?
O valor da data sai do input e vai para o botão, é isso?
Consegui fazer aqui, mas o mes de dezembro e janeiro esta vindo como indefined e o ano nesses dois meses não altera e não estou conseguindo seguir as boas prática de reuso de código: segue abaixo, para avaliar:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<!-- Stylesheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<title>Filtro de data (mês e ano)</title>
<script>
$('button[id*="filtrarData_"]').click(function() {
dataPage = this.value;
});
function construirArray(qtdElementos) {
this.length = qtdElementos
}
var arrayMes = new construirArray(12);
arrayMes[0] = "Janeiro"; arrayMes[1] = "Fevereiro"; arrayMes[2] = "Março"; arrayMes[3] = "Abril"; arrayMes[4] = "Maio"; arrayMes[5] = "Junho"; arrayMes[6] = "Julho";
arrayMes[7] = "Agosto"; arrayMes[8] = "Setembro"; arrayMes[9] = "Outubro"; arrayMes[10] = "Novembro"; arrayMes[11] = "Dezembro";
function getMesExtenso(mes) {return this.arrayMes[mes]; }
function atualizarData() {
dataAtual = new Date();
mesAnt = getMesExtenso(dataAtual.getMonth() - 1);
anoAnt = dataAtual.getFullYear();
dataAnt = mesAnt + " de " + anoAnt;
//====================================
mesAtu = getMesExtenso(dataAtual.getMonth());
anoAtu = dataAtual.getFullYear();
dataAtu = mesAtu + " de " + anoAtu;
//====================================
mesPos = getMesExtenso(dataAtual.getMonth() + 1);
anoPos = dataAtual.getFullYear();
dataPos = mesPos + " de " + anoPos;
$(function() {
$('#field').val(dataAtu);
$('#prev').val(dataAnt);
$('#next').val(dataPos);
dataAtual.setMonth(dataAtual.getMonth() - 1);
$('#prev').click(function() {
dataAtual.setMonth(dataAtual.getMonth() - 1);
mesAnt = getMesExtenso(dataAtual.getMonth() - 1);
anoAnt = dataAtual.getFullYear();
dataAnt = mesAnt + " de " + anoAnt;
//====================================
mesAtu = getMesExtenso(dataAtual.getMonth());
anoAtu = dataAtual.getFullYear();
dataAtu = mesAtu + " de " + anoAtu;
//====================================
mesPos = getMesExtenso(dataAtual.getMonth() + 1);
anoPos = dataAtual.getFullYear();
dataPos = mesPos + " de " + anoPos;
$('#field').val(dataAtu)
$('#prev').val(dataAnt)
$('#next').val(dataPos)
});
$('#next').click(function() {
dataAtual.setMonth(dataAtual.getMonth() + 1);
mesAnt = getMesExtenso(dataAtual.getMonth() - 1);
anoAnt = dataAtual.getFullYear();
dataAnt = mesAnt + " de " + anoAnt;
//====================================
mesAtu = getMesExtenso(dataAtual.getMonth());
anoAtu = dataAtual.getFullYear();
dataAtu = mesAtu + " de " + anoAtu;
//====================================
mesPos = getMesExtenso(dataAtual.getMonth() + 1);
anoPos = dataAtual.getFullYear();
dataPos = mesPos + " de " + anoPos;
$('#field').val(dataAtu)
$('#prev').val(dataAnt)
$('#next').val(dataPos)
});
});
}
</script>
</head>
<body onload="atualizarData()">
<nav style="width: 800px; margin: 0 auto;">
<ul class="pager">
<li class="previous"><input type="button"
class="btn btn-default btn-outline pull-left" id="prev" value="Prev" />
</li>
<li class="center"><input type="button"
class="btn btn-default btn-direction btn-outline btn-bottom"
id="field" /></li>
<li class="center"><input type="button"
class="btn btn-default btn-outline pull-right" id="next"
value="Next" /></li>
</ul>
</nav>
</body>
</html>Oi Clerman, acho que descobri o problema. Note que sua função que retorna o nome do mês por extenso apenas recebe um valor e retorna o nome do mês. Essa função parece inocente, mas ela tem um pequeno problema.
O getMonth, quando retornar 0 relativo a janeiro, o valor passado para a função será -1 o que no array, será undefined, e quando o getMonth retornar 11 para dezembro, você terá undefined por que o valor recebido pela função será 12. Isso tudo por que você está sempre subtraindo ou somando um.
A solução mais simples que você pode usar é fazer um if básico. Algo do tipo:
if(mes == -1){
return arrayMeses[0];
} else if(mes == 12) {
return arrayMeses[11];
}
return arrayMeses[mes];Obrigado, vou ver se implemento aqui, agora estou fazendo as aulas de jquery e como tem muito código vou tentar migrar para o jquery mais pra frente. Abraço!