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 f99d0ad

Browse files
fix: Added dayjs constructor statement to config
1 parent cef59b6 commit f99d0ad

File tree

1 file changed

+54
-44
lines changed

1 file changed

+54
-44
lines changed

‎src/app/app.component.ts‎

Lines changed: 54 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
1-
import { Component, OnInit } from '@angular/core';
2-
import { Options } from 'angular-datetimerangepicker/types';
1+
import { Component, OnInit } from "@angular/core";
2+
import { Options } from "angular-datetimerangepicker/types";
33
declare var require: any;
4-
const dayjs = require('dayjs');
4+
const dayjs = require("dayjs");
55

66
@Component({
7-
selector: 'app-root',
8-
templateUrl: './app.component.html',
9-
styleUrls: ['./app.component.css'],
7+
selector: "app-root",
8+
templateUrl: "./app.component.html",
9+
styleUrls: ["./app.component.css"],
1010
})
1111
export class AppComponent implements OnInit {
1212
isTimePickerEnabled = true;
13-
format = 'DD.MM.YYYY HH:mm';
13+
format = "DD.MM.YYYY HH:mm";
1414
themeObject = {
15-
'--drp-bg': null,
16-
'--drp-fg': null,
17-
'--drp-hover-bg': null,
18-
'--drp-hover-fg': null,
19-
'--drp-shadow-color': null,
20-
'--drp-outline-color': null,
21-
'--drp-input-border-color': null,
22-
'--drp-input-disabled-color': null,
15+
"--drp-bg": null,
16+
"--drp-fg": null,
17+
"--drp-hover-bg": null,
18+
"--drp-hover-fg": null,
19+
"--drp-shadow-color": null,
20+
"--drp-outline-color": null,
21+
"--drp-input-border-color": null,
22+
"--drp-input-disabled-color": null,
2323
};
2424
initialConfigDatePickerOptions: any = {
2525
format: this.format,
2626
singleCalendar: true,
2727
displayFormat: this.format,
28-
position: 'left',
28+
position: "left",
2929
noDefaultRangeSelected: true,
3030
timePicker: {
3131
minuteInterval: 1,
@@ -46,29 +46,29 @@ export class AppComponent implements OnInit {
4646
};
4747
daterangepickerOptions: any = {
4848
startDate: dayjs(),
49-
endDate: dayjs().add(10, 'days'),
50-
minDate: dayjs().add(-12, 'months').format(this.format),
51-
maxDate: dayjs().add(12, 'months').format(this.format),
49+
endDate: dayjs().add(10, "days"),
50+
minDate: dayjs().add(-12, "months"),
51+
maxDate: dayjs().add(12, "months"),
5252
format: this.format,
5353
displayFormat: this.format,
5454
autoApply: true,
55-
theme: 'dark',
55+
theme: "dark",
5656
weekStartsOn: 0,
57-
placeholder: 'demo placeholder',
57+
placeholder: "demo placeholder",
5858
hideControls: false,
5959
singleCalendar: false,
60-
position: 'left',
60+
position: "left",
6161
required: false,
6262
readOnly: true,
6363
disabled: false,
6464
disableWeekEnds: true,
6565
disabledDays: [3],
6666
disabledDates: [
67-
dayjs().add(10, 'day'),
68-
dayjs().add(11, 'day'),
69-
dayjs().add(12, 'day'),
70-
dayjs().add(13, 'day'),
71-
dayjs().add(14, 'day'),
67+
dayjs().add(10, "day"),
68+
dayjs().add(11, "day"),
69+
dayjs().add(12, "day"),
70+
dayjs().add(13, "day"),
71+
dayjs().add(14, "day"),
7272
],
7373
disableBeforeStart: false,
7474
inactiveBeforeStart: true,
@@ -82,45 +82,45 @@ export class AppComponent implements OnInit {
8282
},
8383
preDefinedRanges: [
8484
{
85-
name: 'Day After tomorrow',
85+
name: "Day After tomorrow",
8686
value: {
87-
start: dayjs().add(2, 'days'),
88-
end: dayjs().add(2, 'days'),
87+
start: dayjs().add(2, "days"),
88+
end: dayjs().add(2, "days"),
8989
},
9090
},
9191
{
92-
name: 'Today',
92+
name: "Today",
9393
value: {
9494
start: dayjs(),
9595
end: dayjs(),
9696
},
9797
},
9898
{
99-
name: 'Tomorrow',
99+
name: "Tomorrow",
100100
value: {
101-
start: dayjs().add(1, 'days'),
102-
end: dayjs().add(1, 'days'),
101+
start: dayjs().add(1, "days"),
102+
end: dayjs().add(1, "days"),
103103
},
104104
},
105105
{
106-
name: 'This week',
106+
name: "This week",
107107
value: {
108108
start: dayjs(),
109-
end: dayjs().add(7, 'days'),
109+
end: dayjs().add(7, "days"),
110110
},
111111
},
112112
{
113-
name: 'This month',
113+
name: "This month",
114114
value: {
115115
start: dayjs(),
116-
end: dayjs().add(1, 'month'),
116+
end: dayjs().add(1, "month"),
117117
},
118118
},
119119
{
120-
name: 'Next 2 months',
120+
name: "Next 2 months",
121121
value: {
122122
start: dayjs(),
123-
end: dayjs().add(2, 'month'),
123+
end: dayjs().add(2, "month"),
124124
},
125125
},
126126
],
@@ -161,10 +161,20 @@ export class AppComponent implements OnInit {
161161
: null;
162162
}
163163
prettyPrintJSON(object) {
164-
return JSON.stringify(object, null, 2);
164+
return JSON.stringify(
165+
object,
166+
(key, val) => {
167+
console.log(key, val);
168+
if (val && dayjs(val).isValid()) {
169+
return `dayjs('${val}')`;
170+
}
171+
return val;
172+
},
173+
2
174+
);
165175
}
166176
colorChange(e) {
167-
this.daterangepickerOptions.theme = 'light';
177+
this.daterangepickerOptions.theme = "light";
168178
this.themeObject[e.target.dataset.cssPropName] = e.target.value;
169179
document.documentElement.style.setProperty(
170180
e.target.dataset.cssPropName,
@@ -178,7 +188,7 @@ export class AppComponent implements OnInit {
178188
? event.start.format(this.format)
179189
: event.target.checked,
180190
};
181-
if (['minDate','maxDate'].includes(propValue)) {
191+
if (["minDate","maxDate"].includes(propValue)) {
182192
this.endDateConfigDatePickerOptions = {
183193
...this.endDateConfigDatePickerOptions,
184194
noDefaultRangeSelected: false,
@@ -201,7 +211,7 @@ export class AppComponent implements OnInit {
201211
}
202212
disabledDaysChanged(event) {
203213
this.daterangepickerOptions.disabledDays = event.target.value
204-
? event.target.value.split(',').map((x) => +x)
214+
? event.target.value.split(",").map((x) => +x)
205215
: null;
206216
}
207217
}

0 commit comments

Comments
(0)

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