JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker3.css">
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<div class="clearfix" id="problemcontainer">
<form class="myform" method="GET" action="servlet" class="navbar-form navbar-right">
    <div class="clearfix">
	<div id="dateFieldandCalendar">
		<div class="input-group date">
			<input id="datepicker" name="pickedDate" type="text" class="form-control" placeholder="mm/dd/yyyy"/>
			<span class="input-group-btn">
				<button class="btn btn-default" type="button" id="datebtn">
					<i class="glyphicon glyphicon-calendar"></i>
				</button>
			</span>
		</div>
	</div>
    </div>
	<button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i> Calculate Dates!</button> 
	<button type="reset" class="btn btn-warning"><i class="glyphicon glyphicon-remove"></i> Reset</button>
	<input id="month" name="monthHTML" value="" type="hidden"/>
	<input id="day" name="dayHTML" value="" type="hidden"/>
	<input id="year" name="yearHTML" value="" type="hidden"/>
	<input id="formID" name="formIDHTML" value="CaStateMSJID" type="hidden"/>
</form>
</div>

CSS

.myform {
	margin-top: 10px;
	text-align: center;
}

.input-group.date {
	margin:0 auto 10px;
    width: 150px;
}

JavaScript

$('#datepicker').datepicker({
			autoclose: true,
			todayHighlight: true
		})
							  .off('focus');
		$('#datebtn').click(function () {
			$('#datepicker').datepicker('show');
		});