week of year in jqueryUI datepicker

I needed to display week of year in a colum on the jqueryUI datepicker. Luckily it has the feature built in, unluckily it has a quirk relative to the way we typically display calendars in the US with Sunday as the first day colum. At first I thought it was a bug, but technically it is not, so I guess it is better classified as a gotcha. Anyway, to get the week of year to display as we would expect in the US you need two pieces.

First where you instantiate the datepicker:

$(".uiDatePicker").datepicker({minDate: -1, maxDate: '+10D', defaultDate: +1, hideIfNoPrevNext: true, showWeek: true, calculateWeek: myWeekCalc });

The important argument there is the ‘calculateWeek: myWeekCalc’ .

Next you need to define the custom week of year calculator, in this case ‘myWeekCalc’:

function myWeekCalc(date) {
  var checkDate = new Date(date.getTime());
  // Find Thursday of this week starting on Sunday
  checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay()));
  var time = checkDate.getTime();
  checkDate.setMonth(0); // Compare with Jan 1
  return Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1;

I borrowed this from the jqueyUI source and tweaked it to calculate the week based on the Thursday in the row instead of the first day colum in the row. To me this makes sense given the way the ISO for week of year is determined.

It seems to be working perfectly for me. Let me know if you use this and run into issues 🙂

Flattr this!

Published by


Web developer/designer with a strong preference for open source software

2 thoughts on “week of year in jqueryUI datepicker”

  1. I am sure glad you kept this post up. This helped me a great deal!! It’s nice guys like you that post their solutions who make the web a better place for developers. I need to start doing the same. Thanks a bunch!

Leave a Reply

Your email address will not be published. Required fields are marked *