Mostrar o calendário para a selecção de datas em jsp

Question

Mostrar o calendário para a selecção de datas em jsp

Como adicionar um picador de datas (calendário pop up) para a selecção de datas em {[[0]} ?

Estou a desenvolver uma aplicação web. Eu quero um calendário em jsp para que o usuário possa facilmente escolher uma data desse calendário em vez de digitar e validar a data.

3

calendar popup jsp

Author: nazar_art, 2012-03-06

Source

3 answers

score 4 · Answer 1

Dependendo da arquitectura da sua aplicação, pode escolher uma das seguintes abordagens:

1) uma aproximação do lado do servidor (escrevendo uma tag JSP 'de' datepicker'), por exemplo, a framework struts2 tem uma tag JSP de 'datepicker': http://code.google.com/p/struts2-jquery/wiki/DatePickerTag

2) uma aproximação do lado do cliente (usando um elemento javascript para mostrar o leitor de dados) Existem muitos widgets JS lá fora e você pode escolher um dependendo da complexidade do conjunto de recursos tu queres. (plugins jquery, Dojo ambos oferecem datepickers)

Poderá querer considerar a arquitectura geral da aplicação ao fazer esta escolha, uma vez que esta escolha terá normalmente impacto em todas as suas páginas web (à medida que descobrir a necessidade de usar mais elementos na sua interface de Utilizador) {[[2]}

score 4 · Answer 2

Existem tantos picadores de data na web, Apenas google para "picker de data". Mas já que perguntaste... aqui uma boa visão geral para os programadores http://woork.blogspot.com/2009/01/beautiful-datepickers-and-calendars-for.html com imagens e links para que você possa compará-los de relance (é por isso que eu gosto dessa página).

Qual desses picadores de datas a usar depende de:

os frameworks JavaScript: talvez um desses já seja usado em sua aplicação, que o framework seria um favorito porque a sobrecarga de codificação/integração é menor;
o olhar-e-sentir: escolha o que você gosta.

No seu JSP, os campos de entrada permanecerão os mesmos, mas ao carregar em / entrar num campo de data, o pop-up irá aparecer.

score -1 · Answer 3

 add in head javascript code
 <head>
 <script type="text/javascript" lnaguage="javascript">
 $(function()
  {
  $("#datepicker").datepicker(
  {
  showOn:"both",
  buttonImage:"image.jpg",
  dateFormat:"yy-mm-dd",
  buttonImageOnly:false,
  minDate:+0, //you do not want to show previous date.
  maxDate:+0   // you do not want to show next day.
  });
  });
 </script>
 </head>
 <body>
 <input type="text" name="calendar" id="datepicker">
 </body>