Угловой 6 и бутстрап 4: сборщик даты - PullRequest
Новая
       43

Угловой 6 и бутстрап 4: сборщик даты

0 голосов
/ 05 июля 2018

У меня есть форма, которая содержит указатель даты / календарь, адрес электронной почты, название города и название отеля. Я хочу, чтобы пользователь выбрал дату, ввел другие поля и отправил данные.

Это то, что у меня есть.

HTML: 

 <form [formGroup]="angForm" class="form-element">
        <div class="form-group">
          <label for="dateOfBirth">Date of Birth</label>
          <input id="dateOfBirth" name="dateOfBirth" [(ngModel)]="dateOfBirth" type="text" bsDatepicker class="form-control" />
        </div>

        <div class="form-group form-element_email">
          <input type="email" class="form-control info" placeholder="Email" formControlName="email" #email (ngModelChange)="onChange($event)">
        </div>
        <div *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)"
          class="alert alert-danger">
          <div *ngIf="angForm.controls['email'].errors.required">
            Email is required.
          </div>
        </div>
        <div class="input-group mb-3 form-element_city">
          <select class="custom-select" id="inputGroupSelect01" #cityName>
            <option selected *ngFor="let city of cities" [ngValue]="city.name">{{city.name}}</option>

          </select>
        </div>
        <div class="input-group mb-3 form-element_hotel">
          <select class="custom-select" id="inputGroupSelect01" #hotelName>
            <option selected *ngFor="let hotel of hotels" [ngValue]="hotel.name">{{hotel.name}}</option>

          </select>
        </div>
        <div class="form-group">
          <button type="submit" (click)="addReview(email.value, cityName.value , hotelName.value)" class="btn btn-primary btn-block form-element_btn"
            [disabled]="!validEmail">Book</button>
        </div>
      </form>

Это выводит следующий результат: неверный

enter image description here

Вместо того, чтобы вводить с помощью выбора даты, я просто хочу, чтобы полный каландр отображался на левой стороне,

Вот что я хочу. Хороший

enter image description here

Я пробовал много решений онлайн, но не смог решить свою проблему,

Что мне нужно изменить в моем коде, чтобы получить желаемый результат? пожалуйста, новичок, хотя, спасибо

1 Ответ

0 голосов
/ 13 июля 2018

Вы можете указать placement в элементе, который использует директиву bdDatepicker. Просто установите для этого свойства placement значение left. Вот пример в документации. https://valor -software.com / NGX-самозагрузки / # / # DatePicker размещение

...