Question

我有一个按钮，当点击时会弹出一个jquery-ui日期选择器。这非常有效，定位正确，以及所有有趣的东西。日历不用于任何特定的日期 - 当人们需要查看日历时，它仅供参考。问题是，我想把glyphicon日历放在单词＆＃34; Calendar＆＃34;左边的按钮上。（之间有一个或两个空格），我希望按钮的样式与其旁边的按钮相匹配（css id =＆＃34; headerbutton＆＃34;）。每当我通过css或html执行任何操作时，我的按钮就会消失！任何帮助将不胜感激。

＆＃13;

$("#hiddenField").datepicker({
  showOn: "button",
  buttonText: "Calendar"
});

＆＃13;

#headerbutton {
  padding: 5px;
  color: #ffffff;
  background: #2f4050;
  border-radius: 5px;
}

#headerbutton:hover {
  background: #586672;
}

#hiddenField {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 1

我一天大部分时间都在这个按钮上做了我想做的事情，最后在两个不同的帖子之间找到了它。

此处介绍了添加图标： Referencing a Bootstrap icon within jQuery datepicker buttonImage attribute?

将CSS成功添加到按钮来自此处： class for jquery ui datepicker button

它不仅有效，而且排列整齐，看起来正确！喜欢这个社区，但这里有很多！

＆＃13;

$( "#hiddenField" ).datepicker({
showOn: "button",
buttonText: '<i class="glyphicon glyphicon-calendar"></i>&nbsp;&nbsp;Calendar'
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

如何将样式应用于按钮上显示的HiddenField

1 个答案: