Igx-calendar ui用于角度

本文介绍了Igx-calendar ui用于角度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I have a form which contain a calendar allowing users to select a specific date ,

以下是表格:about.component.html

Here is the form :about.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>

这是about.component.ts

here is about.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() {

  }

}

日历应该看起来像这样

The calendar shiuld look something like this

我希望禁用日历中的过去日期，您可以假定服务器将提供禁止的"日期列表.您可能会建议使用Json格式和数据结构.

I want past dates in calendar to be disabled, You may assume that the list of "forbidden" days will be supplied by the server. You may suggest Json format and the data structure.

还突出显示了已满的日期，例如2018年7月19日已满，因此用户无法预订重新预订.

Also highlight dates that are full booked eg 19 july 2018 is full so user cant be able to book the resevertion.

注意:正在使用此日历: igx-日历

Note: am using this calendar : igx-calendar

可以帮我一下吗?只是在学习

Can some please help me out? am just learning

Calendar

Igx-calendar ui用于角度

问题描述

推荐答案