Basic information’s

I’ve created simple date picker using just JavaScript and CSS. Yes, there is a lot of date pickers, but not like this one 😀 Anyway, my goal was to build date picker which will be:

  • independent of any 3rd party libraries
  • working with keyboard navigation
  • working with screen readers
  • fast and as much as possible small file size
  • simple to implement
  • cross-browser
  • passing JSLint in case of JavaScript code

The first, basic version of datepicker you can see and download at my lab section. There is still some limitations, but I will be updating as much as possible and improving this date picker.

Download and source code

The source code of date picker is available on Github now.

How to use it

All you need to do is to add class name datepicker to your HTML input element. Example: <input class="datepicker" type="text" id="mydata" name="mydata" value=""/>

Configuration

In file datepicker.js there is section named /* Config */. There you can translate months, days, set arrows for next/previous month and many more. I’ll try to describe all settings on lab example page.

Don’t like UX design of date picker? No problem. Change CSS rules as you want 🙂

Example

Yes, I like example. So, in that case you can see how it works. Just go to my lab and watch how date picker works.

License

The license I use MIT.

Notes

The date picker was tested on IE6 / Win XP, IE10 / Win7, Firefox 24 / Win7, Chrome 29.0.1547.76 m. / Win7, Firefox 22 / Ubuntu 13.04.

Feel free to contact with me and send me some suggestions / bugs.

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Comments

You can leave a response, or trackback from your own site.

2 Responses to “Simple date picker”

  1. marcel, 17 November 2014

    beautiful little date picker… only one little problem the past year are not visible, what if I want to pick say… 2003, only 2014 forward are showing? if I go to previous months eventually the year does go reverse but it’s a slow process one month at a time, is there any way to fix? I went into the jscript file but looks like the only thing I can change is up to a certain year, default 2020,, can you point me in the right direction?
    thanks

    Marcel

  2. Cezary Tomczyk, 21 November 2014

    Let me try to fix it.

Before you add comment see for rules.

Leave a Reply

Your email address will not be published. Required fields are marked *

8h4m1g