Javascript Igx日历用户界面的角度

我有一个包含日历的表单，允许用户选择特定日期

表格如下： 关于.component.html

 <form [formGroup]="angForm" class="form-element">
      <div class="col-sm-4 offset-sm-2 about-booking_calendar">
        <div class="form-group form-element_date">
<igx-calendar [value]="date"></igx-calendar>
        </div>
      </div>
      <div class="col-sm-4 about-booking_form">
        <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 (change)="changeSelect(cityName.value)" formControlName='city'>
                    <option selected *ngFor="let city of cities" [ngValue]="city.cityName">{{city.cityName}}</option>

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

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

电子邮件是必需的。
{{city.cityName}
{{hotel.hotelName}}
书

这里是关于.component.ts的

import { Component, OnInit } from '@angular/core';
import { MoviesService } from '../movies.service';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { FlashMessagesService } from 'angular2-flash-messages';
@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.scss']
})
export class AboutComponent implements OnInit {
  comments: {};
  addcomments: Comment[];
  angForm: FormGroup;
  // tslint:disable-next-line:max-line-length
  validEmail = false;

  cities = [
    {
      cityName: 'Berlin',
    },
    {
      cityName: 'Oslo',

    },
    {
      cityName: 'Warsaw',

    },
    {
      cityName: 'Paris',

    }

  ];

  hotels: Array<any> = [
    {
      cityName: 'Oslo',
      hotelName: 'Sheraton Hotel',

    },
    {
      cityName: 'Berlin',
      hotelName: 'grand hotel',

    },
    {
      cityName: 'Warsaw',
      hotelName: 'Hiltom hotel',

    },
    {
      cityName: 'Paris',
      hotelName: 'Africanskiej hotel',

    },
  ];
  public date: Date = new Date(Date.now());
  constructor(private flashMessages: FlashMessagesService,
    private fb: FormBuilder,
    private activeRouter: ActivatedRoute,
    private moviesService: MoviesService) {
    this.comments = [];
    this.createForm();
  }
  onChange(newValue) {
    // tslint:disable-next-line:max-line-length
    const validEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (validEmail.test(newValue)) {
      this.validEmail = true;
    } else {
      this.validEmail = false;
    }

  }

  createForm() {
    this.angForm = this.fb.group({
      email: new FormControl('', [Validators.required, Validators.email]),
      date: new FormControl(''), // this line missing in your code
      city: this.cities[0].cityName,
      hotel: null
    });
  }
  changeSelect(event) {
    const ret = this.hotels.find(data => data.cityName.toString() === event.split(': ')[1].toString());
    this.angForm.get('hotel').setValue(ret.hotelName);
  }


  addReview(date, email, cityName, hotelName) {
    this.moviesService.addReview(date, email, cityName, hotelName).subscribe(() => {
      this.flashMessages.show('You are data we succesfully submitted', { cssClass: 'alert-success', timeout: 3000 });
      // get the id
      this.activeRouter.params.subscribe((params) => {
        // tslint:disable-next-line:prefer-const
        let id = params['id'];
        this.moviesService.getComments(id)
          .subscribe(comments => {
            console.log(comments);
            this.comments = comments;
          });
      });
    }, () => {
        this.flashMessages.show('Something went wrong', { cssClass: 'alert-danger', timeout: 3000 });
      });
  }
  ngOnInit() {

  }

}

从'@angular/core'导入{Component，OnInit}；
从“../movies.service”导入{MoviesService}；
从'@angular/forms'导入{FormGroup，FormBuilder，Validators，FormControl}；
从'@angular/router'导入{ActivatedRoute}；
从“angular2 flash messages”导入{FlashMessagesService}；
@组成部分({
选择器：“应用程序关于”，
templateUrl:'./about.component.html'，
样式URL:['./about.component.scss']
})
导出类AboutComponent在NIT上实现{
评论：{}；
addcomments:Comment[]；
angForm:FormGroup；
//tslint:禁用下一行：最大行长度
validEmail=假；
城市=[
{
城市名称：“柏林”，
},
{
城市名称：“奥斯陆”，
},
{
城市名称：“华沙”，
},
{
城市名称：“巴黎”，
}
];
酒店：阵列

我希望日历中的过去日期被禁用，您可以假设“禁止”日期列表将由服务器提供。您可以建议Json格式和数据结构

另外，请突出显示预订已满的日期，例如2018年7月19日已满，因此用户无法预订预订预订

注意：我正在使用此日历：

我只是在学习
嘿@Kaczka pojebana我不知道这个日期选择者是否接受min指令

否则，您可以使用：

HTML:

你的问题是什么？现在，看起来你正在找人为你做这项工作。嘿，我在他们的页面中没有看到任何mindate功能这里是你可以检查的链接，但那不起作用：使用p-calendar这是正确的答案我会接受你的回答检查此线程：
<input type="date"  [min] = "minDate" fromControlName="date">

minDate: any= new Date();