CODEWITHSUNDEEP
jquerydatepickerbootstrap-datepickerdaterangepicker
Sajjad Arif Gul
Sajjad Arif Gul

Reputation: 97

jQuery Datepicker with Separate Year and Month Navigation

I have a specific new requirement related to date picker. I've gone through a lot of date time pickers on different links in Google but I've yet to find one that matches my requirements.

I am attaching mockup below.

When the date input field is clicked, it should show this normal calendar.

Normal Calender

If user has to select a very old year, user should just click on year and it will show years as below and a separate year navigation should be available for immediate previous or next selection.

enter image description here

Similarly for Months selection, user can simply click on month and it will list months and a separate month navigation should also be available.

enter image description here

The closest I've found is Air DatePicker and Bootstrap DatePicker but they both don't support separate navigation for Year and Month.

Should I try to develop this on my own from scratch or is there any other library that support these functions?

Upvotes: 2

Views: 1043

Answers (1)

RoryGS
RoryGS

Reputation: 1781

Reasonable requirements for a user age selector etc.

I've not done a extensive search on currently available datePickers that meet your requirements. I definitely recall seeing / using one as a user age selector (Can't recall its name or the website I used it on, and most of the sites have migrated from datepicker to datepicker so the code is likely already lost in the vaults of git)

That said I took a look at Air DatePicker, looks rather slick, I see why you mentioned it.

I have made a couple of tweaks to its datepicker.js and datepicker.css files, seems to able to do what you require with some changes.

As you can see below I split the title into 3 's. Plunker contains the modified files.

I would recommend you use something like WinMerge and compare the air datepicker original files, to my changed ones on plunker. Should be easy to further extend it as you need.

My only reservations doing this would be:

  • As improvements and bug fixes happen to Air Datepickers new versions you would need to modify then again. Or submit this request to its creator.
  • If you use some of the other 'air datepicker' options available the results could be unexpected.

Developing your own sounds like a heavy task, rather take your favorite plugin visually, already containing the majority of features you require, and attempt to extend it. My extension of air date picker now is a hack in my mind. Depending on the air date picker options you require it could be coded better.

Good luck.

plunker demo

var template = '' +
    '<div class="datepicker--nav-action" data-action="prev">#{prevHtml}</div>' +
    '<div class="datepicker--nav-title-left">#{titleLeft}</div>' + 
    '<div class="datepicker--nav-title-centre">#{titleCentre}</div>' + 
    '<div class="datepicker--nav-title-right">#{titleRight}</div>' +
    '<div class="datepicker--nav-action" data-action="next">#{nextHtml}</div>',

Upvotes: 1

Related Questions