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

| Name | Type | Description | | --- | --- | --- | | dayNames | Array.<string> | array of 7 strings used as day names, from sunday[0] to saturday[6] | | monthNames | Array.<string> | array of 12 strings used as month names, from january[0] to december[11] | | startDate | Date | JavaScript date object. Used to determine around which date to render the calendar | | selectedDate | string | currently selected date (yyyy-mm-dd) | | callback | function | function called when a user selects a date. It is provided a JavaScript Date object as single argument |

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)

| Param | Type | Default | Description | | --- | --- | --- | --- | | [date] | string | Date | "Date.now()" | ISO date string or JavaScript Date object |