/
single-datepicker.component.html
48 lines (43 loc) · 1.35 KB
/
single-datepicker.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<mat-toolbar>Single datepicker with custom invalid date & custom class on date</mat-toolbar>
<div class="row">
<div class="col s6">
<input type="text"
ngxDaterangepickerMd
[isInvalidDate]="isInvalidDate"
[isCustomDate]="isCustomDate"
[locale]="{format: 'DD/MM/YYYY', firstDay: 1}"
[(ngModel)]="selected" [singleDatePicker]="true" [autoApply]="true" class="form-control"/>
</div>
</div>
<div class="row">
<div class="col s6">
<b>Html code:</b>
<pre class="prettyprint"><code class="html"><input type="text"
ngxDaterangepickerMd
[isInvalidDate]="isInvalidDate"
[isCustomDate]="isCustomDate"
[locale]="{{ '{' }}format: 'DD/MM/YYYY', firstDay: 1}"
[(ngModel)]="selected"
[singleDatePicker]="true"
[autoApply]="true"/></code>
</pre>
</div>
<div class="col s6">
<b>Typescript code:</b>
<pre class="prettyprint"><code class="javascript">export class SingleDatepickerComponent {{ '{' }}
selected: any;
constructor() {{ '{' }}
this.alwaysShowCalendars = true;
}
isInvalidDate(date) {{ '{' }}
return date.weekday() === 0;
}
isCustomDate(date) {{ '{' }}
return (
date.weekday() === 0 ||
date.weekday() === 6
) ? 'mycustomdate' : false;
}</code>
</pre>
</div>
</div>