Html/CSS（仅限）日期选择器答案

【问题标题】：Html/CSS (Only) DatePickerHtml/CSS（仅限）日期选择器
【发布时间】：2018-10-27 06:36:10
【问题描述】：

有什么好的 DatePickers 使用 Bootstrap 或 HTMl/CSS 构建我已经在使用这个https://ng-bootstrap.github.io/#/components/datepicker/examples 但它不适合我

【问题讨论】：

向我们展示你到目前为止的尝试
我在前端使用 angular、html/css 和 bootstrap ”已经尝试了 angular 和 bootstrap 的不同日期选择器库，正如我上面提到的一个链接，我使用它的工作正常但样式不正确，这是因为我没有包含引导 cdn，但是当我做整个应用程序样式时会中断
but its not working out for me 那是我要求您显示代码的原因，它无助于找到其他东西显示您的问题和您的问题，我们会尽力帮助您解决问题
控制台没有错误，正如我之前所说，如果我包含引导库，整个应用程序样式会因 css 冲突而中断。请告诉我是否有任何仅包含 datepicker 的好方法使用 html 和 css

标签： css html angular ng-bootstrap

【解决方案1】：

<div class="input-group-btn">
        <button type="button"  (click)="isCollapsed = !isCollapsed" class="btn btn-default dropdown-toggle selector calendarSelector"
          style="margin-left:-1" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
          <span class="glyphicon glyphicon-calendar calendarIcon"></span>
          <span class="glyphicon glyphicon-menu-down"></span>
        </button>
        <div id="collapseExample" [ngbCollapse]="isCollapsed"  class="dropdown-menu ">
          <ngb-datepicker  #d1 style="padding:30px; font-size: 11px !important;border:none;line-height: 1px;
          letter-spacing: 1px;" (click)='searchArticleByDate();isCollapsed = !isCollapsed ' [(ngModel)]="model1" name="something" #c1="ngModel"></ngb-datepicker>
        </div>


      </div>

【讨论】：

【解决方案2】：

有这个：

<input type="date" />

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

【讨论】：

【解决方案3】：

对于 Jquery 使用 jquery ui Datepicker：

https://jqueryui.com/datepicker/

对于 Angularjs，使用 Bootstrap ui 日期选择器：

https://angular-ui.github.io/bootstrap/#!#datepicker

【讨论】：