Alert seems to conflict with entering the year on a Date Picker
by
I'm new to Calcite and have been having trouble with entering a year in the Date Picker when I use an alert. If an alert has been open, than the Date Picker year entry box doesn't seem to function properly. Once the user selects a date after the incorrect year appears than the date picker works again.
Here is a codepen using the calcite sample with a datepicker and an alert. Thank you and I appreciate any help on this.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Calcite Components: Create a mapping app</title>
<script src="https://js.arcgis.com/calcite-components/1.2.0/calcite.esm.js" type="module"></script>
<link rel="stylesheet" href="https://js.arcgis.com/calcite-components/1.2.0/calcite.css" />
<script src="https://js.arcgis.com/4.26/"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />
</head>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
body {
display: flex;
}
calcite-loader {
align-self: center;
justify-self: center;
}
#header-title {
margin-left: 1rem;
margin-right: 1rem;
}
#info-content {
padding: 0.75rem;
}
calcite-rating {
margin-top: 0.25rem;
}
</style>
<body>
<calcite-loader></calcite-loader>
<calcite-shell content-behind hidden>
<h2 id="header-title" slot="header">
<!-- Dynamically populated -->
</h2>
<calcite-shell-panel slot="panel-start" detached>
<calcite-action-bar slot="action-bar">
<calcite-action data-action-id="information" icon="information" text="Information"></calcite-action>
</calcite-action-bar>
<!-- Map-specific panels (each one provides a div for a ArcGIS Maps SDK for JavaScript widget) -->
<!-- Info panel (populates with info from the web map) -->
<calcite-panel heading="Details" data-panel-id="information" hidden>
<div id="info-content">
<calcite-date-picker id="noRangePicker"></calcite-date-picker>
</div>
</calcite-panel>
</calcite-shell-panel>
<div id="viewDiv"></div>
</calcite-shell>
<!--initial alert that provides liability info-->
<calcite-alert kind="info" open icon auto-close auto-close-duration="fast" placement="bottom"
label="Info Liability" id="alert-info-liability">
<div slot="message">
This online parcel map is for reference only and no liability is
assumed for any inaccuracies, incorrect data or variations from an actual survey.
</div>
</calcite-alert>
</body>
<script>
require([
"esri/WebMap",
"esri/views/MapView",
], function(WebMap, MapView) {
const webmapId = new URLSearchParams(window.location.search).get("webmap")
?? "210c5b77056846808c7a5ce93920be81";
const map = new WebMap({
portalItem: {
id: webmapId
}
});
const view = new MapView({
map,
container: "viewDiv",
padding: {
left: 49
}
});
view.ui.move("zoom", "top-left");
map.when(() => {
const { title, description, thumbnailUrl, avgRating } = map.portalItem;
document.querySelector("#header-title").textContent = title;
let activeWidget;
const handleActionBarClick = ({ target }) => {
if (target.tagName !== "CALCITE-ACTION") {
return;
}
if (activeWidget) {
document.querySelector(`[data-action-id=${activeWidget}]`).active = false;
document.querySelector(`[data-panel-id=${activeWidget}]`).hidden = true;
}
const nextWidget = target.dataset.actionId;
if (nextWidget !== activeWidget) {
document.querySelector(`[data-action-id=${nextWidget}]`).active = true;
document.querySelector(`[data-panel-id=${nextWidget}]`).hidden = false;
activeWidget = nextWidget;
} else {
activeWidget = null;
}
};
document.querySelector("calcite-action-bar").addEventListener("click", handleActionBarClick);
let actionBarExpanded = false;
document.addEventListener("calciteActionBarToggle", event => {
actionBarExpanded = !actionBarExpanded;
view.padding = {
left: actionBarExpanded ? 150 : 45
};
});
document.querySelector("calcite-shell").hidden = false;
document.querySelector("calcite-loader").hidden = true;
});
});
</script>
</html>
1 Solution
Accepted Solutions
