Popup calendar for date picker in jsp

How to add date picker (popup calendar) to date picker in jsp

?

I am developing a web application. I want a calendar in jsp so that the user can easily select a date from that calendar instead of typing and validating the date.

+3


source to share


3 answers


There are so many event pickers on the internet, just google for the "date picker". But since you asked ... here is a good developer review http://woork.blogspot.com/2009/01/beautiful-datepickers-and-calendars-for.html with screenshots and links so you can compare with the first look (why I like this page).

Which of these date pickers depends on:



  • JavaScript frameworks: maybe one of them is already in use in your application, this framework would be a favorite since the coding / integration overhead is less;
  • appearance: choose the one you like.

In your JSP, the input fields will remain the same, but when you click / enter the date field, a popup will appear.

+4


source


Depending on the architecture of the application, you can choose one of the following methods:

1) server side approach (write datepicker JP tag) For example, there is a datepicker JSP tag in struts2 structure: http://code.google.com/p/struts2-jquery/wiki/DatePickerTag



2) client side approach (using javascript widget to display datepicker) There are many JS widgets and you can choose one depending on the complexity of the feature set you want. (jquery plugins, dojo both offer datepickers)

You might want to consider the overall architecture of the application when choosing this option, as this choice tends to affect all of your web pages (as you will find it necessary to use more widgets in your user interfaces)

+4


source


 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>

      

-1


source







All Articles