You can filter by date range for features from a map service. To learn more, visit the L.esri.dynamic in the API reference.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Filter by date range (map service)</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin=""> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script> <!-- Load Esri Leaflet from CDN --> <script src="https://unpkg.com/esri-leaflet@3.0.19/dist/esri-leaflet.js"></script> <!-- Load Esri Leaflet Vector from CDN --> <script src="https://unpkg.com/esri-leaflet-vector@4.3.2/dist/esri-leaflet-vector.js" crossorigin=""></script> <style> html, body, #map { padding: 0; margin: 0; height: 100%; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #323232; } </style> </head> <body> <style> #time-ranges { position: absolute; top: 10px; right: 10px; z-index: 1000; padding: 1em; background: white; } #time-ranges input { display: inline-block; border: 1px solid #999; font-size: 14px; border-radius: 4px; height: 28px; line-height: 28px; } #time-ranges input[type="submit"] { box-sizing: content-box; padding: 0 1em; text-transform: uppercase; color: white; background: #5c7db8; border-color: #5c7db8; } </style> <div id="map"></div> <div id="time-ranges" class="leaflet-bar"> <form action="#" id="form"> <label for="from"> From <input id="from" type="date" value="1970-01-01" name="from" > </label> <label for="to"> To <input id="to" type="date" value="1973-12-31" name="to" > </label> <input type="submit" value="Update"> </form> </div> <script> const accessToken = "YOUR_ACCESS_TOKEN"; const timeForm = document.getElementById("form"); const startTimeInput = document.getElementById("from"); const endTimeInput = document.getElementById("to"); const map = L.map("map").setView([39, -96], 3); L.esri.Vector.vectorBasemapLayer("arcgis/light-gray", { token: accessToken }).addTo(map); const earthquakes = L.esri .dynamicMapLayer({ url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Earthquakes_Since1970/MapServer", useCors: false, layers: [0], // for some reason this service in particular sometimes redirects json requests to a bogus IP address f: "image", from: new Date(startTimeInput.value), to: new Date(endTimeInput.value) }) .addTo(map); timeForm.addEventListener("submit", function updateTimeRange(e) { earthquakes.setTimeRange(new Date(startTimeInput.value), new Date(endTimeInput.value)); e.preventDefault(); }); </script> </body> </html>