javascript - 如何使用按钮在 Angular 中构建日期选择器（示例图片）

Question

所以我正在尝试以角度构建一个日期选择器，但我没有实现我假装的目标。

我使用默认的角度材料日期选择器，如下所示：

但美学上不是我想要达到的。

这是我想要的图像：

我怎么能做这样的事情？都凑齐了？

先感谢您。

此致！

标签： javascripthtmlcssangularbootstrap-4

Answer 1

您想要实现的样式看起来类似于引导样式。如果您的项目中没有引导程序，那么获得样式并不难。

HTML

<div class="dp-group">
  <input class="dp-input" [matDatepicker]="picker" placeholder="YYYY-MM-DD">
  <button (click)="picker.open()" class="dp-button">
    <!-- Date Icon Here -->
    ico
  </button>
  <mat-datepicker #picker ></mat-datepicker>
</div>

CSS

.dp-input {
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  background: rgb(238, 238, 238);
  border: 1px solid #d1d1d1;
  border-radius: 3px 0px 0px 3px;
}

.dp-group {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.dp-button {
  cursor: pointer;
  margin-left: 0px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid #d1d1d1;
  border-left: 0px;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  box-shadow: 1px 1px 2px 0px #EEE;
  border-radius: 0px 3px 3px 0px;
}

检查这个堆栈闪电战