Mobile-friendly Sliding Date Picker Plugin - futureDatepicker

futureDatepicker is a beautiful, responsive, mobile-friendly jQuery based date picker that slides out from the bottom of the screen when a specific date input is clicked/tapped.

How to use it:

1. Load the style sheet jquery.futureDatepicker.min.css in the header of your html document.

<link href="jquery.futureDatepicker.min.css" rel="stylesheet">

2. Create a normal text field to accept the selected date.

<input id="date" type="text" name="date" placeholder="Click to choose date">

3. Load jQuery JavaScript library and the jquery.futureDatepicker.min.js at the end of the html document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.futureDatepicker.js"></script>

4. Initialize the date picker with default options.

$('#date').futureDatepicker();

5. All default configuration options.

$('#date').futureDatepicker({
  
  //  weeks: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
  weeks: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
  weekabbrs: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],

  months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  monthabbrs: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

  // choose between values in options.weeks or options.weekabbrs
  displayWeekAbbr: true,

  // choose between values in options.months or options.monthabbrs
  displayMonthAbbr: false,

  // left most day in the calendar
  // 0 - Sunday, 1 - Monday, ... , 6 - Saturday
  startIn: 0,

  // number of future months
  futureMonths: 12,

  // use as a datepicker
  datepicker: true,

  // status bar at the bottom
  statusBar: false,

  // show full month names in the background
  showBgMonths: true,

  // additional class
  additionalClass: '',

  // before date is picked
  beforePick: function () { return false; },

  // after date is picked
  afterPick: function () { return false; }

});

Change log:

2016-06-01

• Remove click event from the inactive elements

2016-05-31

• disable keyboard input

---

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