Clash Royale CLAN TAG#URR8PPP

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.

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.

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

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?

1 Answer
1

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:

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>',


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.