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
  checkDate.setDate(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!

2 thoughts on “week of year in jqueryUI datepicker

  1. Brian Howard

    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 *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>