-
Notifications
You must be signed in to change notification settings - Fork 125
/
date-picker-docs.component.html
50 lines (45 loc) · 2.66 KB
/
date-picker-docs.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
49
50
<h2>Simple Date Picker</h2>
<description>
You can use two-way data binding to select a date or range of dates on a calendar. Calendars internally utilize an interface called <code>CalendarDay</code>, which contains the property <code>date</code>.
To select a date you will create a new object that contains the property date, whose value is a native JavaScript Date object. Then, using two-way binding syntax, set the selectedDay value to your new object.
Note that selecting a day (or range of days) in this manner will override any block/disable functions.
</description>
<component-example [name]="'ex1'">
<fd-date-picker-single-example></fd-date-picker-single-example>
</component-example>
<code-example [code]="datePickerSingleJs" [language]="'typescript'"></code-example>
<separator></separator>
<h2>Range Date Picker</h2>
<description>Allows the selection of a range of dates. Only the first and last dates are passed back under ngModel.</description>
<component-example [name]="'ex2'">
<fd-date-picker-range-example></fd-date-picker-range-example>
</component-example>
<code-example [code]="datePickerRangeJs" [language]="'typescript'"></code-example>
<separator></separator>
<h2>Internationalization</h2>
<description>It is possible to internationalize both the aria labels and the month names/weekdays through providing a service.</description>
<component-example [name]="'ex3'">
<fd-datepicker-i18n-example></fd-datepicker-i18n-example>
</component-example>
<code-example [code]="datePickerI18NTs" [language]="'typescript'"></code-example>
<separator></separator>
<h2>Formatting</h2>
<description>Providing a custom format for the dates is possible through providing a service.</description>
<component-example [name]="'ex4'">
<fd-date-picker-format-example></fd-date-picker-format-example>
</component-example>
<code-example [code]="datePickerFormatTs" [language]="'typescript'"></code-example>
<separator></separator>
<h2>Null Validity</h2>
<description>Null input values are considered valid by default. Use <code>[allowNull]="false"</code> to make them invalid.</description>
<component-example [name]="'ex5'">
<fd-date-picker-allow-null-example></fd-date-picker-allow-null-example>
</component-example>
<code-example [code]="datePickerAllowNullTs" [language]="'typescript'"></code-example>
<separator></separator>
<h2>Position</h2>
<description>There is also added <code>[position]</code> attribute which allows us to decide where popup should be shown.</description>
<component-example name="'ex6'">
<fd-date-picker-position-example></fd-date-picker-position-example>
</component-example>
<code-example [code]="datePickerPositionTs" [language]="'typescript'"></code-example>