Attempting to transition my Calcite Date Picker to 1.4.2 from 1.0.0-beta.83

jlejeune · ‎08-14-2023

Hello, I am attempting to transition my calcite date picker component to 1.4.2 from 1.0.0-beta.83 and I cannot for the life of me figure it out. I can usually figure out what I need using the sample creator despite a lack of good documentation and examples, but the sample creator seems to break when proximity-selection-disabled is true. Here is the HTML I had running previously:

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <script type="module" src=https://js.arcgis.com/calcite-components/1.0.0-beta.83/calcite.esm.js></script>
    <link rel="stylesheet" type="text/css" href=https://js.arcgis.com/calcite-components/1.0.0-beta.83/calcite.css />
</head>

<body>
    <calcite-date-picker id="calendar" end="2021-01-02" label="calendar" layout="vertical"
		max="2500-01-01" min="1900-01-01" range scale="s" proximity-selection-disabled="true" start="2021-01-01"></calcite-date-picker>
</body>

</html>

Any help would be appreciated.

KittyHurley · ‎08-14-2023

Hello @jlejeune, great question. There are a few attribute/property changes from the previously named "start" and "end" attributes to "value" or "valueAsDate".

For Date Pickers with "range", an array of date strings can be added to the component, where the array is added via JavaScript (non-range examples can be modified with the attribute in HTML).

For instance, see the code below, also in this Codepen sample:

<calcite-date-picker id="calendar" range proximity-selection-disabled scale="s" max="2500-01-01" min="1900-01-01"></calcite-date-picker>

<script>
document.querySelector("calcite-date-picker").value = ["2021-01-01", "2021-01-02"];
</script>