zouza zouza - 3 months ago 16
jQuery Question

Day of the year integrated into the jquery ui date picker

Basically what I want to do is have in the calendar under each day the day of the year.

In the example I made when you pick the day in the text field you get the day of the year, I want this to be displayed inside the calendar under each day when you open the calendar.

Thanks for the help.

http://jsbin.com/taxesagaxe/edit?html,js,output

Answer

This is the best I could come up with since jQuery's datepicker has some odd events:

$("#datepicker").datepicker({
  onChangeMonthYear: function() {
    setTimeout(calcDOY, 1)
  }
}).click(function() {
  calcDOY()
})

function calcDOY() {
  $('table.ui-datepicker-calendar tbody td').each(function() {
    var month = $(this).data('month') + 1;
    var year = $(this).data('year');
    var day = +$(this).find('a').text();

    var now = new Date(month + '/' + day + '/' + year);
    var start = new Date(now.getFullYear(), 0, 0);
    var diff = now - start;
    var oneDay = 1000 * 60 * 60 * 24;
    var dayYear = Math.floor(diff / oneDay);
    $(this).find('a').html($(this).find('a').text() + '<br><span>(' + dayYear + ')</span>');
  })
}

jsFiddle example