Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
<br>
<div>Selected Date: {{date.toDateString()}}</div>
<button>Disable Wednesday</button>
`,
styles: [
`
button {
margin-top: 1rem;
}
`
]
})
export class CalendarSingleExampleComponent {
date = FdDate.getToday();
myDisableFunction = function (d: FdDate): boolean {
const day = d.getDay();
return day === 6 || day === 7;
};
// Block days before/after any day
myBlockFunction = function (d: FdDate): boolean {
const firstDay = FdDate.getToday();
const lastDay = new FdDate(firstDay.year, firstDay.month, firstDay.day + 7);
return d.getTimeStamp() > firstDay.getTimeStamp() && d.getTimeStamp() < lastDay.getTimeStamp();
};
disableWednesday() {
this.myDisableFunction = function (d: FdDate): boolean {
const day = d.getDay();import { Component } from '@angular/core';
import { FdDate } from '@fundamental-ngx/core';
@Component({
selector: 'fd-date-picker-disabled-example',
template: `
<br>
<div>Selected Date: {{date ? date.toDateString() : 'null'}}</div>`
})
export class DatePickerDisabledExampleComponent {
date = FdDate.getToday();
}Touched: {{customForm.controls.dates.touched}}<br>
Dirty: {{customForm.controls.dates.dirty}}<br>
Valid: {{customForm.controls.dates.valid}}<br>
Range Start Date: {{ customForm.controls.dates.value.start ? customForm.controls.dates.value.start.toDateString() : 'null' }}<br>
Range End Date: {{ customForm.controls.dates.value.end ? customForm.controls.dates.value.end.toDateString() : 'null' }}
`
})
export class DatePickerFormRangeExampleComponent {
customForm = new FormGroup({
dates: new FormControl({
start: FdDate.getToday(),
end: FdDate.getToday().nextDay()
})
});
}
Selected Date: {{ customForm.controls.date.value ? customForm.controls.date.value.toDateString() : 'null' }}
<div>
<br>
Touched: {{customForm.controls.disabledDate.touched}}<br>
Dirty: {{customForm.controls.disabledDate.dirty}}<br>
Valid: {{customForm.controls.disabledDate.valid}}<br>
Disabled: {{customForm.controls.disabledDate.disabled}} <br>
Selected Date: {{ customForm.controls.disabledDate.value ? customForm.controls.date.value.toDateString() : 'null' }}
</div>
`
})
export class DatePickerFormExampleComponent {
customForm = new FormGroup({
date: new FormControl(FdDate.getToday()),
disabledDate: new FormControl({ value: FdDate.getToday(), disabled: true })
});
}
import { Component } from '@angular/core';
import { FdDate } from '@fundamental-ngx/core';
@Component({
selector: 'fd-date-picker-position-example',
template: `
<br>
<div>Selected Date: {{date ? date.toDateString() : 'null'}}</div>`
})
export class DatePickerPositionExampleComponent {
date = FdDate.getToday();
}<div>Selected Last Date: {{selectedRange?.end?.toDateString()}}</div>
`,
providers: [
{
provide: DateFormatParser,
useClass: DateFormatDashes
}
]
})
export class DatePickerFormatExampleComponent {
date = FdDate.getToday();
selectedRange: FdRangeDate = {
start: FdDate.getToday(),
end: FdDate.getToday().nextDay()
};
}
Touched: {{customForm.controls.dates.touched}}<br>
Dirty: {{customForm.controls.dates.dirty}}<br>
Valid: {{customForm.controls.dates.valid}}<br>
Range Start Date: {{ customForm.controls.dates.value.start ? customForm.controls.dates.value.start.toDateString() : 'null' }}<br>
Range End Date: {{ customForm.controls.dates.value.end ? customForm.controls.dates.value.end.toDateString() : 'null' }}
`
})
export class DatePickerFormRangeExampleComponent {
customForm = new FormGroup({
dates: new FormControl({
start: FdDate.getToday(),
end: FdDate.getToday().nextDay()
})
});
}
import { Component } from '@angular/core';
import { FdDate } from '@fundamental-ngx/core';
@Component({
selector: 'fd-date-picker-allow-null-example',
template: `
<br>
<div>Selected Date: {{date ? date.toDateString() : 'null'}}</div>`
})
export class DatePickerAllowNullExampleComponent {
date = FdDate.getToday();
}provide: CalendarI18nLabels,
useClass: CustomI18nLabels
}
]
})
export class DatePickerI18nExampleComponent implements AfterViewInit {
selected: number = 3;
constructor(
private languageService: LanguageService,
private calendarI18n: CalendarI18n,
private calendarI18nLabels: CalendarI18nLabels
) {}
date = FdDate.getToday();
isSelected(language: string) {
switch (language) {
case 'fr': {
return this.selected === 1 ? 'selected' : '';
}
case 'de': {
return this.selected === 2 ? 'selected' : '';
}
case 'bg': {
return this.selected === 3 ? 'selected' : '';
}
}
}
setGerman() {<br>
<div>Selected Date: {{date.toDateString()}}</div>
<button>Next Day</button>
`,
styles: [
`
button {
margin-top: 1rem;
}
`
]
})
export class CalendarProgrammaticallyChangeExampleComponent {
date = FdDate.getToday();
public changeDay() {
this.date = this.date.nextDay();
}
}