Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

razs

[Resolvido] class calendario

Recommended Posts

Utilizei a class de calendario que esta no laboratorio, parece estar a funcionar bem mas o calendario ao abrir apenas permite andar com os meses para tras e para a frente.

 

Eu precisava poder alterar os anos tambem visto utilizar isto para selecionar data de nascimento e precisava que os dias estivessem selecionaveis para poder clicar no dia e ele colocar a data no input.

 

O script é mesmo assim ou fiz alguma coisa mal?

 

Obrigado

Compartilhar este post


Link para o post
Compartilhar em outros sites

qual é a classe que usa? eu cheguei a criar uma que está no laboratório, mas pelo que percebi quer seleccionar a data para colocar no input, porque não usa calendários em javacript? existem muitos, eu costumo usar o do jquery ui

Compartilhar este post


Link para o post
Compartilhar em outros sites

olha este link

Compartilhar este post


Link para o post
Compartilhar em outros sites

Xan, é esse o exemplo que utilizo mas ele nao me da um link nos dias para alem que nao deixa alterar o ano.

 

Em javascript? sera assim tao facil?

Compartilhar este post


Link para o post
Compartilhar em outros sites

esse é perfeito mas nao consigo encontra o plugin e o codigo.

 

Que confusao :S

 

ok, consegui arranjar os plugins mas mesmo assim nao funciona, esquecime de alguma coisa??

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
	<link rel="stylesheet" href="jquery.ui.all.css">
<script src="jquery-1.6.4.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.datepicker.js"></script>
<script>
$(function() {
	$( "#datepicker" ).datepicker({
		changeMonth: true,
		changeYear: true
	});
});
</script>
</head>
<body>
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
</div>

</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

ele esta gerando algum erro ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Nao acabei de o por a funcionar, agora reparei e que ele vai de 2002 ate 2022 e eu precisava de 1930 ate 2050

 

Ja procurei mas nao encontro o sitio para alterar isso

 

reparei agora que selecionando a data mais antiga ele retrocede 10 anos, nao da para aparecer logo no select de 1930 ate 2050 por exemplo?

Compartilhar este post


Link para o post
Compartilhar em outros sites

pode fazer assim

 

 


    $(function() {
               $( "#datepicker" ).datepicker({
                       changeMonth: true,
                       changeYear: true,
		yearRange: '-50:+40'
               });
       });


o menos é anos para trás o mais é anos pá frente, pode ainda ter isso em portugues, necessita de fazer mais um download que lá tem com as linguas...




 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

nao funcionou :s

 

Ja agora, eu tambem tenho dois campos data no mesmo form e apenas funciona para o primeiro, existe algum conflito tendo dois campos no mesmo form?

Compartilhar este post


Link para o post
Compartilhar em outros sites

existe, pois você tá chamando ele por id, para mais que um tem que ser classe ou atributo,

 

vou mostrar um exemplo como eu uso o jquery e o jquery ui, saque a versão mais recente do jquey e a versão total do jquery ui

 



<link rel="stylesheet" type="text/css" href="css/humanity/jquery-ui-1.8.17.custom.css" />

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker-pt-BR.js"></script>


como pode ver só uso um ficheiro js para o jquery ui, o outro ficheiro que termina em pt-BR é o pack com as línguas

depois chame como estava chamando



  $(function() {
	$.datepicker.setDefaults($.extend({showMonthAfterYear: false}, $.datepicker.regional['pt-BR'])); //isso é para ativar o pack com a lingua portuguesa

               $( ".calendario" ).datepicker({ //aqui vai mudar o símbolo "#" para classe "." ou para atributo "input[rel=calendario]", neste caso vamos mudar para classe
                       changeMonth: true,
                       changeYear: true,
                       yearRange: '-50:+40'
               });
       });

depois os seus inputs de data

<input class="calendario" />
<input class="calendario" />
...


 

Compartilhar este post


Link para o post
Compartilhar em outros sites

fiz as alterações que sujeriste mas continuo na mesma.

 

Onde tenho dois inputs ele so abre o primeiro e nos forms que ja tem informação tipo update de utl ele nao abre nenhum.

 

tenho assim:

 

<link rel="stylesheet" href="css/jquery.ui.all.css">
<script src="js/jquery-1.7.1.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.datepicker.js"></script>

<script>
$(function() {
	$( ".calendario" ).datepicker({
		changeMonth: true,
		changeYear: true
		yearRange: '-50:+40'

	});
});
</script>

<div class="field"><label>Start Date</label><input class="calendario" type="text" name="start_study" id="datepicker" value="<%=rs.fields("data_inicio")%>"></div>

<div class="field"><label>End Date</label><input class="calendario" type="text" name="end_study" id="datepicker" value="<%=rs.fields("data_fim")%>"></div>

Compartilhar este post


Link para o post
Compartilhar em outros sites

faça download do jqurey ui completo

 

 



<link rel="stylesheet" type="text/css" href="css/humanity/jquery-ui-1.8.17.custom.css" />
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>

 

 

e retira o id repetido dos campos, o id é único

Compartilhar este post


Link para o post
Compartilhar em outros sites

saque do site oficial

 

 

http://jqueryui.com/download/?themeParams=%3FffDefault%3DHelvetica%252C+Arial%252C+sans-serif%26fwDefault%3Dbold%26fsDefault%3D1.1em%26cornerRadius%3D2px%26bgColorHeader%3Ddddddd%26bgTextureHeader%3D03_highlight_soft.png%26bgImgOpacityHeader%3D50%26borderColorHeader%3Ddddddd%26fcHeader%3D444444%26iconColorHeader%3D0073ea%26bgColorContent%3Dffffff%26bgTextureContent%3D01_flat.png%26bgImgOpacityContent%3D75%26borderColorContent%3Ddddddd%26fcContent%3D444444%26iconColorContent%3Dff0084%26bgColorDefault%3Df6f6f6%26bgTextureDefault%3D03_highlight_soft.png%26bgImgOpacityDefault%3D100%26borderColorDefault%3Ddddddd%26fcDefault%3D0073ea%26iconColorDefault%3D666666%26bgColorHover%3D0073ea%26bgTextureHover%3D03_highlight_soft.png%26bgImgOpacityHover%3D25%26borderColorHover%3D0073ea%26fcHover%3Dffffff%26iconColorHover%3Dffffff%26bgColorActive%3Dffffff%26bgTextureActive%3D02_glass.png%26bgImgOpacityActive%3D65%26borderColorActive%3Ddddddd%26fcActive%3Dff0084%26iconColorActive%3D454545%26bgColorHighlight%3Dffffff%26bgTextureHighlight%3D01_flat.png%26bgImgOpacityHighlight%3D55%26borderColorHighlight%3Dcccccc%26fcHighlight%3D444444%26iconColorHighlight%3D0073ea%26bgColorError%3Dffffff%26bgTextureError%3D01_flat.png%26bgImgOpacityError%3D55%26borderColorError%3Dff0084%26fcError%3D222222%26iconColorError%3Dff0084%26bgColorOverlay%3Deeeeee%26bgTextureOverlay%3D01_flat.png%26bgImgOpacityOverlay%3D0%26opacityOverlay%3D80%26bgColorShadow%3Daaaaaa%26bgTextureShadow%3D01_flat.png%26bgImgOpacityShadow%3D0%26opacityShadow%3D60%26thicknessShadow%3D4px%26offsetTopShadow%3D-4px%26offsetLeftShadow%3D-4px%26cornerRadiusShadow%3D0px

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sim ja consegui, agora nao aparece nada.. :S entretanto devo ter trocado alguma coisa

 


<link rel="stylesheet" href="css/jquery-ui_redmond.css">

<script src="js/jquery-1.7.1.js"></script>

<script src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script src="js/jquery.ui.datepicker.js"></script>

<script>
$(function() {
	$( ".calendario" ).datepicker({
		changeMonth: true,
		changeYear: true
		yearRange: '-50:+40'
	});
});
</script>



<div class="field"><label>Date Birth</label><input class="calendario" type="text" name="Date_Birth" ></div>

Compartilhar este post


Link para o post
Compartilhar em outros sites

tem um exemplo que coloquei, onde você consegue usar o calendário, para agendar eventos, recados etc, serve como uma agenda também, dá uma olhada pode te ajudar

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.