test/index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Tiny Date Picker Demo</title>
    <meta name="author" content="Chris Davies - http://chrisdavies.github.io/">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="A tiny, responsive, modern, zero-dependency date picker">
    <link rel="stylesheet" href="../dist/tiny-date-picker.css">
    <style>
        * {
            box-sizing: border-box;
            font-size: 1em;
            font-weight: normal;
            padding: 0;
            margin: 0;
        }

        body {
            box-sizing: content-box;
            background-color: white;
            font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
            font-weight: 400;
            line-height: 1.45;
            color: #333;
            min-height: 100%;
            min-width: 800px;
        }

        p {
            margin-bottom: 1.3em;
        }

        h1,
        h2,
        h3,
        h4 {
            margin: 1.414em 0 0.5em;
            font-weight: inherit;
            line-height: 1.2;
        }

        h1 {
            margin-top: 0;
            font-size: 2.441em;
        }

        h2 {
            font-size: 1.953em;
        }

        h3 {
            font-size: 1.563em;
        }

        h4 {
            font-size: 1.25em;
        }

        small,
        .font_small {
            font-size: 0.8em;
        }

        a {
            color: #0078CF;
        }

        main {
            display: block;
            position: relative;
            width: 400px;
            margin: auto;
            padding: 5em 2em;
            max-width: 100%;
        }

        .form-field {
            margin-bottom: 1.4em;
        }

        .form-field input {
            width: 100%;
            margin-top: 0.25em;
            padding: 0.5em;
            border: 2px solid #DDD;
            border-radius: 4px;
        }

        .date-example:focus {
            border: 2px solid #0078CF;
        }

        .footer-links {
            text-align: center;
        }

        /* Disable animations, since they screw with testing */
        .dp-modal .dp {
            animation: none !important;
        }

        .bottom-left {
            position: fixed;
            bottom: 0;
            left: 0;
        }

        .top-left {
            position: fixed;
            left: 0;
            top: 0;
        }

        .top-right {
            position: fixed;
            right: 0;
            top: 0;
        }

        .bottom-right {
            position: fixed;
            bottom: 0;
            right: 0;
        }
    </style>
</head>

<body>
<main>
    <h1>Tiny Date Picker</h1>
    <div class="form-field">
        <label>Pick a date:</label>
        <input type="text" class="modal-txt" tabindex="400"/>
    </div>
    <div class="form-field">
        <label>And another:</label>
        <input type="text" class="non-modal-txt txt-below" tabindex="401"/>
    </div>
    <nav class="footer-links">
        <a href="https://github.com/verivox/tiny-date-picker">Get it at GitHub</a>
    </nav>
</main>

<script src="/dist/tiny-date-picker.js"></script>
<script>
        TinyDatePicker.DatePicker('.modal-txt')
            .on({
                open: function () {
                    console.log('OPENED');
                },
                close: function () {
                    console.log('CLOSED');
                },
                select: function (_, dp) {
                    console.log('SELECT ', _, dp.state.selectedDate);
                },
                statechange: function (_, dp) {
                    console.log('STATE CHANGE ', dp.state);
                },
            });

        TinyDatePicker.DatePicker('.non-modal-txt', {
            mode: 'dp-below',
        });
</script>
</body>

</html>