Twitter Bootstrap + datepicker + 在屏幕中显示日历答案

【问题标题】：Twitter Bootstrap + datepicker + display the calendar in the screenTwitter Bootstrap + datepicker + 在屏幕中显示日历
【发布时间】：2013-04-22 17:19:32
【问题描述】：

我正在使用 Twitter Bootstrap Datepicker，我希望始终在屏幕上显示日历，如下例所示。

有人知道怎么做吗？

谢谢！

【问题讨论】：

查看生成的代码，并对其应用 CSS。提供的 CSS 文件 (calendar.css) 设置了很多规则，其余的（例如 display:none）在 JavaScript 中设置。使用“检查元素”查看样式的来源，并适当地更正/覆盖它们。
看这里stackoverflow.com/a/16902808/975520

标签： jquery twitter-bootstrap calendar datepicker

【解决方案1】：

您可以使用 bootstrap-calendar 插件并使用其简单的 css 对其进行样式设置以满足您的需求。

项目网站和文档：https://github.com/ahmontero/bootstrap-calendar

演示页面：http://ahmontero.github.io/bootstrap-calendar/

【讨论】：

【解决方案2】：

您创建一个隐藏的输入字段，在该输入字段上调用 datepicker，在 datepicker 上调用 show 操作，然后添加一点 CSS 来隐藏 datepicker div 顶部的白色小箭头。

<script>
  $(function() {
     $("#foo").datepicker();
     $("#foo").datepicker("show");
  });
</script>

<style>
  #foo {
    display:none;
  }
  .datepicker:before, .datepicker:after {
    display: none;
  }
</style>

<input id="foo"/>

JS Fiddle here.

【讨论】：