Custom date picker (Jquery)
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi! I'd like to get a custom Jquery date picker (in the format of DD-MM-YYYY) and/or (DD/MM/YYYY)

It would consist of three (inline, next to each other on the same line) select drop down menus:

Day (1-31, or if month is selected, restricted to however many days in selected month)

Month - "January, February etc. - December"

Year - "All years from 1920-2005", defaulting to 1980 on first click

Underneath, there should also be a corresponding input text box. When a Day is chosen from the drop down, this should automatically populate the text box: e.g, if "8" is chosen, the text box should instantly populate with: "08-"
Then, when the month and years are picked, this should carry on populating the rest: e.g "08-04-1972"
However, this should also work the other way round: If the user types in "04", the Day select drop down should instantly update to reflect this.

Basically, you should be able to either type the date: eg: 04/06/1978 or 04-06-1978 and it auto chooses/populates in the select drop downs, or purely select the date from the dropdowns, or even any combination (choose 07), then type "-09", then choose "1956" from the drop down menu to get the result: "07-09-1956" in the text input field.

It would need to accept / or - as a separator, though perhaps default to - if a date is picked from the select boxes.

Ideally the code should be as concise and clear as possible, and work properly with Bootstrap 3.
Many thanks if you choose to accept the challenge!

Hello. What to do in the case the user selects or write 29-02 for a year that is not bissextile?
cueball 7 days ago
Nothing, I guess! If it's an invalid date, then the drop downs should do nothing (stay as they are). I don't think this matters too much, as an invalid date won't be accepted by the server side script anyway.
BSUK 7 days ago
awarded to Miro

Crowdsource coding tasks.

2 Solutions

Yes, I saw this one, but it doesn't offer select drop downs as described in my bounty. The closest thing I found is the JqueryUI one with select options: https://jqueryui.com/resources/demos/datepicker/dropdown-month-year.html
BSUK 7 days ago
Just to be clear, I'm not looking for an existing, fully fledged date picker plugin (as I know there are plenty). The requirement is simply as described in the bounty. I'd do it myself but my jquery skills are still getting up to speed, and there's a time constraint.
BSUK 6 days ago
Winning solution

Not looking to get your bounty as it's not up to your spec (and below my pay-grade :)
It's to give you a head start and you can customize it yourself.

Demo: Simple jQuery Date Picker (view source code)
I used php to faster populate the selects. You can also view php source here.
View dev console to see some useful vars you may need.

Todo:
The input will need leading zeros to work
The day is not limited to 30 or 31 depending on the month

It's using the jQuery Mask Plugin and minimal JS to transfer the values from the selects to the text input and the other way around.

Wow, that's seriously cool! It's as close as damnit to the brief, so I'll award the bounty anyway! I'm not sure what's actually missing, other than the illegal dates thing (which isn't a big problem), and naming the months, which doesn't break anything as the "value" is the important bit. The PHP method of generating the HTML is pretty cool too (and as it happens, the project is in PHP anyway, so will also come in useful)! Thank you so much, I really appreciate your help with this. :)
BSUK 6 days ago
Thanks a lot for awarding me. I'm truly grateful and glad I could help!
Miro 5 days ago
View Timeline