JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/flick/jquery-ui.css">
<div class="car-datepicker"></div>
<div class="car-dialog">
    <div class="car-dialog_close"></div>
    <input type="hidden" id="date-today" />
    <button class="car-dialog_button" data-action="went-with" data-driver="cecilia">Åkt: Cecilia</button>
    <button class="car-dialog_button" data-action="went-with" data-driver="zoran">Åkt: Zoran</button>
    <div class="car-dialog_confirm_message"></div>
</div>

CSS

body {
    height: 100%;
    background: #efefef;
    font-family: arial;
}
.car-dialog_button {
    display: block;
    border: none;
    outline: 0;
    width: 100%;
    line-height: 40px;
    margin: 0 0 10px 0;
    cursor: pointer;
}
.car-dialog_confirm_message {
    display: none;
}
.success .car-dialog_confirm_message {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: aqua;
}
.selected-day {
    background: aqua !important;
}
/* datepicker start */
 .ui-datepicker {
    width: 98%;
    height: 98% !important;
    border-sizing: bordar-box;
}
.ui-widget-header {
    background: #ededed;
}
.ui-state-default {
    background: none !important;
}
/* datepicker end */

/* dialog start */
 .ui-dialog {
    width: 90% !important;
    height: 90% !important;
}
.ui-dialog-titlebar {
    background: #fff;
    border: none;
}
.car-dialog_close {
    display: none;
}
/* dialog end */

JavaScript

$.datepicker.regional['sv'] = {
    clearText: 'Rensa',
    clearStatus: '',
    closeText: 'Stäng',
    closeStatus: '',
    prevText: '&laquo;Förra',
    prevStatus: '',
    nextText: 'Nästa&raquo;',
    nextStatus: '',
    currentText: 'Idag',
    currentStatus: '',
    monthNames: ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni',
        'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'],
    monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun',
        'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
    monthStatus: '',
    yearStatus: '',
    weekHeader: 'Ve',
    weekStatus: '',
    dayNamesShort: ['Sön', 'Mån', 'Tis', 'Ons', 'Tor', 'Fre', 'Lör'],
    dayNames: ['Söndag', 'Måndag', 'Tisdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lördag'],
    dayNamesMin: ['Sö', 'Må', 'Ti', 'On', 'To', 'Fr', 'Lö'],
    dayStatus: 'DD',
    dateStatus: 'D, M d',
    dateFormat: 'yy-mm-dd',
    firstDay: 1,
    initStatus: '',
    isRTL: false
};
$.datepicker.setDefaults($.datepicker.regional['sv']);

$('.car-datepicker').datepicker({
    onSelect: function () {
        openDialog($(this));
    },
    beforeShowDay: function () {
        return [true, 'selected-day']
    }
});

$('.car-dialog').dialog({
    autoOpen: false,
    modal: true,
    close: function () {
        $(this).removeClass('success');
    }
});

$(document).on('click', '.car-dialog_button', function () {
    //do a post
    //get the date
    //get the action
    var day = $('#date-today').val();
    var action = $('[data-action]').data('action');
    var driver = $('[data-driver]').data('driver');
    var dialog = $('.car-dialog');

    //temp remove this
    dialog.addClass('success');
    return false;

    $.post('/Home/PostDay', {
        day: day,
        action: action,
        driver: driver
    }, function (data) {
        if (data !== undefined) {
            dialog.addClass('success');
        }
    });
});

function openDialog(selected) {
    var carDialog = $('.car-dialog');
...