jQuery.futureDatepicker

Simple jQuery plugin that allows you to create awesome datepicker for the future dates. Design is fully responsive and have clean and minimalist design and it is primarily built for the mobile devices. It's relaying on CSS flexbox so it is only compatible with modern web browser that supports this property.

Demo

Check out the demo example here.

Dependencies

The plugin requires jQuery 2.xx version.

Installation

To start using the plugin, simply include css file in the head section and script file somewhere after jQuery library, preferably at the bottom of the page, like on the example below:

<!DOCTYPE html>
<html>
  <head>
    <!-- css -->
    <link href="~/jquery.futureDatepicker.min.css" rel="stylesheet" />
  </head>
  <body>
    <!-- your html code -->
    
    <!-- scripts -->
    <script src="~/jquery.{2.xx}.min.js"></script>
    <script src="~/jquery.futureDatepicker.js"></script>
  </body>
</html>

Usage

After you included script into your page, you need to create an element that will initialize future datepicker and save the value of the chosen date. To do that, you can simply add an input element with unique ID and then add a plugin call, like in the example below:

<!DOCTYPE html>
<html>
  <head>
    <!-- css -->
    <link href="~/jquery.futureDatepicker.min.css" rel="stylesheet" />
  </head>
  <body>
    <!-- your html code -->
    
    <!-- input field -->
    <input id="element" type="text" name="element" placeholder="Click here to pick a date">
    
    <!-- scripts  -->
    <script src="~/jquery.{2.xx}.min.js"></script>
    <script src="~/jquery.futureDatepicker.js"></script>
    <script>
        $(document).ready(function () {
            $('#element').futureDatepicker({
                displayWeekAbbr: true,
                startIn: 0,
                futureMonths: 12,
                datepicker: true,
                statusBar: true,
                showBgMonths: true,
                additionalClass: 'default',
                beforePick: function () { },
                afterPick: function () { }
            });
        });
    </script>

  </body>
</html>

###element This needs to be an <input> element with type="text".

###options (defaults)

displayWeekAbbr [Boolean] : Format of the week day labels. It can be true - Sat or false - Saturday.
startIn [Integer]: First day of the week. 0 - Sunday, 1 - Monday, ... , 6 - Saturday.
futureMonths [Integer]: Number of future months to show.
datepicker [Boolean]: Choose whether plugin should work as a datepicker or as a full page calendar. This feature is in progress and for now only datepicker should be used, or true value.
statusBar [Boolean]: Show true or hide false bottom status bar within the datepicker. If visible, then after the date is picked, SET button needs to be clicked to save the value. If not visible value will be automatically saved by clicking on the date.
showBgMonths [Boolean]: Show true or hide false labels of the months, standing behind the days labels.
additionalClass [String]: Additional class can be added for optional CSS styling or JavaScript purpose.
beforePick [Function]: Code triggered before the date is selected.
afterPick [Function]: Code triggered after the date is selected.

Licence