Introduction

JQuery date picker is very familiar and popular I want to show u how to display a year calendar along with 12 months using this date picker plugin.
Script required
  1. <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  2. <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  3. <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js">
  4. </script>
Html Code
  1. <div id='calendar'>
  2. </div>
JavaScript code
  1. <script type='text/javascript'>
  2. $(document).ready(function()
  3. {
  5. $("#calendar").datepicker
  6. ({
  7. defaultDate: '01/01/' + new Date().getFullYear(),
  8. minDate: '01/01/' + new Date().getFullYear(),
  9. maxDate: '12/31/' + (new Date().getFullYear() + 1),
  10. numberOfMonths: [3, 4],
  11. });
  12. });
  13. </script>
Output

output
Events we can work on,
  1. <script type='text/javascript'>
  2. $(document).ready(function()
  3. {
  5. $("#calendar").datepicker
  6. ({
  7. beforeShowDay: function highlightDays(date) { // highlight date
  9. // u r logic
  11. },
  12. onSelect: function(dateText, inst) { // selected date event
  14. // u r logic
  16. },
  17. defaultDate: '01/01/' + new Date().getFullYear(),
  18. minDate: '01/01/' + new Date().getFullYear(),
  19. maxDate: '12/31/' + (new Date().getFullYear() + 1),
  20. numberOfMonths: [3, 4],
  21. });
  22. });
  23. </script>