Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colabora��o.
Os doadores receber�o material que n�o consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JQuery - 12
Tutorial para Criar Calend�rios

Nesse tutorial vamos mostrar como criar alguns tipos de Calend�rios:
O datepicker est� vinculado a um campo de entrada de formul�rio padr�o. Concentre-se na entrada (clique ou use a tecla tab) para abrir um calend�rio interativo em uma pequena sobreposi��o. Escolha uma data, clique em outro lugar na p�gina (desfoque a entrada) ou pressione a tecla Esc para fechar. Se uma data for escolhida, o feedback � mostrado como o valor da entrada.
Exemplo 1:
Nesse exemplo voc� clica na caixa de texto e o calend�rio aparece. Selecione uma data qualquer e ela ser� mostrada na caixa de texto. Utilize as setas para selecionar o m�s e o ano desejados. Use a tecla ESC ou clique fora para sair do calend�rio.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Datepicker - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { $( "#datepicker" ).datepicker(); } ); </script> <script src='/google_analytics_auto.js'></script></head> <body> <p>Data selecionada: <input type="text" id="datepicker"></p> </body> </html>
Resultado:
Veja na imagem o resultado desse c�digo:

Exemplo 2:
Esse exemplo funciona da mesma forma que o anterior, s� que temos a op��o de utilizar alguns efeitos de anima��o.
Use anima��es diferentes ao abrir ou fechar o seletor de datas. Escolha uma anima��o no menu suspenso e clique na entrada para ver seu efeito. Voc� pode usar uma das tr�s anima��es padr�o ou qualquer um dos efeitos de interface do usu�rio.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demonstra��o do UI Datepicker com Anima��es</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { $( "#datepicker" ).datepicker(); $( "#anim" ).on( "change", function() { $( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() ); }); } ); </script> <script src='/google_analytics_auto.js'></script></head> <body> <p>Data selecionada: <input type="text" id="datepicker" size="30"></p> <p>Anima��es:<br> <select id="anim"> <option value="show">Show (default)</option> <option value="slideDown">Slide down</option> <option value="fadeIn">Fade in</option> <option value="blind">Blind (UI Effect)</option> <option value="bounce">Bounce (UI Effect)</option> <option value="clip">Clip (UI Effect)</option> <option value="drop">Drop (UI Effect)</option> <option value="fold">Fold (UI Effect)</option> <option value="slide">Slide (UI Effect)</option> <option value>Nenhum</option> </select> </p> </body> </html>
Resultado:
Veja na imagem o resultado desse c�digo:

Exemplo 3:
Nesse exemplo foram adicionados dois combo boxes, um para os meses e outro para os anos, permitindo que voc� escolha ambos diretamente. Mostra menus suspensos de m�s e ano no lugar do cabe�alho est�tico de m�s/ano para facilitar a navega��o em grandes per�odos de tempo. Adicione as op��es booleanas changeMonth e changeYear.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demonstra��o do UI Datepicker - Mostra menus do M�s e Ano</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { $( "#datepicker" ).datepicker({ changeMonth: true, changeYear: true }); } ); </script> <script src='/google_analytics_auto.js'></script></head> <body> <p>Data selecionada: <input type="text" id="datepicker"></p> </body> </html>
Resultado:
Veja na imagem o resultado desse c�digo:

Exemplo 4:
Nesse exemplo ser�o mostrados mais de um m�s simultaneamente. Defina na op��o numberOfMonths um n�mero inteiro de 2 ou mais para mostrar v�rios meses em um �nico selecionador de data.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demonstra��o do Componente UI Datepicker - Mostra M�ltiplos Meses</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { $( "#datepicker" ).datepicker({ numberOfMonths: 3, showButtonPanel: true }); } ); </script> <script src='/google_analytics_auto.js'></script></head> <body> <p>Data selecionada: <input type="text" id="datepicker"></p> </body> </html>
Resultado:
Veja na imagem o resultado desse c�digo:

Exemplo 5:
Nesse exemplo voc� vai ter a op��o de formatar a data de diversas formas, selecionando o formato desejado em um combobox.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demonstra��o do Componente UI Datepicker - Formatos de Data</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { $( "#datepicker" ).datepicker(); $( "#format" ).on( "change", function() { $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() ); }); } ); </script> <script src='/google_analytics_auto.js'></script></head> <body> <p>Data selecionada: <input type="text" id="datepicker" size="30"></p> <p>Op��es de formatos de Data:<p> <select id="format"> <option value="mm/dd/yy">Default - mm/dd/yy</option> <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option> <option value="d M, y">Short - d M, y</option> <option value="d MM, y">Medium - d MM, y</option> <option value="DD, d MM, yy">Full - DD, d MM, yy</option> <option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option> </select> </p> </body> </html>
Resultado:
Veja na imagem o resultado desse c�digo:

<< Tutorial para Criar Accordions
Tutorial para Criar Menus >>