JSFiddle - React, Tailwind, and code Playground

by dev810

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
  <div class="container" role="main">
        <div class="row">
            <div class="col-lg-12">
                <h1>jquery.ui.timeselect</h1>
            </div>
        </div>

        <div class="row m-top-15">
            <div class="col-lg-12">
                <h2>A jQuery UI library for selecting time.</h2>
            </div>
        </div>

        <div class="row m-top-50">
            <div class="col-lg-12">
                <h3>Requirements</h3>
            </div>
        </div>

        <div class="row m-top-15">
            <div class="col-lg-12">
                <ol>
                    <li><a target="_blank" href="http://jquery.com/">jQuery (1.6+)</a></li>
                    <li><a target="_blank" href="http://jqueryui.com/">jQuery UI (1.10+)</a></li>
                    <li><a target="_blank" href="http://www.datejs.com/">Datejs</a></li>
                </ol>
            </div>
        </div>

        <div class="row m-top-50">
            <div class="col-lg-12">
                <h3>Options</h3>
            </div>
        </div>

        <div class="row m-top-15">
            <div class="col-lg-12">
                <ol>
                    <li>
                        <b>step</b> <i>(default: 30)</i>
                        <div class="well well-sm">The minute increment of the select options.</div>
                    </li>
                    <li>
                        <b>format</b> <i>(default: 'h:mm tt')</i>
                        <div class="well well-sm">The string format of the display time (For more examples,...

CSS

.ui-autocomplete {
            max-height: 300px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .well {
            margin: 5px 0;
        }

        .m-top-50 {
            margin-top: 50px;
        }
        
        .m-top-15 {
            margin-top: 15px;
        }

JavaScript

/**
 * @version: 1.0 Alpha-1
 * @author: Coolite Inc. http://www.coolite.com/
 * @date: 2008-05-13
 * @copyright: Copyright (c) 2006-2008, Coolite Inc. (http://www.coolite.com/). All rights reserved.
 * @license: Licensed under The MIT License. See license.txt and http://www.datejs.com/license/. 
 * @website: http://www.datejs.com/
 */
Date.CultureInfo = { name: "en-US", englishName: "English (United States)", nativeName: "English (United States)", dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], abbreviatedDayNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], shortestDayNames: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], firstLetterDayNames: ["S", "M", "T", "W", "T", "F", "S"], monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], abbreviatedMonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], amDesignator: "AM", pmDesignator: "PM", firstDayOfWeek: 0, twoDigitYearMax: 2029, dateElementOrder: "mdy", formatPatterns: { shortDate: "M/d/yyyy", longDate: "dddd, MMMM dd, yyyy", shortTime: "h:mm tt", longTime: "h:mm:ss tt", fullDateTime: "dddd, MMMM dd, yyyy h:mm:ss tt", sortableDateTime: "yyyy-MM-ddTHH:mm:ss", universalSortableDateTime: "yyyy-MM-dd HH:mm:ssZ", rfc1123: "ddd, dd MMM yyyy HH:mm:ss GMT", monthDay: "MMMM dd", yearMonth: "MMMM, yyyy" }, regexPatterns: { jan: /^jan(uary)?/i, feb: /^feb(ruary)?/i, mar: /^mar(ch)?/i, apr: /^apr(il)?/i, may: /^may/i, jun: /^jun(e)?/i, jul: /^jul(y)?/i, aug: /^aug(ust)?/i, sep: /^sep(t(ember)?)?/i, oct: /^oct(ober)?/i, nov: /^nov(ember)?/i, dec: /^dec(ember)?/i, sun: /^su(n(day)?)?/i, mon: /^mo(n(day)?)?/i, tue: /^tu(e(s(day)?)?)?/i, wed: /^we(d(nesday)?)?/i, thu: /^th(u(r(s(day)?)?)?)?/i, fri: /^fr(i(day)?)?/i, sat: /^sa(t(urday)?)?/i, future: /^next/i, past: /^last|past|prev(ious)?/i, add: /^(\+|aft(er)?|from|hence)/i, subtract: /^(\-|bef(ore)?|ago)/i,...