Usar dois datepicker, um somente com ano e outro com dia mês e ano

[Jipa 0]

Boa noite pessoal, estou usando 2 datepicker na mesma pagina e quero que em um deles mostre somente o ano e no outro datepicker mostre dia, mês e ano. Estou fazendo como ilustra o código abaixo porém, quando coloco o opção do style um fica do jeito que quero somente com o ano mais o outro fica igual e nao quero dessa forma.

 

<script>
$(function() {
$(".campoData").datepicker({
dateFormat: 'dd-mm-yy',
dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
monthNamesShort: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
changeMonth: true,
changeYear: true
});
});
</script>

<script type="text/javascript">
$(function() {
$('#date-picker').datepicker( {
showButtonPanel: true,
changeYear: true,
dateFormat: 'yy',
onClose: function(dateText, inst) {
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year,1));

}
});
});
</script>

 

<style type="text/css">
.ui-datepicker-calendar { display: none; }

</style>

 

Alguém ai pode me ajudar?

[Lucas Guima 164]

Quando posta código, utilize a tag de código.

 

Sobre sua necessidade, acho que num dá pra fazer isso não, qual seria o motivo?

 

Isso não te atende?

https://jqueryui.com/datepicker/#dropdown-month-year

[Jipa 0]

Ok Lucas me esqueci...

 

Então a necessidade é que a partir dessas informações vou gerar um gráfico de dados diário, mensal(Aqui quando clico abre uma div com dois campos data inicial e final) e anual (Aqui quando clico abre uma div e quero que mostre somente o ano).

 

Funcionou com o código que postei, porém quando uso a opção para mostrar somente o ano os dois datepicker por estar na mesma pagina ficam iguais.

 

Existe alguma forma de ficarem diferentes sendo que preciso dos dois na mesma pagina? Por que a única forma que encontrei foi colocando isso no style

<style type="text/css">
 .ui-datepicker-calendar { display: none;  }

</style>

[Lucas Guima 164]

Se você utilizar um mesmo seletor para os dois, vai aplicar para ambos.

 

Você tem que inicializar um DatePicker para cada um com um seletor único.