🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

DateSelector is an easy yet highly customizable jQuery plugin that convert a normal text input into separate "day", "month" and "year" dropdowns for easy date & time selection.

Date-Picker Time-Picker

Documentation

DateSelector

Datepickers are great, that's right. But in some cases it's not intuitive at all. For example when you want to get a user's birthday, online selects or dropdowns are a lot much better.

The aim of this plugin is to easily build that kind of form fields for date input.

Installation

For now, the plugin has dependencies with jQuery and Moment. You can include it like following. The css file isn't required if you don't want to use the plugin style. Bootstrap & Foundation aren't required at all, they're in the repo only for demo purpose.

Usage

HTML

    <head>         <link href="path/to/plugin/dateselector.css" rel="stylesheet">     </head>     <body>         <div id="element"></div>         <script src="path/to/jquery/jquery.js"></script>         <script src="path/to/moment/moment.js"></script>         <script src="path/to/plugin/jquery.dateselector.js"></script>     </body>

JAVASCRIPT

    $(document).ready(function() {         $('#element').dateSelector();     });

Demo

See demo project page

License

The plugin is under MIT License

TODO

  • Unit testing
  • Build a "light version" of the plugin
  • Plain javascript version
  • Angular wrapper/version
  • Try to remove momentjs dependency (or make it easier to use)

You May Also Like