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?

*"Is there a way to modify jQuery UI's datepicker to work like this"* probably, but it's going to require modifying/extending the widget's private methods. This kind of functionality isn't built-in. — Kevin B, Nov 21 '13 at 18:36
This sounds like it would be faster to build your own than to extend jQuery UI's, as your requirements are pretty simple. — Evan Davis, Nov 21 '13 at 18:38
The year is needed to determine what day of the week a specific date is on. You might want to just build a static calendar and change the month names out. Datepicker might be a little overkill for your scenario. — NaNpx, Nov 21 '13 at 18:38

ioums · Accepted Answer · 2013-11-21T18:58:16.817

2

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

edited Nov 21 '13 at 18:58

answered Nov 21 '13 at 18:50

ioums

1,367
14
20

This definitely works but could cause serious issues for other scripts. It would be better to localize this change to jQuery UI's output. – Evan Davis Nov 21 '13 at 19:36
@Mathletics I agree, this could potentially cause some problems. It also might cause problems that would be horrible to debug if you didn't know that someone had gone and stuck this in the code somewhere. – ioums Nov 21 '13 at 19:45

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

1 Answers1