You are making an assumption that everyone using the web are as computer-literate or technical experts as you. But as a UX designer you should also cater for those who are the complete opposite (and there's an accountable amount of them out there).
Selects put strict constraints on the input, by that reducing errors. Experts won't mind selects of this type as much as novices could hate input fields.
She looks cool, but her sight is short, only 3 cells are functional in her working memory, and she struggles with any technology that emerged after 1969. A computer keyboard looks to her like a cockpit; when you ask her to press the back button, she will reply "I can't reach my back love, but I'm pretty sure there's no button there. Now, where did I put my tea cup?". Select boxes are safe-heaven to her.
Just think of the amount of errors supa-granny can make on an input field:
- type month instead of year.
- type a year in the past for expiry date, or a year in the future for start date.
- try to type letters instead of numbers.
- skip the leading zero.
- put 2013 where there's only place for 13.
- try to enter the forward slash (including spending a minute finding it on the keyboard).
- by the time she starts typing forget whether it's month before year or the other way around (placeholder's gone).
None of these will happen with select boxes.
The JQuery widget you present is super-cool (and it does handle most of these errors) but it has a few usability flaws I feel should be mentioned:
- There's no feedback for wrong input (someone trying to press J for January).
- It translates really badly on mobile devices - where you have to type in numbers on the numeric keyboard, instead of selecting from a pre-defined list.
The point is that constraints reduce errors. The price you pay is often in speed, and it is experts who pay this price. Ideally, an input as such should smartly allow both text input (neatly behaving like the widget you have shared), but also constrained selection for people like supa-granny.