sebastiendaniel-datepicker v1.1.0

Getting started

Install datepicker

npm install sebastiendaniel-datepicker --save

Require or link

You can require datepicker into your source:

var datepicker = require("sebastiendaniel-datepicker");

Alternatively, a standalone bundle has been provided for you, which uses the datepicker namespace. To obtain the built files (datepicker.min.js and datepicker.min.css), run the grunt task grunt build.

<script type="text/javascript" src="build/datepicker.min.js"></script>

You'll also need to provide some styling to the datepicker markup, otherwise it's just a bland HTML table. We've provided some default styles for you, feel free to adjust them to your needs:

<link rel="stylesheet" type="test/css" href="build/datepicker.min.css" />

How it works

Datepicker generates a month based on a provided date. It uses the provided date to determine the month to render. If no date is provided, it uses the current date. Datepicker has 3 events:

• previous month: renders the month before current month
• next: renders the month after current month
• select date: triggers the callback with selected date as a JavaScript Date object.

Datepicker doesn't "pre-render" a range of months. It dynamically compiles a new month table when previousMonth or nextMonth events occur. There is always only one month rendered at a time.

Example

By default, datepicker assumes the current date as the date around which to build the calendar. The easiest way is to simply call datepicker.get(), and inject into the DOM:

document.getElementById("myContainer").appendChild(datepicker.get());

You can also optionally provide a date around which to build the datepicker month:

datepicker.get(new Date("2016-06-01"));

setting a callback

You can provide a callback function, which will be triggered with a single argument: the selected date as a JavaScript Date object:

var datepicker = require("sebastiendanie-datepicker");

datepicker.config.callback = function(date) {
        // do something
    };

Members

Functions

config : object

Kind: global variable
Properties

get(date) ⇒ Element

Kind: global function
Summary: Returns the markup of a calendar month, centered on provided date
Returns: Element - fully-functional calendar markup (HTML)