Skip to content

Commit 7d09047

Browse files
adrianptrvadrianptrv
committed
chore(date-range-picker): format code
1 parent 904b53d commit 7d09047

7 files changed

Lines changed: 184 additions & 186 deletions

File tree

‎samples/scheduling/date-range-picker/custom-ranges/src/index.tsx‎

Lines changed: 37 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,43 @@
1-
import React, { useEffect } from "react";
2-
import ReactDOM from "react-dom/client";
3-
import "./index.css";
4-
import { IgrDateRangePicker } from "igniteui-react";
5-
import {
6-
CustomDateRange,
7-
DateRangeDescriptor,
8-
DateRangeType,
9-
} from "igniteui-react";
10-
import "igniteui-webcomponents/themes/light/bootstrap.css";
1+
import React, {useEffect} from 'react';
2+
import ReactDOM from 'react-dom/client';
3+
import './index.css';
4+
import { IgrDateRangePicker } from 'igniteui-react';
5+
import { CustomDateRange } from 'igniteui-react';
6+
import 'igniteui-webcomponents/themes/light/bootstrap.css';
117

128
export default function DrpCustom() {
13-
useEffect(() => {
14-
let dateRange = document.querySelector(
15-
"igc-date-range-picker"
16-
) as IgrDateRangePicker;
17-
const minDate = new Date(2025, 4, 5);
18-
const maxDate = new Date(2025, 4, 15);
19-
dateRange.disabledDates = [
20-
{
21-
type: DateRangeType.Between,
22-
dateRange: [minDate, maxDate],
23-
},
24-
] as DateRangeDescriptor[];
25-
}, []);
9+
useEffect(() => {
10+
const today = new Date();
11+
const nextSeven = new Date(
12+
today.getFullYear(),
13+
today.getMonth(),
14+
today.getDate() + 7
15+
);
16+
const nextWeek: CustomDateRange[] = [
17+
{
18+
label: "Next 7 days",
19+
dateRange: {
20+
start: today,
21+
end: nextSeven,
22+
},
23+
},
24+
];
25+
const dateRange = document.querySelector("igc-date-range-picker") as IgrDateRangePicker;
26+
dateRange.customRanges = nextWeek;
27+
dateRange.usePredefinedRanges = true;
28+
}, []);
2629

27-
return (
28-
<div className="container sample center">
29-
<IgrDateRangePicker
30-
mode="dialog"
31-
label="Custom Ranges"
32-
></IgrDateRangePicker>
33-
</div>
34-
);
30+
return (
31+
<div className="container sample center">
32+
<IgrDateRangePicker
33+
mode="dialog"
34+
usePredefinedRanges
35+
label="Custom Ranges">
36+
</IgrDateRangePicker>
37+
</div>
38+
);
3539
}
3640

3741
// rendering above class to the React DOM
38-
const root = ReactDOM.createRoot(document.getElementById("root"));
39-
root.render(<DrpCustom />);
42+
const root = ReactDOM.createRoot(document.getElementById('root'));
43+
root.render(<DrpCustom/>);

‎samples/scheduling/date-range-picker/form/src/index.tsx‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,44 +5,44 @@ import { IgrDateRangePicker, IgrButton, IgrDialog } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66

77
export default function DrpForm() {
8-
useEffect(() => {
9-
document.getElementById("DateForm")?.addEventListener("submit", (event: SubmitEvent) => {
10-
event.preventDefault();
11-
showDialog(event.target as HTMLFormElement);
12-
});
8+
useEffect(() => {
9+
document.getElementById("DateForm")?.addEventListener("submit", (event: SubmitEvent) => {
10+
event.preventDefault();
11+
showDialog(event.target as HTMLFormElement);
12+
});
1313

14-
function showDialog(data: HTMLFormElement) {
15-
let dateRange = data.DateRange.value;
16-
const dialog = document.createElement("igc-dialog") as IgrDialog;
17-
dialog.addEventListener("igcClosed", () => dialog.remove());
18-
const dump = document.createElement("pre");
19-
dump.innerHTML = `<b>Start</b>: ${dateRange.start} \n<b>End</b>: ${dateRange.end}`;
20-
dialog.appendChild(dump);
21-
document.body.appendChild(dialog);
22-
dialog.show();
23-
}
24-
}, []);
14+
function showDialog(data: HTMLFormElement) {
15+
let dateRange = data.DateRange.value;
16+
const dialog = document.createElement("igc-dialog") as IgrDialog;
17+
dialog.addEventListener("igcClosed", () => dialog.remove());
18+
const dump = document.createElement("pre");
19+
dump.innerHTML = `<b>Start</b>: ${dateRange.start} \n<b>End</b>: ${dateRange.end}`;
20+
dialog.appendChild(dump);
21+
document.body.appendChild(dialog);
22+
dialog.show();
23+
}
24+
}, []);
2525

26-
return (
27-
<div className="container sample center">
28-
<form id="DateForm">
29-
<fieldset>
30-
<IgrDateRangePicker
31-
required
32-
min={new Date("2025-05-01")}
33-
label="Date Range"
34-
id="DateRange"
35-
></IgrDateRangePicker>
36-
<IgrButton variant="outlined" type="submit">
37-
Submit
38-
</IgrButton>
39-
<IgrButton variant="outlined" type="reset">
40-
Reset
41-
</IgrButton>
42-
</fieldset>
43-
</form>
44-
</div>
45-
);
26+
return (
27+
<div className="container sample center">
28+
<form id="DateForm">
29+
<fieldset>
30+
<IgrDateRangePicker
31+
required
32+
min={new Date("2025-05-01")}
33+
label="Date Range"
34+
id="DateRange"
35+
></IgrDateRangePicker>
36+
<IgrButton variant="outlined" type="submit">
37+
Submit
38+
</IgrButton>
39+
<IgrButton variant="outlined" type="reset">
40+
Reset
41+
</IgrButton>
42+
</fieldset>
43+
</form>
44+
</div>
45+
);
4646
}
4747

4848
// rendering above class to the React DOM

‎samples/scheduling/date-range-picker/overview/src/index.tsx‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,19 @@ import { IgrDateRangePicker } from "igniteui-react";
55
import "igniteui-webcomponents/themes/light/bootstrap.css";
66

77
export default function DrpOverview() {
8-
useEffect(() => {
9-
let dateRange = document.querySelector(
10-
"igc-date-range-picker"
11-
) as IgrDateRangePicker;
12-
const today: Date = new Date();
13-
let endDate: Date = new Date();
14-
endDate.setDate(today.getDate() + 3);
15-
dateRange.value = { start: today, end: endDate };
16-
}, []);
8+
useEffect(() => {
9+
let dateRange = document.querySelector("igc-date-range-picker") as IgrDateRangePicker;
10+
const today: Date = new Date();
11+
let endDate: Date = new Date();
12+
endDate.setDate(today.getDate() + 3);
13+
dateRange.value = { start: today, end: endDate };
14+
}, []);
1715

18-
return (
19-
<div className="container sample center">
20-
<IgrDateRangePicker label="Date Range" />
21-
</div>
22-
);
16+
return (
17+
<div className="container sample center">
18+
<IgrDateRangePicker label="Date Range" />
19+
</div>
20+
);
2321
}
2422

2523
// rendering above class to the React DOM

‎samples/scheduling/date-range-picker/slots/src/index.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
h3 {
2+
margin: 2rem 0 0.5rem 0;
3+
}
4+
5+
h3:nth-of-type(1) {
6+
margin-top: unset;
7+
}
8+
9+
.container {
10+
overflow-y: scroll;
11+
padding-bottom: 1.2rem;
12+
}
13+

‎samples/scheduling/date-range-picker/slots/src/index.tsx‎

Lines changed: 60 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -2,90 +2,75 @@ import React, { useEffect, useRef } from "react";
22
import ReactDOM from "react-dom/client";
33
import "./index.css";
44
import {
5-
IgrDateRangePicker,
6-
IgrIcon,
7-
IgrButton,
8-
registerIconFromText,
5+
IgrDateRangePicker,
6+
IgrIcon,
7+
IgrButton,
8+
registerIconFromText,
99
} from "igniteui-react";
1010
import "igniteui-webcomponents/themes/light/bootstrap.css";
1111

1212
export default function DrpSlots() {
13-
const dateRangeRef = useRef<IgrDateRangePicker>();
13+
const dateRangeRef = useRef<IgrDateRangePicker>();
1414

15-
const Apps =
16-
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M240-160q-33 0-56.5-23.5T160-240q0-33 23.5-56.5T240-320q33 0 56.5 23.5T320-240q0 33-23.5 56.5T240-160Zm240 0q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm240 0q-33 0-56.5-23.5T640-240q0-33 23.5-56.5T720-320q33 0 56.5 23.5T800-240q0 33-23.5 56.5T720-160ZM240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400ZM240-640q-33 0-56.5-23.5T160-720q0-33 23.5-56.5T240-800q33 0 56.5 23.5T320-720q0 33-23.5 56.5T240-640Zm240 0q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Zm240 0q-33 0-56.5-23.5T640-720q0-33 23.5-56.5T720-800q33 0 56.5 23.5T800-720q0 33-23.5 56.5T720-640Z"/></svg>';
15+
const Apps = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M240-160q-33 0-56.5-23.5T160-240q0-33 23.5-56.5T240-320q33 0 56.5 23.5T320-240q0 33-23.5 56.5T240-160Zm240 0q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm240 0q-33 0-56.5-23.5T640-240q0-33 23.5-56.5T720-320q33 0 56.5 23.5T800-240q0 33-23.5 56.5T720-160ZM240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400ZM240-640q-33 0-56.5-23.5T160-720q0-33 23.5-56.5T240-800q33 0 56.5 23.5T320-720q0 33-23.5 56.5T240-640Zm240 0q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Zm240 0q-33 0-56.5-23.5T640-720q0-33 23.5-56.5T720-800q33 0 56.5 23.5T800-720q0 33-23.5 56.5T720-640Z"/></svg>';
16+
const Bin = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>';
17+
const Down = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-360 280-560h400L480-360Z"/></svg>';
18+
const Upload = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M440-200h80v-167l64 64 56-57-160-160-160 160 57 56 63-63v167ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>';
1719

18-
const Bin =
19-
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>';
20+
registerIconFromText("appsIcon", Apps);
21+
registerIconFromText("binIcon", Bin);
22+
registerIconFromText("downArrowIcon", Down);
23+
registerIconFromText("uploadIcon", Upload);
2024

21-
const Down =
22-
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-360 280-560h400L480-360Z"/></svg>';
25+
useEffect(() => {
26+
let prefixSuffix = document.getElementById("prefixSuffix") as IgrDateRangePicker;
27+
let icons = document.getElementById("icons") as IgrDateRangePicker;
28+
const today: Date = new Date();
29+
let tomorrow: Date = new Date();
30+
tomorrow.setDate(today.getDate() + 1);
31+
prefixSuffix.value = { start: today, end: tomorrow };
32+
icons.value = { start: today, end: tomorrow };
33+
}, []);
2334

24-
const Upload =
25-
'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M440-200h80v-167l64 64 56-57-160-160-160 160 57 56 63-63v167ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>';
35+
const toggleWeekNumbers = () => {
36+
dateRangeRef.current.showWeekNumbers = !dateRangeRef.current.showWeekNumbers;
37+
};
2638

27-
registerIconFromText("appsIcon", Apps);
28-
registerIconFromText("binIcon", Bin);
29-
registerIconFromText("downArrowIcon", Down);
30-
registerIconFromText("uploadIcon", Upload);
31-
32-
useEffect(() => {
33-
let prefixSuffix = document.getElementById(
34-
"prefixSuffix"
35-
) as IgrDateRangePicker;
36-
let icons = document.getElementById("icons") as IgrDateRangePicker;
37-
const today: Date = new Date();
38-
let tomorrow: Date = new Date();
39-
tomorrow.setDate(today.getDate() + 1);
40-
prefixSuffix.value = { start: today, end: tomorrow };
41-
icons.value = { start: today, end: tomorrow };
42-
}, []);
43-
44-
const toggleWeekNumbers = () => {
45-
dateRangeRef.current.showWeekNumbers =
46-
!dateRangeRef.current.showWeekNumbers;
47-
};
48-
49-
return (
50-
<div className="container sample center">
51-
<h3>Actions</h3>
52-
<IgrDateRangePicker mode="dialog" ref={dateRangeRef}>
53-
<IgrButton slot="actions" onClick={toggleWeekNumbers}>
54-
Toggle Week Numbers
55-
</IgrButton>
56-
</IgrDateRangePicker>
57-
58-
<h3>Custom separator</h3>
59-
<IgrDateRangePicker useTwoInputs>
60-
<span slot="separator">till</span>
61-
</IgrDateRangePicker>
62-
63-
<h3>Helper text</h3>
64-
<IgrDateRangePicker>
65-
<span slot="helper-text">Helper text goes here.</span>
66-
</IgrDateRangePicker>
67-
68-
<h3>Prefix & Suffix</h3>
69-
<IgrDateRangePicker id="prefixSuffix">
70-
<IgrIcon slot="prefix" name="downArrowIcon"></IgrIcon>
71-
<IgrIcon slot="suffix" name="uploadIcon"></IgrIcon>
72-
</IgrDateRangePicker>
73-
74-
<h3>Clear & Calendar icons</h3>
75-
<IgrDateRangePicker id="icons">
76-
<IgrIcon slot="clear-icon" name="binIcon"></IgrIcon>
77-
<IgrIcon slot="calendar-icon" name="appsIcon"></IgrIcon>
78-
</IgrDateRangePicker>
79-
80-
<h3>Custom calendar header + title</h3>
81-
<IgrDateRangePicker mode="dialog">
82-
<span slot="title">Custom calendar title goes here.</span>
83-
<span slot="header-date">
84-
Custom content instead of date goes here.
85-
</span>
86-
</IgrDateRangePicker>
87-
</div>
88-
);
39+
return (
40+
<div className="container sample center">
41+
<h3>Actions</h3>
42+
<IgrDateRangePicker mode="dialog" ref={dateRangeRef}>
43+
<IgrButton slot="actions" onClick={toggleWeekNumbers}>
44+
Toggle Week Numbers
45+
</IgrButton>
46+
</IgrDateRangePicker>
47+
<h3>Custom separator</h3>
48+
<IgrDateRangePicker useTwoInputs>
49+
<span slot="separator">till</span>
50+
</IgrDateRangePicker>
51+
<h3>Helper text</h3>
52+
<IgrDateRangePicker>
53+
<span slot="helper-text">Helper text goes here.</span>
54+
</IgrDateRangePicker>
55+
<h3>Prefix & Suffix</h3>
56+
<IgrDateRangePicker id="prefixSuffix">
57+
<IgrIcon slot="prefix" name="downArrowIcon"></IgrIcon>
58+
<IgrIcon slot="suffix" name="uploadIcon"></IgrIcon>
59+
</IgrDateRangePicker>
60+
<h3>Clear & Calendar icons</h3>
61+
<IgrDateRangePicker id="icons">
62+
<IgrIcon slot="clear-icon" name="binIcon"></IgrIcon>
63+
<IgrIcon slot="calendar-icon" name="appsIcon"></IgrIcon>
64+
</IgrDateRangePicker>
65+
<h3>Custom calendar header + title</h3>
66+
<IgrDateRangePicker mode="dialog">
67+
<span slot="title">Custom calendar title goes here.</span>
68+
<span slot="header-date">
69+
Custom content instead of date goes here.
70+
</span>
71+
</IgrDateRangePicker>
72+
</div>
73+
);
8974
}
9075

9176
// rendering above class to the React DOM

‎samples/scheduling/date-range-picker/styling/src/index.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
igc-date-range-picker::part(label) {
2-
color: var(--ig-gray-600);
2+
color: var(--ig-gray-600);
33
}
44

55
igc-date-range-picker::part(calendar-icon-start),
66
igc-date-range-picker::part(calendar-icon-end) {
7-
background-color: var(--ig-primary-500);
8-
color: var(--ig-primary-500-contrast);
7+
background-color: var(--ig-primary-500);
8+
color: var(--ig-primary-500-contrast);
99
}
1010

1111
igc-date-range-picker::part(calendar-icon-open-start),
1212
igc-date-range-picker::part(calendar-icon-open-end) {
13-
background-color: var(--ig-primary-800);
14-
color: var(--ig-primary-800-contrast);
13+
background-color: var(--ig-primary-800);
14+
color: var(--ig-primary-800-contrast);
1515
}
1616

1717
igc-date-range-picker::part(clear-icon-start),
1818
igc-date-range-picker::part(clear-icon-end) {
19-
background-color: var(--ig-error-500);
20-
color: var(--ig-error-500-contrast);
19+
background-color: var(--ig-error-500);
20+
color: var(--ig-error-500-contrast);
2121
}

0 commit comments

Comments
 (0)