Full-featured DatePicker jQuery Plugin

Datepicker helps to pick date easily for any input field. There are lot’s of free jquery datepicker plugins. Here i am going to share one of Full-featured DatePicker jQuery Plugin which you can use in any input field to pick dates or date range quickly.

Features

• Supports more configurable options.
• Supports more methods
• Supports more events
• Supports datetime mode
• Supports range date and range datetime mode
• Supports internationalization
• Cross-browser support

Libraries

<!--CSS-->
<link rel="stylesheet" href="/assets/css/iconfont.css">
<link rel="stylesheet" href="/css/jquery.datepicker.min.css">
<!--JS-->
<script src="/assets/js/jquery.min.js"></script>
<script src="/js/jquery.datepicker.min.js"></script>
// there is no need to import the next line of code when current language is 'en-US'
<script src="/i18n/datepicker.zh-CN.js"></script>

Methods

$().datepicker(methodName, argument1, argument2, ..., argumentN);

setDate(date)

Set the current date with a new date, parameter date type is String or Date .

$().datepicker('setDate', '2016-02-09');
$().datepicker('setDate', new Date(2016, 1, 9));

getDate()

Get the current date.

$().datepicker('getDate');

clear()

Clear the picker date (when date is cleared, the current date is displayed by default).

$().datepicker('clear');

show()

Show the picker panel.

$().datepicker('show');

hide()

hide the picker panel.

$().datepicker('hide');

disable(value)

disable or enable the picker, if parameter value is true that can disable the picker, otherwise can enable the picker.

// disable the picker
$().datepicker('disable', true);
// enable the picker
$().datepicker('disable', false);

destroy()

Destroy the picker and remove the instance from target element.

$().datepicker('destroy');

Events

$().on(eventName, function (e, arguments) {
  // todo
});

pick.datepicker

This event fires when date is changed.

• event ( Type: Object )
  • newDate ( Type: String )
  • oldDate ( Type: String )

$().on('pick.datepicker', function (event) {
  console.log('newDate: ' + event.newDate);
  console.log('oldDate: ' + event.oldDate);
});

show.datepicker

This event fires when picker is show.

$().on('show.datepicker', function (e) {
  // todo
});

hide.datepicker

This event fires when picker is hide.

$().on('hide.datepicker', function (e) {
  // todo
});

Callbacks

$().datepicker({
    CallbackName: function () {
      // todo
    }
});

onChange

A shortcut of the “pick.datepicker” event, this callback called when picker value is changed.

$().datepicker({
    onChange: function (events) {
      console.log('newDate: ' + event.newDate);
      console.log('oldDate: ' + event.oldDate);
    }
});

onShow

A shortcut of the “show.datepicker” event, this callback called when picker is show.

$().datepicker({
    onShow: function () {
      // todo
    }
});

onHide

A shortcut of the “hide.datepicker” event, this callback called when picker is hide.

$().datepicker({
    onHide: function () {
      // todo
    }
});

Locale

I18n config, default language is en-US

Usage

<script src="/js/jquery.datepicker.min.js"></script>
<script src="/i18n/datepicker.zh-CN.js"></script>
<script>
  $().datepicker({
    lang: 'zh-CN'
  });
</script>  

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by gregzhang616, Visit their official github repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.