JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<script src="http://davidpaulhamilton.net/wp-content/plugins/orangebox/js/orangebox.min.js?ver=3.0.0"></script>
<link rel="stylesheet" href="http://davidpaulhamilton.net/wp-content/plugins/orangebox/css/orangebox.css">
<div class="widget__text-wrapp">
<div class="widget__contacts-info">
<div class="widget__info">
<span class="ob_calendar_icon"></span>
    <input type="text" id="cr-datepicker"/>

<span class="ob_time_icon"></span>
    <select id="cr-time">  
    <option value="12:00">12:00</option>
    <option value="12:30">12:30</option>
    <option value="13:00">13:00</option>
    <option value="13:30">13:30</option>
    <option value="14:00">14:00</option>
    <option value="14:30">14:30</option>
    <option value="15:00">15:00</option>
    <option value="15:30">15:30</option>
    <option value="16:00">16:00</option>
    <option value="16:30">16:30</option>
    <option value="17:00">17:00</option>
    <option value="17:30">17:30</option>
    <option value="18:00">18:00</option>
    <option value="18:30">18:30</option>
    <option value="19:00">19:00</option>
    <option value="19:30">19:30</option>
    <option value="20:00">20:00</option>
    <option value="20:30">20:30</option>
    <option value="21:00">21:00</option>
    <option value="21:30">21:30</option>
    <option value="22:00">22:00</option>
    <option value="22:30">22:30</option>
    <option value="23:00">23:00</option>
    <option value="23:30">23:30</option>
    <option value="00:00">00:00</option>        
   </select>
<span class="ob_person_icon"></span>
    <select id="cr-person">
    <option value="1 человек">1 человек</option>
    <option value="2 человека">2 человека</option>
    <option value="3 человека">3 человека</option>
    <option value="4 человека">4 человека</option>
    <option value="5 человека">5 человека</option>
    <option value="6 человека">6 человека</option>
    <option value="7 человека">7 человека</option>
    <option value="8 человека и более">8 человека и более</option>
  ...

CSS

#modals{display:none;}
#cr-time, #cr-datepicker, #cr-person {
    float: left;
    font-size: 18px;    
}
#cr-time, #cr-person{height: 29px;}
#cr-datepicker {
    height: 22px;
}
.widget__text-wrapp {
    background-color: #E5812C;
    border-radius: 3px;
    padding: 7px 15px;
}
.button {
    border-radius: 3px;
    display: inline-block;
    font-family: 'Oswald',sans-serif;
    font-size: 14px;
    padding: 7px 15px;
    text-decoration: none;
    text-transform: uppercase;
    color: #F9F1E1;
}

.widget__info span {
    background-image: url("http://topclub.ua/images/order/order_block_icons.png");
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 25px;
    margin: 2px 5px 0 0;
    opacity: 0.5;
    width: 25px;
}
span.ob_calendar_icon {
    background-position: 0 0;
}
span.ob_person_icon {
    background-position: 0 -67px;
    margin-left: 8px;
}
span.ob_time_icon {
    background-position: 0 -35px;
    margin-left: 10px;
}

JavaScript

$( "#cr-datepicker").datepicker();
$('#cr-datepicker-mod' ).datepicker();


$(".cr-submit").click(function(){
    var person = $('#cr-person').val();
    var time = $('#cr-time').val();
    var date = $('#cr-datepicker').val();
    alert(person +' '+ time + ' '+ date);
    $('#dp1385600949761').val(date);
    $("#cr-time-mod [value='"+ time +"']").attr("selected", "selected");
    $("#cr-person-mod [value='"+ person +"']").attr("selected", "selected");
});