Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5ce8484

Browse files
feat: Added start,end,min,max date to demo
1 parent 29b0d4d commit 5ce8484

File tree

3 files changed

+105
-32
lines changed

3 files changed

+105
-32
lines changed

‎src/app/app.component.html‎

Lines changed: 39 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -94,28 +94,51 @@ <h4 class="font-weight-bold mb-0">Theming</h4>
9494
<h3>Configuration Options Generator</h3>
9595
<form>
9696
<div class="form-group">
97-
<label class="label font-weight-bold control-label mr-3" for="weekStartsOn">Week Starts On</label>
97+
<label class="label control-label" for="background">Start Date</label>
98+
<daterangepicker [options]="startDateConfigDatePickerOptions"
99+
(rangeSelected)="optionChanged('startDate', $event)">
100+
</daterangepicker>
101+
</div>
102+
<div class="form-group">
103+
<label class="label control-label" for="background">
104+
End Date
105+
</label>
106+
<daterangepicker [options]="endDateConfigDatePickerOptions" (rangeSelected)="optionChanged('endDate', $event)">
107+
</daterangepicker>
108+
</div>
109+
<div class="form-group">
110+
<label class="label control-label" for="background">Min Date</label>
111+
<daterangepicker [options]="minDateConfigDatePickerOptions" (rangeSelected)="optionChanged('minDate', $event)">
112+
</daterangepicker>
113+
</div>
114+
<div class="form-group">
115+
<label class="label control-label" for="background">Max Date</label>
116+
<daterangepicker [options]="maxDateConfigDatePickerOptions" (rangeSelected)="optionChanged('maxDate', $event)">
117+
</daterangepicker>
118+
</div>
119+
<div class="form-group">
120+
<label class="label control-label mr-3" for="weekStartsOn">Week Starts On</label>
98121
<input type="number" class="form-control" name="weekStartsOn" [(ngModel)]=daterangepickerOptions.weekStartsOn
99122
id="weekStartsOn">
100123
</div>
101124
<div class="form-group">
102-
<label class="label font-weight-bold control-label mr-3" for="placeholder">Placeholder</label>
125+
<label class="label control-label mr-3" for="placeholder">Placeholder</label>
103126
<input type="text" class="form-control" name="placeholder" [(ngModel)]=daterangepickerOptions.placeholder
104127
id="placeholder">
105128
</div>
106129
<div class="form-group">
107130
<input type="checkbox" name="singleCalendar" [(ngModel)]=daterangepickerOptions.singleCalendar
108131
id="singleCalendar">
109-
<label class="label font-weight-bold control-label" for="singleCalendar">Single Calendar</label>
132+
<label class="label control-label" for="singleCalendar">Single Calendar</label>
110133
</div>
111134
<div class="form-group">
112135
<input type="checkbox" name="hideControls" [(ngModel)]=daterangepickerOptions.hideControls id="hideControls">
113-
<label class="label font-weight-bold control-label" for="hideControls">Hide Controls</label>
136+
<label class="label control-label" for="hideControls">Hide Controls</label>
114137
</div>
115138
<div class="form-group">
116139
<input type="checkbox" name="addTouchSupport" [(ngModel)]=daterangepickerOptions.addTouchSupport
117140
id="addTouchSupport">
118-
<label class="label font-weight-bold control-label" for="addTouchSupport">
141+
<label class="label control-label" for="addTouchSupport">
119142
Add touch support * <small>WIP</small>
120143
</label>
121144
<p>
@@ -131,44 +154,44 @@ <h3>Configuration Options Generator</h3>
131154
</div>
132155
<div class="form-group">
133156
<input type="checkbox" name="autoApply" [(ngModel)]=daterangepickerOptions.autoApply id="autoApply">
134-
<label class="label font-weight-bold control-label" for="autoApply">Auto Apply</label>
157+
<label class="label control-label" for="autoApply">Auto Apply</label>
135158
</div>
136159
<div class="form-group">
137160
<input type="checkbox" name="inactiveBeforeStart" [(ngModel)]=daterangepickerOptions.inactiveBeforeStart
138161
id="inactiveBeforeStart">
139-
<label class="label font-weight-bold control-label" for="inactiveBeforeStart">Inactive Before Start</label>
162+
<label class="label control-label" for="inactiveBeforeStart">Inactive Before Start</label>
140163
</div>
141164
<div class="form-group">
142165
<input type="checkbox" name="disableBeforeStart" [(ngModel)]=daterangepickerOptions.disableBeforeStart
143166
id="disableBeforeStart">
144-
<label class="label font-weight-bold control-label" for="disableBeforeStart">Disable Before Start</label>
167+
<label class="label control-label" for="disableBeforeStart">Disable Before Start</label>
145168
</div>
146169
<div class="form-group">
147170
<input type="checkbox" name="readOnly" [(ngModel)]=daterangepickerOptions.readOnly id="readOnly">
148-
<label class="label font-weight-bold control-label" for="readOnly">Read Only</label>
171+
<label class="label control-label" for="readOnly">Read Only</label>
149172
</div>
150173
<div class="form-group">
151174
<input type="checkbox" name="disabled" [(ngModel)]=daterangepickerOptions.disabled id="disabled">
152-
<label class="label font-weight-bold control-label" for="disabled">Disabled</label>
175+
<label class="label control-label" for="disabled">Disabled</label>
153176
</div>
154177
<div class="form-group">
155178
<input type="checkbox" name="showRanges" [(ngModel)]="daterangepickerOptions.showRanges" id="showRanges">
156-
<label class="label font-weight-bold control-label" for="showRanges">Show Ranges</label>
179+
<label class="label control-label" for="showRanges">Show Ranges</label>
157180
</div>
158181
<div class="form-group">
159-
<input type="checkbox" name="noDefaultRangeSelected" [(ngModel)]="daterangepickerOptions.noDefaultRangeSelected"
160-
id="noDefaultRangeSelected">
161-
<label class="label font-weight-bold control-label" for="noDefaultRangeSelected">No Default Range
182+
<input type="checkbox" name="noDefaultRangeSelected" (click)="optionChanged('noDefaultRangeSelected', $event)"
183+
[ngModel]="daterangepickerOptions.noDefaultRangeSelected" id="noDefaultRangeSelected">
184+
<label class="label control-label" for="noDefaultRangeSelected">No Default Range
162185
Selected</label>
163186
</div>
164187
<div class="form-group">
165188
<input type="checkbox" name="timepicker" [ngModel]="isTimePickerEnabled" (change)="setTimePicker($event)"
166189
id="timepicker">
167-
<label class="label font-weight-bold control-label" for="timepicker">TimePicker</label>
190+
<label class="label control-label" for="timepicker">TimePicker</label>
168191
</div>
169192
<div class="form-group">
170193
<input type="checkbox" name="alwaysOpen" [(ngModel)]="daterangepickerOptions.alwaysOpen" id="alwaysOpen">
171-
<label class="label font-weight-bold control-label" for="alwaysOpen">Always Open</label>
194+
<label class="label control-label" for="alwaysOpen">Always Open</label>
172195
</div>
173196
<div class="form-group">
174197
<p class="font-weight-bold">Theme</p>

‎src/app/app.component.ts‎

Lines changed: 63 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Component, OnInit } from '@angular/core';
2+
import { Options } from 'angular-datetimerangepicker/types';
23
declare var require: any;
34
const dayjs = require('dayjs');
45

@@ -9,6 +10,7 @@ const dayjs = require('dayjs');
910
})
1011
export class AppComponent implements OnInit {
1112
isTimePickerEnabled = true;
13+
format = 'DD.MM.YYYY HH:mm';
1214
themeObject = {
1315
'--drp-bg': null,
1416
'--drp-fg': null,
@@ -19,12 +21,35 @@ export class AppComponent implements OnInit {
1921
'--drp-input-border-color': null,
2022
'--drp-input-disabled-color': null,
2123
};
22-
daterangepickerOptions = {
23-
format: 'DD.MM.YYYY HH:mm',
24+
initialConfigDatePickerOptions: any = {
25+
format: this.format,
26+
singleCalendar: true,
27+
displayFormat: this.format,
28+
position: 'left',
29+
noDefaultRangeSelected: true,
30+
timePicker: {
31+
minuteInterval: 1,
32+
twentyFourHourFormat: true,
33+
},
34+
};
35+
startDateConfigDatePickerOptions: any = {
36+
...this.initialConfigDatePickerOptions,
37+
};
38+
endDateConfigDatePickerOptions: any = {
39+
...this.initialConfigDatePickerOptions,
40+
};
41+
minDateConfigDatePickerOptions: any = {
42+
...this.initialConfigDatePickerOptions,
43+
};
44+
maxDateConfigDatePickerOptions: any = {
45+
...this.initialConfigDatePickerOptions,
46+
};
47+
daterangepickerOptions: any = {
48+
format: this.format,
2449
startDate: dayjs(),
2550
endDate: dayjs().add(10, 'days'),
26-
minDate: dayjs().add(-12, 'months').format('DD.MM.YYYY HH:mm'),
27-
maxDate: dayjs().add(12, 'months').format('DD.MM.YYYY HH:mm'),
51+
minDate: dayjs().add(-12, 'months').format(this.format),
52+
maxDate: dayjs().add(12, 'months').format(this.format),
2853
inactiveBeforeStart: true,
2954
autoApply: true,
3055
showRanges: true,
@@ -34,6 +59,18 @@ export class AppComponent implements OnInit {
3459
placeholder: 'demo placeholder',
3560
hideControls: false,
3661
readOnly: true,
62+
singleCalendar: false,
63+
displayFormat: this.format,
64+
position: 'left',
65+
disabled: false,
66+
noDefaultRangeSelected: false,
67+
disableBeforeStart: false,
68+
alwaysOpen: false,
69+
addTouchSupport: true,
70+
timePicker: {
71+
minuteInterval: 5,
72+
twentyFourHourFormat: true,
73+
},
3774
preDefinedRanges: [
3875
{
3976
name: 'Day After tomorrow',
@@ -78,18 +115,6 @@ export class AppComponent implements OnInit {
78115
},
79116
},
80117
],
81-
singleCalendar: false,
82-
displayFormat: 'DD.MM.YYYY HH:mm',
83-
position: 'left',
84-
disabled: false,
85-
noDefaultRangeSelected: true,
86-
timePicker: {
87-
minuteInterval: 5,
88-
twentyFourHourFormat: true,
89-
},
90-
disableBeforeStart: false,
91-
alwaysOpen: false,
92-
addTouchSupport: true,
93118
};
94119
selectedRange = {
95120
start: null,
@@ -137,4 +162,26 @@ export class AppComponent implements OnInit {
137162
e.target.value
138163
);
139164
}
165+
optionChanged(propValue, event) {
166+
this.daterangepickerOptions = {
167+
...this.daterangepickerOptions,
168+
[propValue]: event.start
169+
? event.start.format(this.format)
170+
: event.target.checked,
171+
};
172+
if (['minDate', 'maxDate'].includes(propValue)) {
173+
this.endDateConfigDatePickerOptions = {
174+
...this.endDateConfigDatePickerOptions,
175+
noDefaultRangeSelected: false,
176+
minDate: this.daterangepickerOptions.minDate,
177+
maxDate: this.daterangepickerOptions.maxDate,
178+
};
179+
this.startDateConfigDatePickerOptions = {
180+
...this.startDateConfigDatePickerOptions,
181+
noDefaultRangeSelected: false,
182+
minDate: this.daterangepickerOptions.minDate,
183+
maxDate: this.daterangepickerOptions.maxDate,
184+
};
185+
}
186+
}
140187
}

‎src/styles.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.label {
2+
font-weight: 500;
3+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /