CODEWITHSUNDEEP
javascriptjqueryjquery-uidatedatepicker
Kirkman14
Kirkman14

Reputation: 1676

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

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?

Upvotes: 2

Views: 833

Answers (2)

Bob Wildfong
Bob Wildfong

Reputation: 101

I have had a similar use case for a repeating annual deadline. After much work to develop a date picker that was year-agnostic I just went with 2 dropdowns:

<select name='month'><option value='1'>January</option> ... <option value='12'>December</option></select>

and

<select name='day'><option value='1'>1</option> ... <option value='31'>31</option></select>

A little JS can disable days 29-31 for months that don't contain those days. I could have left 29 in February because there is no year (of course) so it would always be a valid possibility, however in my use case of an annual repeating deadline it wouldn't make sense.

In the back end I obtain the current instance of this date by concatenating the current year with the month & day.

sprintf( date("Y")."-%02-%02", month, day );

Sorry there doesn't seem to be a better date picker out there, but I've found this approach to be simpler to use in the UI, to enforce and manage the year in the back end, and to maintain code.

Upvotes: 0

ioums
ioums

Reputation: 1395

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

Upvotes: 2

Related Questions