如何将样式应用于按钮上显示的 HiddenField
How to apply Styles to a HiddenField Shown on a Button
我有一个按钮,单击它会弹出一个 jquery-ui 日期选择器。这完美地工作,正确定位,以及所有有趣的东西。日历不用于任何特定用途 - 它只是在人们需要查看日历时提供参考。问题是,我想把 glyphicon-calendar 放在单词 "Calendar" 左边的按钮上(中间有一个或两个空格),我希望按钮的样式与旁边的按钮匹配(css 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>
我花了一天的大部分时间让这个按钮做我想做的事,终于在两个不同的帖子之间找到了它。
此处介绍了添加图标:
Referencing a Bootstrap icon within jQuery datepicker buttonImage attribute?
成功添加CSS按钮来自这里:
class for jquery ui datepicker button
而且它不仅有效,而且全部排列整齐且看起来正确!喜欢这个社区,但这里有太多东西了!
$( "#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">
<a href="#">Assigned Tasks</a>
</button>
<!-- Calendar Button - DO NOT MESS WITH THIS -->
<input type="input" id="hiddenField" class="datepicker" />
</div>
我有一个按钮,单击它会弹出一个 jquery-ui 日期选择器。这完美地工作,正确定位,以及所有有趣的东西。日历不用于任何特定用途 - 它只是在人们需要查看日历时提供参考。问题是,我想把 glyphicon-calendar 放在单词 "Calendar" 左边的按钮上(中间有一个或两个空格),我希望按钮的样式与旁边的按钮匹配(css 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>
我花了一天的大部分时间让这个按钮做我想做的事,终于在两个不同的帖子之间找到了它。
此处介绍了添加图标: Referencing a Bootstrap icon within jQuery datepicker buttonImage attribute?
成功添加CSS按钮来自这里: class for jquery ui datepicker button
而且它不仅有效,而且全部排列整齐且看起来正确!喜欢这个社区,但这里有太多东西了!
$( "#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">
<a href="#">Assigned Tasks</a>
</button>
<!-- Calendar Button - DO NOT MESS WITH THIS -->
<input type="input" id="hiddenField" class="datepicker" />
</div>