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.

Date range Image

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>  



Here are the list of attributes you can use in datapicker javascript function.

Name Type Default value Optional value Description
type String ‘date’ year/month/date/datetime/datetime-range/date-range type of the picker
readonly Boolean false false/ true whether DatePicker is read only
disabled Boolean false false/ true whether DatePicker is disabled
format String ‘yyyy-MM-dd’ year->yyyy, month->MM, day->dd, hour->HH, minute->mm, second->ss format of the picker
placeholder String ‘Please pick a day’ init input element’s placeholder
align String ‘left’ ‘left’/’center’/’right’ the pick panel’s alignment
weekStart Number 0 Start of the week
startDate Date null If the start date exists, the date before the start date is disabled
endDate Date null If the end date exists, the date after the end date is disabled
lang String ‘en-US’ ‘en-US’/’zh-CN’/’vi’ language of the datepicker
rangeSeparator String ‘-‘ if type is ‘date-range’ or ‘datetime-range’, use rangeSeparator to separate the date
defaultValue String/Date default date, if picker type is date-range or datetime-range, picker’s type must be String
zIndex Number 2008 The CSS style z-index for the picker.

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.