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 >>