Is there a way to make jQuery datepicker work without years?

Question

I want to use a datepicker as part of an "On this day in history" project.

The idea is that a user chooses a day, say "Nov. 20," and the project shows him what historical events happened on that day in various years.

Given that they are choosing a generic day, not a specific date (like "Nov. 20, 2013"), I would want the datepicker to be year-agnostic.

Several people have asked something similar, but they were asking for ways to hide the year.

I don't want to hide the year. I want the picker to ignore the year.

There should be no day labels ("Monday," "Tuesday," etc), and no blank days at the beginning of the first week. In the case of February, it would list 29 days.

So, instead of something like this...

NOVEMBER
Mo  Tu  We  Th  Fr  Sa  Su
--  --  --  1   2   3   4
5   6   7   8   9   10  11
12  13  14  15  16  17  18

...It would be like this

NOVEMBER
1   2   3   4   5   6   7
8   9   10  11  12  13  14
15  16  17  18  19  20  21

Is there a way to modify jQuery UI's datepicker to work like this? Or a different library that offers a year-less option for their datepicker?

Answer 1

You could maybe do this by overriding the Date.prototype.getDay() method:

JS:

$(function() {
    //override getDay()
    Date.prototype.getDay = function() {
        //change getDay() so that the first day of the month is always at 
        // the beginning of the week
        return ((this.getDate()-1) % 7);
    }

    //create the datepicker that does not display year
    $( "#datepicker" ).datepicker({dateFormat: "d MM"});
});

CSS (to hide year and days in the datepicker):

.ui-datepicker-year, .ui-datepicker-calendar thead {
    display: none;
}

Fiddle