ボタンに表示されているHiddenFieldにスタイルを適用する方法

Question

私は、クリックするとjquery-uiのdatepickerがポップアップするボタンがあります。これは完全に動作し、正しく配置され、楽しいものです。カレンダーは特定の目的には使用されません。人々がカレンダーを参照する必要がある場合は、参照するためだけに使用します。問題は、グリフコンカレンダーを「カレンダー」という単語の左にあるボタンに配置したいのです（その間に1つまたは2つのスペースを入れて）、そのボタンのスタイルを隣のボタンに一致させたいid = "headerbutton"）。これを実装するためにCSSやhtmlで何かを行うと、私のボタンは消えるだけです！どんな助けでも大歓迎です。

$("#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"> 
 
    <a href="#">Assigned Tasks</a> 
 
    </button> 
 
    <!-- Calendar Button - DO NOT MESS WITH THIS --> 
 
    <input type="input" id="hiddenField" class="datepicker" /> 
 
</div>

Answer 1

私は私が望んで行うには、このボタンを取得し、一日の大半を過ごし、そして最終的に二つの異なるポストの間、それを発見しました。アイコンの追加

はここに覆われていた： class for jquery ui datepicker button

そしてそれは、それまでのすべての行、動作し、右に見えるだけでなく、：ボタンに正常にCSSを追加 Referencing a Bootstrap icon within jQuery datepicker buttonImage attribute?

はここから来ました！このコミュニティは大好きですが、ここには大変です！

$("#hiddenField").datepicker({ 
 
showOn: "button", 
 
buttonText: '<i class="glyphicon glyphicon-calendar"></i>&nbsp;&nbsp;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 --> \t 
 
<div class="col-md-4 col-sm-4 col-xs-5" style="text-align: right; margin-top: 20px;"> 
 
<button type="button" id="headerbutton"> 
 
<a href="#">Assigned Tasks</a> 
 
</button> \t 
 
<!-- Calendar Button - DO NOT MESS WITH THIS --> 
 
<input type="input" id="hiddenField" class="datepicker" /> 
 
</div>