Skip to content

Commit ab009d8

Browse files
adrianptrvddaribo
adrianptrv
authored and
ddaribo
committed
feat(date-range-picker): comment fixes
1 parent b44d8c2 commit ab009d8

5 files changed

Lines changed: 50 additions & 55 deletions

File tree

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import React, {useEffect} from 'react';
1+
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
44
import { IgrDateRangePicker } from 'igniteui-react';
55
import { CustomDateRange } from 'igniteui-react';
66
import 'igniteui-webcomponents/themes/light/bootstrap.css';
77

88
export default function DrpCustom() {
9-
useEffect(() => {
109
const today = new Date();
1110
const nextSeven = new Date(
1211
today.getFullYear(),
@@ -22,16 +21,13 @@ export default function DrpCustom() {
2221
},
2322
},
2423
];
25-
const dateRange = document.querySelector("igc-date-range-picker") as IgrDateRangePicker;
26-
dateRange.customRanges = nextWeek;
27-
dateRange.usePredefinedRanges = true;
28-
}, []);
2924

3025
return (
3126
<div className="container sample center">
3227
<IgrDateRangePicker
3328
mode="dialog"
3429
usePredefinedRanges
30+
customRanges={nextWeek}
3531
label="Custom Ranges">
3632
</IgrDateRangePicker>
3733
</div>

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

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,36 @@
1-
import React, {useEffect} from 'react';
1+
import React, { useRef, useState } from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
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+
const dialog = useRef<IgrDialog>(null);
9+
const [range, setRange] = useState({ start: null, end: null });
1310

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();
11+
const showDialog = (event: React.FormEvent<HTMLFormElement>) => {
12+
if (dialog.current) {
13+
event.preventDefault();
14+
dialog.current.show();
2315
}
24-
}, []);
16+
};
17+
18+
const handleDateRangeChange = (event: CustomEvent) => {
19+
const newRange = {
20+
start: event.detail?.start || null,
21+
end: event.detail?.end || null,
22+
};
23+
setRange(newRange);
24+
};
2525

2626
return (
2727
<div className="container sample center">
28-
<form id="DateForm">
28+
<form id="DateForm" onSubmit={showDialog}>
2929
<fieldset>
3030
<IgrDateRangePicker
3131
required
32-
min={new Date("2025-05-01")}
32+
onChange={handleDateRangeChange}
3333
label="Date Range"
34-
id="DateRange"
3534
></IgrDateRangePicker>
3635
<IgrButton variant="outlined" type="submit">
3736
Submit
@@ -41,6 +40,12 @@ export default function DrpForm() {
4140
</IgrButton>
4241
</fieldset>
4342
</form>
43+
<IgrDialog ref={dialog}>
44+
<pre>
45+
<b>Start</b>: {range?.start?.toString() ?? ""} <br />
46+
<b>End</b>: {range?.end?.toString() ?? ""}
47+
</pre>
48+
</IgrDialog>
4449
</div>
4550
);
4651
}

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
1-
import React, { useEffect } from "react";
1+
import React from "react";
22
import ReactDOM from "react-dom/client";
33
import "./index.css";
44
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("igc-date-range-picker") as IgrDateRangePicker;
108
const today: Date = new Date();
119
let endDate: Date = new Date();
1210
endDate.setDate(today.getDate() + 3);
13-
dateRange.value = { start: today, end: endDate };
14-
}, []);
1511

1612
return (
1713
<div className="container sample center">
18-
<IgrDateRangePicker label="Date Range" />
14+
<IgrDateRangePicker label="Date Range" value={{start: today, end: endDate}}/>
1915
</div>
2016
);
2117
}

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

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,27 +9,23 @@ import {
99
} from "igniteui-react";
1010
import "igniteui-webcomponents/themes/light/bootstrap.css";
1111

12+
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>';
13+
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>';
14+
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>';
15+
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>';
16+
1217
export default function DrpSlots() {
1318
const dateRangeRef = useRef<IgrDateRangePicker>();
1419

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>';
19-
20-
registerIconFromText("appsIcon", Apps);
21-
registerIconFromText("binIcon", Bin);
22-
registerIconFromText("downArrowIcon", Down);
23-
registerIconFromText("uploadIcon", Upload);
24-
20+
const today: Date = new Date();
21+
let tomorrow: Date = new Date();
22+
tomorrow.setDate(today.getDate() + 1);
23+
2524
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 };
25+
registerIconFromText("appsIcon", Apps);
26+
registerIconFromText("binIcon", Bin);
27+
registerIconFromText("downArrowIcon", Down);
28+
registerIconFromText("uploadIcon", Upload);
3329
}, []);
3430

3531
const toggleWeekNumbers = () => {
@@ -53,12 +49,12 @@ export default function DrpSlots() {
5349
<span slot="helper-text">Helper text goes here.</span>
5450
</IgrDateRangePicker>
5551
<h3>Prefix & Suffix</h3>
56-
<IgrDateRangePicker id="prefixSuffix">
52+
<IgrDateRangePicker value={{start: today, end: tomorrow}}>
5753
<IgrIcon slot="prefix" name="downArrowIcon"></IgrIcon>
5854
<IgrIcon slot="suffix" name="uploadIcon"></IgrIcon>
5955
</IgrDateRangePicker>
6056
<h3>Clear & Calendar icons</h3>
61-
<IgrDateRangePicker id="icons">
57+
<IgrDateRangePicker value={{start: today, end: tomorrow}}>
6258
<IgrIcon slot="clear-icon" name="binIcon"></IgrIcon>
6359
<IgrIcon slot="calendar-icon" name="appsIcon"></IgrIcon>
6460
</IgrDateRangePicker>

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,14 @@ import {
88
} from "igniteui-react";
99
import "igniteui-webcomponents/themes/light/bootstrap.css";
1010

11-
export default function DrpOverview() {
12-
const UpPlane = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M120-120v-80h720v80H120Zm70-200L40-570l96-26 112 94 140-37-207-276 116-31 299 251 170-46q32-9 60.5 7.5T864-585q9 32-7.5 60.5T808-487L190-320Z"/></svg>';
13-
const DownPlane = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M120-120v-80h720v80H120Zm622-202L120-499v-291l96 27 48 139 138 39-35-343 115 34 128 369 172 49q25 8 41.5 29t16.5 48q0 35-28.5 61.5T742-322Z"/></svg>';
11+
const UpPlane = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M120-120v-80h720v80H120Zm70-200L40-570l96-26 112 94 140-37-207-276 116-31 299 251 170-46q32-9 60.5 7.5T864-585q9 32-7.5 60.5T808-487L190-320Z"/></svg>';
12+
const DownPlane = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M120-120v-80h720v80H120Zm622-202L120-499v-291l96 27 48 139 138 39-35-343 115 34 128 369 172 49q25 8 41.5 29t16.5 48q0 35-28.5 61.5T742-322Z"/></svg>';
1413

15-
registerIconFromText("UpPlaneIcon", UpPlane);
16-
registerIconFromText("DownPlaneIcon", DownPlane);
14+
export default function DrpOverview() {
15+
useEffect (() => {
16+
registerIconFromText("UpPlaneIcon", UpPlane);
17+
registerIconFromText("DownPlaneIcon", DownPlane);
18+
}, [])
1719

1820
return (
1921
<div className="container sample center">

0 commit comments

Comments
 (0)