Modern jQuery date picker plugin – DateSelect

DateSelect is a modern jQuery date picker plugin, that provides a simple way to create a nice-looking alternative of date picker.

Alternative jQuery date picker plugin

Try jQuery.DateSelect. We can find a lot of date pickers solutions, but this one for sure is worth of attention. Is a nice alternative for well known date pickers.

DateSelect - Modern jQuery date picker plugin
DateSelect – Modern jQuery date picker plugin

Usage

Include the plugin files:

– jquery.dateselect.css

– jquery.dateselect.js

We can use this plugin in two modes: automatic or manual.

In automatic mode we just have to add a data-* attributes, for example:

<input type="text" name="date1" id="date1" class="form-control"
   data-select="date">
<span class="input-group-btn">
  <button class="btn btn-primary" type="button" data-toggle="select">
    <i class="fa fa-calendar"></i>
  </button>
</span>

In manual mode we have to call the $.dateSelect.show() method to open the date picker.

HTML

<input type="text" name="date2" id="date2" class="form-control">
<span class="input-group-btn">
  <button class="btn btn-primary btn-date" type="button">
    <i class="fa fa-calendar"></i>
  </button>
</span>

JS

$('.btn-date').on('click', function(e) {
  e.preventDefault();
  $.dateSelect.show({
    element: 'input[name="date2"]'
  });
});

The plugin is customizable and it works with your mouse wheel too. Just include the jQuery MouseWheel plugin.

License: MIT

jQuery date picker plugin on GitHub:

https://github.com/biohzrdmx/jQuery.DateSelect

See also:

DrumJS – A jQuery animated date picker and value selector (iOS style)

Work with date and time in JavaScript? Try moment.js!

jQuery time picker solution

Enjoy!

Share:Share on Facebook2Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest2