Olá! Construí esse exemplo baseado em outro, mas estou parado, pois não sei como colocar a navegação entre o botões em prática: se clico no bt da esquerda que esta em ABRIL DE 2017 essa data vai o bt do meio e no lugar desse bt clicado entra MARÇO DE 2017 e respectivamente para os outros botões respeitando a ordem crescente e decrescente, é claro! Segue o exemplo em html abaixo!
<!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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<title>Filtro de data (mês e ano)</title>
<script>
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() {
$('button[id*="filtrarData_"]').click(function() {
console.log(this.value);
});
dataAtual = new Date();
mesAnt = getMesExtenso(dataAtual.getMonth() - 1);
mesIntAnt = dataAtual.getMonth() - 1;
anoAnt = dataAtual.getFullYear();
dataIntAnt = mesIntAnt + "" + anoAnt;
dataAnt = mesAnt + " de " + anoAnt;
document.getElementById("dataAnt").innerHTML = dataAnt;
document.getElementById("filtrarData_Ant").value = dataIntAnt;
mesPos = getMesExtenso(dataAtual.getMonth() + 1);
mesIntPos = dataAtual.getMonth() + 1;
anoPos = dataAtual.getFullYear();
dataIntPos = mesIntPos + "" + anoPos;
dataPos = mesPos + " de " + anoPos;
document.getElementById("dataPos").innerHTML = dataPos;
document.getElementById("filtrarData_Pos").value = dataIntPos;
mesAtu = getMesExtenso(dataAtual.getMonth());
mesIntAtu = dataAtual.getMonth();
anoAtu = dataAtual.getFullYear();
dataIntAtu = mesIntAtu + "" + anoAtu;
dataAtual = mesAtu + " de " + anoAtu;
document.getElementById("dataAtu").innerHTML = dataAtual;
document.getElementById("filtrarData_Atu").value = dataIntAtu;
}
</script>
</head>
<body onload="atualizarData()">
<nav style="width:500px; margin: 0 auto;">
<ul class="pager">
<li class="previous">
<button id="filtrarData_Ant" class="btn btn-default btn-outline pull-left" value="">
<span aria-hidden="true"><i
class="icon wb-chevron-left-mini" aria-hidden="true"></i></span>
<span id="dataAnt"></span>
</button>
</li>
<li class="center">
<button id="filtrarData_Atu" class="btn btn-default btn-direction btn-outline btn-bottom" value="">
<span aria-hidden="true"></span><span id="dataAtu"></span>
</button>
</li>
<li class="next">
<button id="filtrarData_Pos" class="btn btn-default btn-outline pull-right" value="">
<span id="dataPos"></span>
<span aria-hidden="true"><i class="icon wb-chevron-right-mini" aria-hidden="true"></i></span>
</button>
</li>
</ul>
</nav>
</body>
</html>