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 e69fec0

Browse files
feat: Making demo page more comprehensive
1 parent 5dfdac7 commit e69fec0

File tree

4 files changed

+167
-122
lines changed

4 files changed

+167
-122
lines changed

‎angular.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@
2323
"src/assets"
2424
],
2525
"styles": [
26-
"src/styles.css",
2726
"projects/angular-datetimerangepicker/src/styles/styles.css",
28-
"projects/angular-datetimerangepicker/src/styles/touch.css"
27+
"projects/angular-datetimerangepicker/src/styles/touch.css",
28+
"src/styles.css"
2929
],
3030
"scripts": []
3131
},

‎src/app/app.component.html‎

Lines changed: 144 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -21,211 +21,236 @@
2121
</a>
2222
</div>
2323
</nav>
24-
<div class="row container-fluid mx-auto main">
25-
<div class="col-xs-12 col-md-4">
26-
<h3>Live Demo</h3>
27-
<div class="col-xs-12">
28-
<daterangepicker [options]="daterangepickerOptions" (rangeSelected)="rangeSelected($event)">
29-
</daterangepicker>
30-
<div class="col-xs-12 mt-5">
31-
<p class="m-0 p-0">
32-
<strong class="mr-2">Selected Range Data</strong>
33-
<small><em>Shown in UTC time</em></small>
34-
</p>
35-
<pre>{{prettyPrintJSON(selectedRange)}}</pre>
36-
</div>
37-
</div>
38-
<div class="col-xs-12">
39-
<form class="mt-2">
40-
<div class="form-group">
41-
<h4 class="font-weight-bold mb-0">Theming</h4>
42-
<small class="mb-4">You can theme the component from here</small>
43-
<div class="form-group">
44-
<input type="color" name="background" data-css-prop-name="--drp-bg" (input)="colorChange($event)"
45-
id="background">
46-
<label class="label control-label" for="background">Background</label>
47-
</div>
48-
<div class="form-group">
49-
<input type="color" name="foreground" data-css-prop-name="--drp-fg" (input)="colorChange($event)"
50-
id="foreground">
51-
<label class="label control-label" for="foreground">Text color</label>
52-
</div>
53-
<div class="form-group">
54-
<input type="color" name="hover-color" data-css-prop-name="--drp-hover-bg" (input)="colorChange($event)"
55-
id="hover-color">
56-
<label class="label control-label" for="hover-color">Hover Background Color</label>
57-
</div>
58-
<div class="form-group">
59-
<input type="color" name="hover-text-color" data-css-prop-name="--drp-hover-fg"
60-
(input)="colorChange($event)" id="hover-text-color">
61-
<label class="label control-label" for="hover-text-color">Hover Text Color</label>
62-
</div>
63-
<div class="form-group">
64-
<input type="color" name="shadow-color" data-css-prop-name="--drp-shadow-color"
65-
(input)="colorChange($event)" id="shadow-color">
66-
<label class="label control-label" for="shadow-color">Shadow Color</label>
67-
</div>
68-
<div class="form-group">
69-
<input type="color" name="outline-color" data-css-prop-name="--drp-outline-color"
70-
(input)="colorChange($event)" id="outline-color">
71-
<label class="label control-label" for="outline-color">Outline Color</label>
72-
</div>
73-
<div class="form-group">
74-
<input type="color" name="input-border-color" data-css-prop-name="--drp-input-border-color"
75-
(input)="colorChange($event)" id="input-border-color">
76-
<label class="label control-label" for="input-border-color">Input Border Color</label>
77-
</div>
78-
<div class="form-group">
79-
<input type="color" name="input-disabled-color" data-css-prop-name="--drp-input-disabled-color"
80-
(input)="colorChange($event)" id="input-disabled-color">
81-
<label class="label control-label" for="input-disabled-color">Input Disabled Color</label>
82-
</div>
83-
</div>
84-
</form>
85-
</div>
86-
<div class="col-xs-12">
87-
<b>Theme Config</b>
88-
<br />
89-
<small>Add these css variables to your stylesheet</small>
90-
<pre>{{prettyPrintJSON(themeObject)}}</pre>
91-
</div>
92-
</div>
93-
<div class="col-xs-12 col-md-4">
24+
<main class="row container-fluid mx-auto main max-vh-100">
25+
<div class="col-xs-12 col-md-5">
9426
<h3>Configuration Options Generator</h3>
95-
<form>
96-
<div class="form-group">
27+
<form class="row">
28+
<div class="form-group col-12 col-md-6">
29+
<label class="label control-label mr-3" for="format">Format</label>
30+
<input type="text" class="form-control" name="format" (blur)="formatChanged('format', $event)"
31+
[ngModel]=daterangepickerOptions.format id="format">
32+
</div>
33+
<div class="form-group col-12 col-md-6">
34+
<label class="label control-label mr-3" for="displayFormat">Display Format</label>
35+
<input type="text" class="form-control" name="displayFormat" (blur)="formatChanged('displayFormat', $event)"
36+
[ngModel]=daterangepickerOptions.displayFormat id="displayFormat">
37+
</div>
38+
<div class="form-group col-12 col-md-6">
9739
<label class="label control-label" for="background">Start Date</label>
98-
<daterangepicker [options]="startDateConfigDatePickerOptions"
40+
<daterangepicker class="form-control" [options]="startDateConfigDatePickerOptions"
9941
(rangeSelected)="optionChanged('startDate', $event)">
10042
</daterangepicker>
10143
</div>
102-
<div class="form-group">
44+
<div class="form-group col-12 col-md-6">
10345
<label class="label control-label" for="background">
10446
End Date
10547
</label>
106-
<daterangepicker [options]="endDateConfigDatePickerOptions" (rangeSelected)="optionChanged('endDate', $event)">
48+
<daterangepicker class="form-control" [options]="endDateConfigDatePickerOptions"
49+
(rangeSelected)="optionChanged('endDate', $event)">
10750
</daterangepicker>
10851
</div>
109-
<div class="form-group">
52+
<div class="form-group col-12 col-md-6">
11053
<label class="label control-label" for="background">Min Date</label>
111-
<daterangepicker [options]="minDateConfigDatePickerOptions" (rangeSelected)="optionChanged('minDate', $event)">
54+
<daterangepicker class="form-control" [options]="minDateConfigDatePickerOptions"
55+
(rangeSelected)="optionChanged('minDate', $event)">
11256
</daterangepicker>
11357
</div>
114-
<div class="form-group">
58+
<div class="form-group col-12 col-md-6">
11559
<label class="label control-label" for="background">Max Date</label>
116-
<daterangepicker [options]="maxDateConfigDatePickerOptions" (rangeSelected)="optionChanged('maxDate', $event)">
60+
<daterangepicker class="form-control" [options]="maxDateConfigDatePickerOptions"
61+
(rangeSelected)="optionChanged('maxDate', $event)">
11762
</daterangepicker>
11863
</div>
119-
<div class="form-group">
120-
<label class="label control-label mr-3" for="weekStartsOn">Week Starts On</label>
64+
<div class="form-group col-12 col-md-6">
65+
<label class="label control-label mr-3" for="weekStartsOn">Week Starts On <small>(Sun = 0 / Sat =
66+
6)</small></label>
12167
<input type="number" class="form-control" name="weekStartsOn" [(ngModel)]=daterangepickerOptions.weekStartsOn
12268
id="weekStartsOn">
12369
</div>
124-
<div class="form-group">
70+
<div class="form-group col-12 col-md-6">
71+
<label class="label control-label mr-3" for="disabledDays">Disabled Days <small>(Sun = 0 / Sat =
72+
6)</small></label>
73+
<input type="text" class="form-control" name="disabledDays" (blur)="disabledDaysChanged($event)"
74+
[ngModel]=daterangepickerOptions.disabledDays id="disabledDays">
75+
</div>
76+
<div class="form-group col-12 col-md-6">
12577
<label class="label control-label mr-3" for="placeholder">Placeholder</label>
12678
<input type="text" class="form-control" name="placeholder" [(ngModel)]=daterangepickerOptions.placeholder
12779
id="placeholder">
12880
</div>
129-
<div class="form-group">
81+
<div class="form-group col-12 col-md-6">
13082
<input type="checkbox" name="singleCalendar" [(ngModel)]=daterangepickerOptions.singleCalendar
13183
id="singleCalendar">
13284
<label class="label control-label" for="singleCalendar">Single Calendar</label>
13385
</div>
134-
<div class="form-group">
86+
<div class="form-group col-12 col-md-6">
87+
<input type="checkbox" name="disableWeekEnds" [(ngModel)]=daterangepickerOptions.disableWeekEnds
88+
id="disableWeekEnds">
89+
<label class="label control-label" for="disableWeekEnds">Disable Week Ends</label>
90+
</div>
91+
<div class="form-group col-12 col-md-6">
13592
<input type="checkbox" name="hideControls" [(ngModel)]=daterangepickerOptions.hideControls id="hideControls">
13693
<label class="label control-label" for="hideControls">Hide Controls</label>
13794
</div>
138-
<div class="form-group">
139-
<input type="checkbox" name="addTouchSupport" [(ngModel)]=daterangepickerOptions.addTouchSupport
140-
id="addTouchSupport">
141-
<label class="label control-label" for="addTouchSupport">
142-
Add touch support * <small>WIP</small>
143-
</label>
144-
<p>
145-
<small>Works only on touch devices</small>
146-
<br />
147-
<small>
148-
<em>
149-
Check <a href="https://technikhil314.netlify.app/docs/daterangepicker/introduction">Documentation</a> for
150-
more details
151-
</em>
152-
</small>
153-
</p>
154-
</div>
155-
<div class="form-group">
95+
<div class="form-group col-12 col-md-6">
15696
<input type="checkbox" name="autoApply" [(ngModel)]=daterangepickerOptions.autoApply id="autoApply">
15797
<label class="label control-label" for="autoApply">Auto Apply</label>
15898
</div>
159-
<div class="form-group">
99+
<div class="form-group col-12 col-md-6">
160100
<input type="checkbox" name="inactiveBeforeStart" [(ngModel)]=daterangepickerOptions.inactiveBeforeStart
161101
id="inactiveBeforeStart">
162102
<label class="label control-label" for="inactiveBeforeStart">Inactive Before Start</label>
163103
</div>
164-
<div class="form-group">
104+
<div class="form-group col-12 col-md-6">
165105
<input type="checkbox" name="disableBeforeStart" [(ngModel)]=daterangepickerOptions.disableBeforeStart
166106
id="disableBeforeStart">
167107
<label class="label control-label" for="disableBeforeStart">Disable Before Start</label>
168108
</div>
169-
<div class="form-group">
109+
<div class="form-group col-12 col-md-6">
170110
<input type="checkbox" name="readOnly" [(ngModel)]=daterangepickerOptions.readOnly id="readOnly">
171111
<label class="label control-label" for="readOnly">Read Only</label>
172112
</div>
173-
<div class="form-group">
113+
<div class="form-group col-12 col-md-6">
174114
<input type="checkbox" name="disabled" [(ngModel)]=daterangepickerOptions.disabled id="disabled">
175115
<label class="label control-label" for="disabled">Disabled</label>
176116
</div>
177-
<div class="form-group">
117+
<div class="form-group col-12 col-md-6">
178118
<input type="checkbox" name="showRanges" [(ngModel)]="daterangepickerOptions.showRanges" id="showRanges">
179119
<label class="label control-label" for="showRanges">Show Ranges</label>
180120
</div>
181-
<div class="form-group">
121+
<div class="form-group col-12 col-md-6">
182122
<input type="checkbox" name="noDefaultRangeSelected" (click)="optionChanged('noDefaultRangeSelected', $event)"
183123
[ngModel]="daterangepickerOptions.noDefaultRangeSelected" id="noDefaultRangeSelected">
184124
<label class="label control-label" for="noDefaultRangeSelected">No Default Range
185125
Selected</label>
186126
</div>
187-
<div class="form-group">
127+
<div class="form-group col-12 col-md-6">
188128
<input type="checkbox" name="timepicker" [ngModel]="isTimePickerEnabled" (change)="setTimePicker($event)"
189129
id="timepicker">
190130
<label class="label control-label" for="timepicker">TimePicker</label>
191131
</div>
192-
<div class="form-group">
132+
<div class="form-group col-12 col-md-6">
193133
<input type="checkbox" name="alwaysOpen" [(ngModel)]="daterangepickerOptions.alwaysOpen" id="alwaysOpen">
194134
<label class="label control-label" for="alwaysOpen">Always Open</label>
195135
</div>
196-
<div class="form-group">
136+
<div class="form-group col-12 col-md-6">
197137
<p class="font-weight-bold">Theme</p>
198-
<div class="form-group">
138+
<div class="form-group col-12">
199139
<input type="radio" name="theme" value="light" [(ngModel)]="daterangepickerOptions.theme" id="theme-light">
200140
<label class="label control-label" for="theme-light">Light</label>
201141
</div>
202-
<div class="form-group">
142+
<div class="form-group col-12">
203143
<input type="radio" name="theme" value="dark" [(ngModel)]="daterangepickerOptions.theme" id="theme-dark">
204144
<label class="label control-label" for="theme-dark">Dark</label>
205145
</div>
206146
</div>
207-
<div class="form-group">
147+
<div class="form-group col-12 col-md-6">
208148
<p class="font-weight-bold">Position</p>
209-
<div class="form-group">
149+
<div class="form-group col-12">
210150
<input type="radio" name="position" value="left" [(ngModel)]="daterangepickerOptions.position"
211151
id="position-left" [disabled]="daterangepickerOptions.alwaysOpen">
212152
<label class="label control-label" for="position-left">Left</label>
213153
</div>
214-
<div class="form-group">
154+
<div class="form-group col-12">
215155
<input type="radio" name="position" value="right" [(ngModel)]="daterangepickerOptions.position"
216156
id="position-right" [disabled]="daterangepickerOptions.alwaysOpen">
217157
<label class="label control-label" for="position-right">Right</label>
218158
</div>
219-
<div class="form-group">
159+
<div class="form-group col-12">
220160
<input type="radio" name="position" value="center" [(ngModel)]="daterangepickerOptions.position"
221161
id="position-center" [disabled]="daterangepickerOptions.alwaysOpen">
222162
<label class="label control-label" for="position-center">Center</label>
223163
</div>
224164
</div>
165+
<div class="form-group col-12 col-md-6">
166+
<input type="checkbox" name="addTouchSupport" [(ngModel)]=daterangepickerOptions.addTouchSupport
167+
id="addTouchSupport">
168+
<label class="label control-label" for="addTouchSupport">
169+
Add touch support * <small>WIP</small>
170+
</label>
171+
<p>
172+
<small>Works only on touch devices</small>
173+
<br />
174+
<small>
175+
<em>
176+
Check <a href="https://technikhil314.netlify.app/docs/daterangepicker/introduction">Documentation</a> for
177+
more details
178+
</em>
179+
</small>
180+
</p>
181+
</div>
225182
</form>
226183
</div>
227-
<div class="col-xs-12 col-md-4">
184+
<div class="col-xs-12 col-md-3">
185+
<h3>Live Demo</h3>
186+
<div class="col-xs-12">
187+
<daterangepicker [options]="daterangepickerOptions" (rangeSelected)="rangeSelected($event)">
188+
</daterangepicker>
189+
<div class="col-xs-12 mt-5">
190+
<p class="m-0 p-0">
191+
<strong class="mr-2">Selected Range Data</strong>
192+
<small><em>Shown in UTC time</em></small>
193+
</p>
194+
<pre>{{prettyPrintJSON(selectedRange)}}</pre>
195+
</div>
196+
</div>
197+
<div class="col-xs-12">
198+
<form class="mt-2">
199+
<div class="form-group">
200+
<h4 class="font-weight-bold mb-0">Theming</h4>
201+
<small class="mb-4">You can theme the component from here</small>
202+
<div class="form-group">
203+
<input type="color" name="background" data-css-prop-name="--drp-bg" (input)="colorChange($event)"
204+
id="background">
205+
<label class="label control-label" for="background">Background</label>
206+
</div>
207+
<div class="form-group">
208+
<input type="color" name="foreground" data-css-prop-name="--drp-fg" (input)="colorChange($event)"
209+
id="foreground">
210+
<label class="label control-label" for="foreground">Text color</label>
211+
</div>
212+
<div class="form-group">
213+
<input type="color" name="hover-color" data-css-prop-name="--drp-hover-bg" (input)="colorChange($event)"
214+
id="hover-color">
215+
<label class="label control-label" for="hover-color">Hover Background Color</label>
216+
</div>
217+
<div class="form-group">
218+
<input type="color" name="hover-text-color" data-css-prop-name="--drp-hover-fg"
219+
(input)="colorChange($event)" id="hover-text-color">
220+
<label class="label control-label" for="hover-text-color">Hover Text Color</label>
221+
</div>
222+
<div class="form-group">
223+
<input type="color" name="shadow-color" data-css-prop-name="--drp-shadow-color"
224+
(input)="colorChange($event)" id="shadow-color">
225+
<label class="label control-label" for="shadow-color">Shadow Color</label>
226+
</div>
227+
<div class="form-group">
228+
<input type="color" name="outline-color" data-css-prop-name="--drp-outline-color"
229+
(input)="colorChange($event)" id="outline-color">
230+
<label class="label control-label" for="outline-color">Outline Color</label>
231+
</div>
232+
<div class="form-group">
233+
<input type="color" name="input-border-color" data-css-prop-name="--drp-input-border-color"
234+
(input)="colorChange($event)" id="input-border-color">
235+
<label class="label control-label" for="input-border-color">Input Border Color</label>
236+
</div>
237+
<div class="form-group">
238+
<input type="color" name="input-disabled-color" data-css-prop-name="--drp-input-disabled-color"
239+
(input)="colorChange($event)" id="input-disabled-color">
240+
<label class="label control-label" for="input-disabled-color">Input Disabled Color</label>
241+
</div>
242+
</div>
243+
</form>
244+
</div>
245+
<div class="col-xs-12">
246+
<b>Theme Config</b>
247+
<br />
248+
<small>Add these css variables to your stylesheet</small>
249+
<pre>{{prettyPrintJSON(themeObject)}}</pre>
250+
</div>
251+
</div>
252+
<div class="col-xs-12 col-md-4 configuration">
228253
<h4>Configuration</h4>
229254
<pre>{{prettyPrintJSON(daterangepickerOptions)}}</pre>
230255
</div>
231-
</div>
256+
</main>

‎src/app/app.component.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export class AppComponent implements OnInit {
5252
format: this.format,
5353
displayFormat: this.format,
5454
autoApply: true,
55-
theme: 'light',
55+
theme: 'dark',
5656
weekStartsOn: 0,
5757
placeholder: 'demo placeholder',
5858
hideControls: false,
@@ -193,4 +193,15 @@ export class AppComponent implements OnInit {
193193
};
194194
}
195195
}
196+
formatChanged(propValue, event) {
197+
this.daterangepickerOptions = {
198+
...this.daterangepickerOptions,
199+
[propValue]: event.target.value,
200+
};
201+
}
202+
disabledDaysChanged(event) {
203+
this.daterangepickerOptions.disabledDays = event.target.value
204+
.split(',')
205+
.map((x) => +x);
206+
}
196207
}

0 commit comments

Comments
(0)

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