How to apply Styles to a HiddenField Shown on a Button - html

Question

I have a button that when clicked pops up a jquery-ui datepicker. This works perfectly, is positioned correctly, and all that fun stuff. The calendar is not used for anything specific - it is just there for reference when people need to look at a calendar. The problem is, I want to put the glyphicon-calendar on the button to the left of the word "Calendar" (with one or two spaces between), and I want the style of the button to match the button next to it (css id="headerbutton"). Whenever I do anything through the css or html to implement this, my button just disappears! Any help would be much appreciated.
$("#hiddenField").datepicker({
showOn: "button",
buttonText: "Calendar"
});
#headerbutton {
padding: 5px;
color: #ffffff;
background: #2f4050;
border-radius: 5px;
}
#headerbutton:hover {
background: #586672;
}
#hiddenField {
display: none;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Buttons to Right in Lower Bar -->
<div class="col-md-4 col-sm-4 col-xs-5" style="text-align: right; margin-top: 20px;">
<button type="button" id="headerbutton">
Assigned Tasks
</button>
<!-- Calendar Button - DO NOT MESS WITH THIS -->
<input type="input" id="hiddenField" class="datepicker" />
</div>

Answer 1

I spent most of the day getting this button to do what I wanted, and finally found it, between two different posts.
Adding Icons was covered here:
Referencing a Bootstrap icon within jQuery datepicker buttonImage attribute?
Adding CSS successfully to the button came from here:
class for jquery ui datepicker button
And it not only works, it all lines up and looks right! Love this community, but there is SO MUCH here!
$( "#hiddenField" ).datepicker({
showOn: "button",
buttonText: '<i class="glyphicon glyphicon-calendar"></i> Calendar'
});
#headerbutton {
padding: 5px;
color: #ffffff;
background: #2f4050;
border-radius: 5px;
}
#headerbutton:hover {
background: #586672;
}
#hiddenField {
display: none;
}
.ui-datepicker-trigger{
padding: 5px 14px;
color: #ffffff;
background: #2f4050;
border-radius: 5px;
}
.ui-datepicker-trigger:hover{
background: #586672;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Buttons to Right in Lower Bar -->
<div class="col-md-4 col-sm-4 col-xs-5" style="text-align: right; margin-top: 20px;">
<button type="button" id="headerbutton">
Assigned Tasks
</button>
<!-- Calendar Button - DO NOT MESS WITH THIS -->
<input type="input" id="hiddenField" class="datepicker" />
</div>