sebastiendaniel-datepicker

    1.1.0 • Public • Published

    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

    config : object

    Functions

    get([date])Element

    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

    Install

    npm i sebastiendaniel-datepicker

    DownloadsWeekly Downloads

    32

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • sebastiendaniel