Calendar working

package.json

@@ -29,6 +29,7 @@
     "prettier-plugin-svelte": "^2.2.0",
     "sass": "^1.38.0",
     "svelte": "^3.34.0",
+    "svelte-calendar": "^2.0.4",
     "svelte-check": "^2.0.0",
     "svelte-notifications": "^0.9.91",
     "svelte-preprocess": "^4.0.0",

src/lib/components/DateSlider.svelte

@@ -17,10 +17,7 @@
 	let num_pip_labels = 2;
 	$: pip_step = Math.round((full_range[1]-full_range[0])/(num_pip_labels-2))
 
-	export let dateRange = [
-		new Date().getTime() / MS_IN_DAY - 20,
-		Math.round( new Date().getTime() / MS_IN_DAY)
-	];
+	export let dateRange;
 
 	function pipFormatter(value: number, _ = undefined) {
 		return dateToString(value).split("-").slice(1,3).join("-")

src/lib/components/ResultHeading.svelte

@@ -1,8 +1,31 @@
 <script lang="ts">
 	import { dateToString } from '$lib/tools';
 	import NotificationRequester from '$lib/components/NotificationRequester.svelte';
+	import Datepicker from 'svelte-calendar/src/Components/Datepicker.svelte';
+
+	import { MS_IN_DAY } from '$lib/consts'
+
+
 
 	export let dates: [number, number];
+
+	let chosenStart: Date = new Date(dates[0]*MS_IN_DAY);
+	let chosenEnd: Date = new Date(dates[1]*MS_IN_DAY);
+	function timeFromDate (date: Date ): number  {
+
+		return Math.round(date.getTime() / MS_IN_DAY);
+	};
+
+	function chosenStartCallback() {
+		console.log("Start Chosen",chosenStart);
+		dates[0]=timeFromDate(chosenStart)
+	}
+	function chosenEndCallback() {
+		console.log("Start Chosen",chosenStart);
+		dates[1]=timeFromDate(chosenEnd)
+	}	
+
+	
 </script>
 
 {#if dates}
@@ -14,14 +37,19 @@
 
 		<h3 class="results-info__title">Showing Results</h3>
 		<div class="results-info__body">
-			<span class="results-info__body__marker"
-				>From
-				<span>{dateToString(dates[0])}</span>
-			</span>
-			<span class="results-info__body__marker"
-				>To
-				<span>{dateToString(dates[1])}</span>
-			</span>
+			<Datepicker bind:selected={chosenStart} on:dateSelected={chosenStartCallback} end={chosenEnd}>
+				<span class="results-info__body__marker"
+					>From
+					<span>{dateToString(dates[0])}</span>
+				</span>
+			</Datepicker>
+			<Datepicker bind:selected={chosenEnd} on:dateSelected={chosenEndCallback} start={chosenStart} end={new Date()}>
+				<span class="results-info__body__marker"
+					>To
+					<span>{dateToString(dates[1])}</span>
+				</span>
+			</Datepicker>
+
 		</div>
 	</div>
 {/if}
@@ -80,6 +108,7 @@
 				margin-right: 1em;
 
 				> span {
+					cursor: pointer;
 				}
 			}
 		}

src/routes/map.svelte

@@ -7,8 +7,12 @@
 	import SearchBox from '$lib/components/SearchBox.svelte';
 	import ResultHeading from '$lib/components/ResultHeading.svelte';
 	import moment, { Moment } from 'moment';
+	import { MS_IN_DAY } from "$lib/consts";
 
-	let dateValues: [number, number];
+	let dateValues: [number, number] = [
+		new Date().getTime() / MS_IN_DAY - 20,
+		Math.round( new Date().getTime() / MS_IN_DAY)
+	];
 	let geoData: Writable<null | GeoData> = writable(null);
 	let lastUpdate: Writable<Date> = writable();
 	let loiCount: Writable<number> = writable(0);
@@ -49,7 +53,7 @@
 
 <main>
 	<header class="header" id="header">
-		<ResultHeading dates={dateValues} />
+		<ResultHeading bind:dates={dateValues} />
 		<SearchBox geoData={$geoData} probablePlaces={(p) => (places = p?.map((e) => e.index))} />
 		<div class="copyright-notice">
 			<a class="copyright-notice__text" href="https://github.com/minhealthnz/nz-covid-data">

yarn.lock

@@ -1690,6 +1690,13 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+svelte-calendar@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/svelte-calendar/-/svelte-calendar-2.0.4.tgz#0084a9e7a0279f43aaae4b4a108b0c68a960a0ee"
+  integrity sha512-a9TGBCc17qrvgdO79py2whwvtgaZzOHiMMygc2aNyYzETQI/H60g3kmHyq+llDf+wSEFWqy0LO71rBrzBCfRFA==
+  dependencies:
+    timeUtils "^2.0.0"
+
 svelte-check@^2.0.0:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/svelte-check/-/svelte-check-2.2.4.tgz#103140eeb4bbe65721e023ab210566041abe7224"
@@ -1757,6 +1764,11 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
+timeUtils@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/timeUtils/-/timeUtils-2.0.0.tgz#b3ac3eaa8f6d47e9ca008c76e9fd5b0f0afc18c0"
+  integrity sha512-rk1y/5ix4HczK3q4caEvo2iIhgRIHL6g85sX2rPNse8sKUATzYEAX1jAYYsW139aAcn1b24jV4By0SLmosQVyA==
+
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"