javascript - 如何使用按钮在 Angular 中构建日期选择器(示例图像)

Question

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

我使用默认的 Angular Material 日期选择器，如下所示:

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

这是我想要的图像:

我怎样才能做出这样的东西？全部放在一起？

提前谢谢你。

最好的问候!

Answer 1

您想要实现的样式看起来与 Bootstrap 样式相似。如果您的元素中没有 bootstrap，那么获取样式并不难。

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

Check this stackblitz