JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<p>
    <label for="date_mm">Date</label>
    <input id="date_mm" class="small_inp" placeholder="MM" min="1" max="12" type="number" required /> / <input id="date_dd" class="small_inp" placeholder="DD"  min="1" type="number" required /> / <span class="date_year">2014</span>
</p>
<p>
    <div>
        <label for="time_hh">Start Time</label>
        <input id="start_time_hh" class="small_inp" placeholder="HH" max="12" min="1" type="number" required /> : <input id="start_time_mm" class="small_inp" placeholder="MM" max="59" min="0" type="number" required /> 
        <div class="am_pm">
            <div class="btn-group">
                <div type="button" class="btn btn-default"> 
                    <span class="start_meridian time_am_pm">AM</span>
                </div>
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
                    <span class="caret"></span>
                </button>
                <div class="dropdown-menu merid">
                    <div>AM</div>
                    <div>PM</div>
                </div>
            </div>
        </div>
    </div>
</p>
<p>
    <div>
        <label for="venue_end_time">End Time</label>
        <input id="end_time_hh" class="small_inp" placeholder="HH" max="12" min="1" type="number" required /> : <input id="end_time_mm" class="small_inp" placeholder="MM" max="59" min="0" type="number" required />
        <div class="am_pm">
            <div class="btn-group">
                <div type="button" class="btn btn-default"> 
                    <span class="end_meridian time_am_pm">AM</span>
                </div>
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
                    <span class="caret"></span>
          ...

SCSS

.venue_box p {
	width: 100%;
	height: auto;
}
.venue_box p label {
	width: 100%;
	height: auto;
}
.default_input {
	width: 100%;
	height: 40px;
	border-radius: 5px;
	text-indent: 10px;
	outline: none;
}
.pac-container {
	border:1px solid #000;
}
.pac-container:after{
	content:none !important;
}
.pac-item {
	border-bottom: 1px solid #000;
	padding: 10px 10px;
	&:nth-child(n+4) {
		display: none;
	}
	&:nth-child(3) {
		border-bottom: none;
	}
	&:hover {
		background-color: rgba(0,0,0,0.2);
		cursor: pointer;
	}
}
.pac-icon {
	display: none;
}
#map_canvas {
	display: block;
	position: absolute;
	margin: 0 auto;
	width : 80%; 	/* map width */
	height: 180px;	/* map height */
	border: 1px solid #000;
	opacity: 0;
	pointer-events: none;
	transition: all .2s ease-in;
}
.gmnoprint a, .gmnoprint span {
	display: none;
}
.gmnoprint div {
	background: none !important;
}
#GMapsID div div a div img{
	display: none;
}
.gm-style div:nth-child(2) {
	display: none;
}

.small_inp {
	display: inline-block;
	max-width: 50px;
	height: 40px;
	border-radius: 10px;
	border: 1px solid #ccc;
	background-color: rgba(0,0,0, 0.1);
	outline: none;
	text-align: center;
	margin:0 5px;
	&:first-of-type {
		margin-left: 0;
	}
}
.am_pm {
	display: inline-block;
}
label{
	display: block;
}
.dropdown-menu {
	min-width: inherit;
	padding: 5px 5px;
	left: 8px;
	div {
		margin: 2px 0px;
		cursor: pointer;
		padding: 0px 15px;
		border-radius: 3px;
		&:hover {
			background-color: rgba(0,0,0,0.2);
		}
	}

}
input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

JavaScript

function checkDate(){
	var venue_month = $('#date_mm').val(),
		venue_day = $('#date_dd').val(),
		venue_year = 2014,

		venue_start_h = $('#start_time_hh').val(),
		venue_start_m = $('#start_time_mm').val(),
		start_merid = $('.start_meridian').text(),

		venue_end_h = $('#end_time_hh').val(),
		venue_end_m = $('#end_time_mm').val(),
		end_merid = $('.end_meridian').text();

	var maxDays = new Date(venue_year, venue_month, 1, -1).getDate();

    var start_time = new Date(venue_month + '/' + venue_day + '/' + venue_year + ' ' + venue_start_h + ':' + venue_start_m + ' ' + start_merid).getTime();
	var end_time = new Date(venue_month + '/' + venue_day + '/' + venue_year + ' ' + venue_end_h + ':' + venue_end_m + ' ' + end_merid).getTime();

	if( start_time >= end_time ){
		console.log('Error');
	}else{
		console.log('Success');
	}
}

$(document).ready(function(){
    $('.merid div').on('click', function(){
		var val = $(this).text();
		$(this).parent().parent().find('.time_am_pm').html(val);
	});

	$('#end_time_mm').focusout(function(){
		if($(this).val().length > 0 ){
			checkDate();
		}
	});
});