Simple Clean Date Picker Plugin For jQuery - datepicker.js

File Size: 9.58 KB
Views Total: 15695
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple Clean Date Picker Plugin For jQuery - datepicker.js

A minimal, clean date picker for jQuery to select a date from a calendar popup that appears above or below the input field when clicked.

More features:

  • Allows to set start/end dates.
  • Allows to set dates that should be disabled.
  • Custom date format.
  • Allows to localize month/week names.

How to use it:

1. Load the Font Awesome Iconic Font for the navigation icons.

<link rel="stylesheet" href="">

2. Load jQuery JavaScript library and the jQuery datepicker.js plugin's files in the page.

<link rel="stylesheet" href="jquery-datepicker.css">
<script src="" 
<script src="jquery-datepicker.js"></script>

3. Call the function on the target input field where you want to append the date picker to.

<div class="jquery-datepicker">
  <input type="text" class="jquery-datepicker__input">

4. Set the pre-selected date. Note that the date strings should be in YYYY-M-D format like '2017-1-3', or format like '+3d'.

  date: null

5. Set the start/end dates.

  startDate: null,
  endDate: null,

6. Specify an array of dates to disable.

  disabledDates: [],

7. Customize the data format.

  format: 'ddmmyy',

8. Set the position of the date picker.

  position: 'below'   /* above or below the input field */

9. Customize the localization strings.

en: {
  months : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  days: ['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU']

This awesome jQuery plugin is developed by youran. For more Advanced Usages, please check the demo page or visit the official website.