JSFiddle - React, Tailwind, and code Playground

Google Inspired Datepicker

by Jennifer Perrin

HTML

<div class="container" style="width: 600px; margin: auto;">
    <h2>Google Inspired Datepicker Example</h2>

    <input type="text" id="cal" placeholder="Pikk sum datez!" />
    <p>Try typing "<strong>Next Monday</strong>" into the box and press Enter.</p>

</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400, 300, 700);
 .has-gdatepicker {
    position: absolute;
    top: 2px;
    right: 2px;
}
/* original input box is top-right so you can see the link 
   usually you'd hide it with CSS. */
 .ui-gdatepicker-input {
    display: block;
    vertical-align: middle;
    width: 200px;
    height: 22px;
    line-height: 22px;
    padding: 3px 8px;
    font-size: 13px;
    border: 1px solid #aaa;
    color: #999;
    cursor: text;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
    -webkit-transition: border-color 0.2s ease, color 0.4s ease;
}
.ui-gdatepicker-input:focus {
    outline: none;
}
.ui-gdatepicker-input:hover {
    border-color: #999;
}
.ui-gdatepicker-input.ui-gdatepicker-active {
    border-color: #E3585E;
}
.ui-gdatepicker-input.ui-gdatepicker-input-set {
    color: black;
}
.ui-gdatepicker {
    font-size: 11px;
    display: none;
    opacity: 0;
    position: absolute;
    padding: 20px;
    width: 290px;
    margin: 3px 0;
    font-family: Verdana, Geneva, Arial, sans-serif;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
    border: 1px solid #bbb;
    background: #fefefe;
}
.ui-gdatepicker.ui-gdatepicker-show {
    display: block;
    opacity: 1;
}
.ui-gdatepicker .ui-gdatepicker-wrapper {
    margin: auto;
    position: relative;
}
.ui-gdatepicker .ui-gdatepicker-body {
    max-height: 265px;
    overflow: hidden;
    width: auto;
}
.ui-gdatepicker .ui-gdatepicker-scroll-arrow, .ui-gdatepicker .ui-gdatepicker-scroll-arrow-year {
    position: absolute;
    width: 80px;
    left: 170px;
    background: #fff;
    opacity: 0.2;
    height: 24px;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
}
.ui-gdatepicker .ui-gdatepicker-scroll-arrow:hover, .ui-gdatepicker .ui-gdatepicker-scroll-arrow-year:hover {
    opacity: 1;
}
.ui-gdatepicker .ui-gdatepicker-scroll-arrow-year {
    width: 30px;
    left: 252px;
}
.ui-gdatepicker .ui-gdatepicker-scroll-arrow-up,...

JavaScript

/*! jQuery UI - v1.10.3 - 2013-05-03
 * http://jqueryui.com
 * Includes: jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.draggable.js, jquery.ui.droppable.js, jquery.ui.resizable.js, jquery.ui.selectable.js, jquery.ui.sortable.js, jquery.ui.effect.js, jquery.ui.accordion.js, jquery.ui.autocomplete.js, jquery.ui.button.js, jquery.ui.datepicker.js, jquery.ui.dialog.js, jquery.ui.effect-blind.js, jquery.ui.effect-bounce.js, jquery.ui.effect-clip.js, jquery.ui.effect-drop.js, jquery.ui.effect-explode.js, jquery.ui.effect-fade.js, jquery.ui.effect-fold.js, jquery.ui.effect-highlight.js, jquery.ui.effect-pulsate.js, jquery.ui.effect-scale.js, jquery.ui.effect-shake.js, jquery.ui.effect-slide.js, jquery.ui.effect-transfer.js, jquery.ui.menu.js, jquery.ui.position.js, jquery.ui.progressbar.js, jquery.ui.slider.js, jquery.ui.spinner.js, jquery.ui.tabs.js, jquery.ui.tooltip.js
 * Copyright 2013 jQuery Foundation and other contributors; Licensed MIT */ (function (t, e) {
    function i(e, i) {
        var n, o, a, r = e.nodeName.toLowerCase();
        return "area" === r ? (n = e.parentNode, o = n.name, e.href && o && "map" === n.nodeName.toLowerCase() ? (a = t("img[usemap=#" + o + "]")[0], !! a && s(a)) : !1) : (/input|select|textarea|button|object/.test(r) ? !e.disabled : "a" === r ? e.href || i : i) && s(e)
    }
    function s(e) {
        return t.expr.filters.visible(e) && !t(e).parents().addBack().filter(function () {
            return "hidden" === t.css(this, "visibility")
        }).length
    }
    var n = 0,
        o = /^ui-id-\d+$/;
    t.ui = t.ui || {}, t.extend(t.ui, {
        version: "1.10.3",
        keyCode: {
            BACKSPACE: 8,
            COMMA: 188,
            DELETE: 46,
            DOWN: 40,
            END: 35,
            ENTER: 13,
            ESCAPE: 27,
            HOME: 36,
            LEFT: 37,
            NUMPAD_ADD: 107,
            NUMPAD_DECIMAL: 110,
            NUMPAD_DIVIDE: 111,
            NUMPAD_ENTER:...