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="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

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="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<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">
</div>

$('.jquery-datepicker').datepicker();

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'.

$('.jquery-datepicker').datepicker({
  date: null
});

5. Set the start/end dates.

$('.jquery-datepicker').datepicker({
  startDate: null,
  endDate: null,
});

6. Specify an array of dates to disable.

$('.jquery-datepicker').datepicker({
  disabledDates: [],
});

7. Customize the data format.

$('.jquery-datepicker').datepicker({
  format: 'ddmmyy',
});

8. Set the position of the date picker.

$('.jquery-datepicker').datepicker({
  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.