JSFiddle - React, Tailwind, and code Playground

by gdanko

HTML

<html>
<head></head>
<body>
    <label for="start_date">Start: </label>
    <button style="padding:0px 5px 0px 5px" type="button" id="start_date" title="Show Calendar">Start</button>
    
    <label for="end_date">End: </label>
    <button style="padding:0px 5px 0px 5px" type="button" id="end_date" title="Show Calendar">End</button>
</body>

JavaScript

YUI({
    gallery: 'gallery-2012.05.16-20-37'
}).use('node', 'gallery-popup-calendar', function (Y) { 
    var start_calendar, start_dialog, end_calendar, end_dialog;
    Y.PopupCalendar.prototype._bindEvents = function() {
        Y.log('_bindEvents', 'info', this.name);

        var input = this.get('input');

        if (input.get('type') === 'text') {
            input.on('focus', this.showCalendar, this);
        } else {
            input.on('click', this.showCalendar, this);
        }

        input.on('keydown', this.testKey, this);
        this.on('selectionChange', this._emitDate, this);
        this.after('autoFocusOnFieldFocusChange', this.setHideOn, this);
    },
        
    create_cal('start_date', 'start_cal', start_calendar, start_dialog, 'start');
    create_cal('end_date', 'end_cal', end_calendar, end_dialog, 'end');
    
    function create_cal(btn_id, span_id, calendar, dialog, prefix) {
        var button = Y.one('#' + btn_id);
        
        button.on('click', function() {
            if(!calendar) {
                calendar = new Y.PopupCalendar({
                    input: button,
                    width: '250px',
                    date: new Date(),
                });
            }
        });
    }    
});