JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<div id="scheduler_date_validate">
    <div class="scheduler_date_validate_popup_class" style="display:none;">
        <div id="scheduler_date_validate_popup" style="position:relative; font-size:12px;color:#333333;">
            <div id="scheduler_date_validate_content"  style="overflow:hidden;padding-top:4px; padding-bottom:5px;">
                <div class="scrollContent">
                    <b>You are attempting to change this scheduled activity to an invalid date.<br/><br/>
                    Please check to confirm this does not conflict with other scheduled start and end times. Your date will be reset.</b>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

/*** Buttons **/
.bimodal-popup{
  display:none;
}

.green_btn_container, .grey_btn_container {
    font-family: Tahoma,Verdana,Arial !important;
    font-size: 11px;
    margin: 0;
    padding: 0;
    width: auto;
    cursor: pointer;
    
}

.green_btn_left, .grey_btn_left, .disabled_btn_left {
    display: block;
    width:16px;
    height:32px;
    float: left;
}
.green_btn_left {
    background: url(/core/images/btn_default_left.png) 0px -32px no-repeat;
}

.disabled_btn_left {
    background: url(/core/images/btn_default_left.png) 0px 0px no-repeat;
}
.grey_btn_left {
    background: url(/core/images/btn_gray_left.png) 0px -0px no-repeat;
}

.green_btn_center {
    display: inline-block;
    color: #FFFFFF !important;
    font-weight: bold;
    height:32px;
    line-height: 30px;
    float: left;
    padding: 0 10px;
    text-shadow: 0 -1px 0 #999999 !important;
    background: url(https://elements.brightidea.com/core/images/btn_default_center.png) 0px -32px repeat-x;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .green_btn_center {
    display: inline-block;
    color: #FFFFFF !important;
    font-weight: bold;
    height:32px;
    line-height: 32px!important;
    float: left;
    padding: 0 10px;
    text-shadow: 0 -1px 0 #999999 !important;
    background: url(https://elements.brightidea.com/core/images/btn_default_center.png) 0px -32px repeat-x;
  }
}

  .disabled_btn_center {
    display: inline-block;
    color: #919191 !important;
    font-weight: bold;
    line-height: 0px;
    float: left;
    padding: 16px 10px;
    background-position: 0px 0px;
    cursor: move!important;
  }

.disabled_btn_left{
    cursor: move!important;
}

.disabled_btn_right{
    cursor: move!important;
}
.disabled_btn_center {
    background: url(https://elements.brightidea.com/core/images/btn_default_center.png) 0px 0px repeat-x;
}
.grey_btn_center {
  display: block;
  color: #333333 !important;
  font-weight: normal;
  height:32px;
  line-height: 32px;
 ...

JavaScript

(function($){
    //fn to center elements
    $.fn.center = function (options) {
        var defaults = {
            location: 'center'
        }

        var o = $.extend(defaults, options);

        if (o.location == 'center') {
            this.css('position','absolute');
            this.css('top', (($(window).height() - this.outerHeight()) / 2) +
                                                        $(window).scrollTop() + 'px');
            this.css('left', (($(window).width() - this.outerWidth()) / 2) +
                                                        $(window).scrollLeft() + 'px');
        }

        if (o.location == 'top') {
            this.css('position','absolute');
            this.css('top', '0')
            this.css('left', (($(window).width() - this.outerWidth()) / 2) +
                                                        $(window).scrollLeft() + 'px');
        }
        return this;
    }
    //TODO: Essentially part of validation function, migrate with validate to new file so this can be used anywhere
    $.fn.placeholderText = function () {
        $('input').each(function(){
            if($(this).val()=="" && $(this).attr("placeholder")) {
                $(this).val($(this).attr("placeholder"));
                $(this).css('color','#969696');
                //$(this).css('font-size', '12px'); //part of spec but causes issues with form cross-browser for alignment of text in inputs/selects
                $(this).blur(function(){
                    if($(this).val()=="") {
                        $(this).val($(this).attr("placeholder"));
                        $(this).css('color','#969696');
                        //$(this).css('font-size', '12px'); //part of spec but causes issues with form cross-browser for alignment of text in inputs/selects
                    }
                });
                $(this).focus(function(){
                    if($(this).val()==$(this).attr("placeholder")) {
                       ...