JSFiddle - React, Tailwind, and code Playground

by social_quotient

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/1.3.2/ZeroClipboard.min.js"></script>
<div class="container">
    <div class="row">
        <div class="form-group col-md-4">
            <label for="since">Since</label>
            <input class="form-control" type="date" id="since">
        </div>
        <div class="form-group col-md-4">
            <label for="until">Until</label>
            <input class="form-control" type="date" id="until">
        </div>
        <div class="form-group col-md-4">
            <label for="count">Times per Day</label>
            <input class="form-control" type="number" min="1" id="count" value="0">
        </div>
    </div>
    <div class="form-group">
        <button class="btn btn-success btn-lg btn-block" type="button" id="copy">Copy</button>
    </div>
    <div class="form-group">
        <textarea id="output" class="form-control" rows="20"></textarea>
    </div>
</div>

CSS

html {

			    overflow-y: scroll;

			}

			html, body {

			    height: 100%;

			    width: 100%;

			}

			body {

			    padding: 2em 0;

			    font-family: monospace;

			}

			textarea {

			    resize: vertical;

			}

			.container {

			    max-width: 600px;

			}

JavaScript

$(function () {
    $("#since, #until").val(moment().format('YYYY-MM-DD')); // some sensible defaults

    $('#since, #until, #count').change(function () {
        var since = moment($("#since").val(), 'YYYY-MM-DD');
        var until = moment($("#until").val(), 'YYYY-MM-DD');
        var count = parseInt($("#count").val(), 10);

        if ((count > 0) && since.isValid() && until.isValid()) {
            var values = [];

            while (since <= until) {
                for (var i = 0; i < count; ++i) {
                    values.push(since.clone().add('m', getRandomInt(480, 1320)).toISOString()); // between 8am and 10pm, in minutes
                }

                since = since.add('d', 1);
            }

            $('#output').val($.map(values.sort(), function (value) {
                return moment(value).format("M/D/YYYY H:mm");
            }).join("\n"));
        } else {
            $('#output').val('');
        }
    });

    ZeroClipboard.config({
        moviePath: '//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/1.3.2/ZeroClipboard.swf',
    });

    var client = new ZeroClipboard($('#copy'));

    client.on('load', function (client) {
        client.on('datarequested', function (client) {
            var value = $('#output').val();

            if (navigator.platform.indexOf('Win') > -1) {
                value = value.replace(/\n/g, "\r\n");
            }

            client.setText(value);
        });
    });

    client.on('wrongflash noflash', function () {
        ZeroClipboard.destroy();
    });
});

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}