Igx-calendar ui for angular

天涯浪子 提交于 2019-12-13 08:19:16

问题


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

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>

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

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.

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

Note: am using this calendar : igx-calendar

Can some please help me out? am just learning


回答1:


Hey @Kaczka pojebana I dont know whether this date picker accept directive min or not.

Otherwise you can use:

HTML:

<input type="date"  [min] = "minDate" fromControlName="date">

TS:

minDate: any= new Date();


来源:https://stackoverflow.com/questions/51223435/igx-calendar-ui-for-angular

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!