问题
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