Kalendae lightweight time and date selection JavaScript plugin

Kalendae is a lightweight time date selection JavaScript plugin, which is a standalone plugin that does not rely on any Third-party plug-in library, uses simple and convenient, perfect support date of year Month day selection.

Characteristics

Independent Plug-ins, do not rely on Third-party plug-ins, such as jquery, Prototype, MooTools, etc., only need you to introduce the plug-in file can be used.
The default theme uses a picture file, that is, the up and down buttons, all the other effects are CSS designed to complete.
Support compatible with most browsers now, IE8 above.
Supports single date, multi date and date range selection.
Displays the configurable number of months at a one-time.
You can display as an inline control on a Web page, or connect to one or more control input fields that pop up.
You can connect to any page element, not just a named element.
Configurable custom parameters, defined as a series of dates or through a callback function
Output selected dates in multiple formats
Leverage Moment.js intelligence and simple data parsing.
Sample screenshot

The default display effect

A 2-month calendar of input elements.

Two months, range selection, future date, and weekend grey display:

How to use

Copy the files in the Build/folder to any site scripts. Include JS and CSS files in file header like:

<link rel= "stylesheet" href= "Build/kalendae.css" type= "Text/css" charset= "Utf-8" >
<script src= "Build/kalendae.standalone.js" ></script>

Once you do this, you can initialize some of the Kalendae methods. The easiest way to do this is simply to add the "Auto-kal" class to the element you want the calendar to attach to. The calendar is created using the default settings.

<div class= "Auto-kal" ></div>

The following code provides a pop-up calendar for the INPUT element.

<input type= "text" class= "Auto-kal" >
If you want to override the default settings, you can use the property's data.

<div class= "Auto-kal" data-kal= "months:3, Direction: ' Future '" ></div>

Again, this will work for the INPUT element.

You can also manually set Kalendae through JavaScript code. This should be at the end of the page, or in the domready/load event. To do this you have to instantiate an object Kalendae, or the INPUT element class Kalendae.input pops up. All two objects have two parameters:

This is a targetelement element object, or an element's ID string.
Option-An object that contains a new option. Any options are returned to the default settings.
See examples that include the use of index.html files.

Jquery

Kalendae does not need jquery, but it does provide a jquery plugin, and jquery is available. jquery users can create a window by calling or Eject $ (selector). Kalendae (Options). Selector If the selection is an instance of an HTML INPUT element Kalendae. Enter to create the instance, otherwise it will Kalendae. This example is a method of data storage and access through jquery that can be accessed via $ (selector). Data (' Kalendae ').

Moment.js

The processing process of the mitigation period, Kalendae can use the Moment.js data Processing library. This bundled library has been modified to prevent it from being added to the global scope, but it is still available if you want to use it in your own code. Add the following when the script tag is available for your application.

<script type= "Text/javascript" charset= "Utf-8" >
Window.moment = kalendae.moment;
</script>