Как построить средство выбора даты в Angular с помощью кнопки (пример изображения)

Question

Итак, я пытаюсь построить средство выбора даты в угловом формате, но я не достигаю того, что притворяюсь.

Я использую средство выбора даты в угловом материале по умолчанию, которое выглядит следующим образом:

Но эстетически это не то, чего я хочу достичь.

Вот образ того, чего я хочу:

Как я могу сделать что-то подобное?Все вместе?

Заранее спасибо.

С наилучшими пожеланиями!

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

Проверьте этоstackblitz

Answer 2

просто красота

  <input  [matDatepicker]="picker" placeholder="Choose a date">
  <button (click)="picker.open()">click<button>
  <mat-datepicker #picker ></mat-datepicker>

Answer 3

Существует более одного вида для ввода в угловой материал.

Это может соответствовать:

<mat-form-field appearance="outline">
   <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker" placeholder="Date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>