206 modify time facet not working properly (#213)

* add date time picker

* has to switch to date range because date picker doesn't work

Author: longshuicy

frontend/src/components/search/Search.tsx

@@ -1,5 +1,5 @@
 import React, {useState} from "react";
-import {DataSearch, MultiDropdownList, ReactiveList, SingleDropdownRange} from "@appbaseio/reactivesearch";
+import {DataSearch, DateRange, MultiDropdownList, ReactiveList, SingleDropdownRange} from "@appbaseio/reactivesearch";
 import {FormControlLabel, Grid, Switch, Typography} from "@mui/material";
 import Layout from "../Layout";
 import {SearchResult} from "./SearchResult";
@@ -107,28 +107,33 @@ export function Search() {
 											<SingleDropdownRange
 												componentId="downloadfilter"
 												dataField="download"
-												data={[{start: 0, label: "0 time and up"},
-													{start: 10, label: "10 times and up"},
+												data={[
+													{start: 0, label: "Download Times: All"},
+													{start: 10, label: "10 time and up"},
 													{start: 100, label: "100 times and up"},
+													{start: 1000, label: "1000 times and up"},
 												]}
-												placeholder="Download Times: All"
 												innerClass={{
 													select: "filter-select"
 												}}
+												defaultValue={"Download Times: All"}
 											/>
 										</Grid>
 										<Grid item xs={12} sm={4} md={4} lg={4}>
-											<SingleDropdownRange
+											<DateRange
 												componentId="modifyfilter"
-												dataField="modified"
-												data={[{start: 0, label: "0 time and up"},
-													{start: 10, label: "10 times and up"},
-													{start: 100, label: "100 times and up"},
-
-												]}
-												placeholder="Modify Times: All"
-												innerClass={{
-													select: "filter-select"
+												dataField="created"
+												focused={false}
+												autoFocusEnd={true}
+												numberOfMonths={1}
+												queryFormat="date_time_no_millis"
+												showClear={true}
+												showFilter={true}
+												filterLabel="Date"
+												URLParams={false}
+												placeholder={{
+												  start: "From Date",
+												  end: "To Date"
 												}}
 											/>
 										</Grid>

frontend/src/styles/main.css

@@ -105,6 +105,30 @@ body {
     font-weight: bold;
 }
 
+.DayPickerInput{
+	border-radius: 0;
+	border-bottom: 1px solid #868E96!important;
+}
+
+.DayPickerInput > input{
+	font-weight: bold;
+	background:transparent!important;
+}
+
+.DayPickerInput > input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: #424242;
+  opacity: 1; /* Firefox */
+}
+
+.DayPickerInput-OverlayWrapper{
+	font-size:16px;
+}
+
+[class*="-DateContainer-DateContainer"] > div:first-of-type > div{
+	border: none!important;
+	background: transparent!important;
+}
+
 mark{
 	font-weight: bold;
 	background: inherit;

frontend/src/utils/common.js

@@ -61,7 +61,8 @@ export function dataURItoFile(dataURI) {
 }
 
 export function parseDate(dateString) {
-	const options = { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" };
+	const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+	const options = { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" , timeZone: timeZone };
 	const mydate = new Date(dateString);
 	return mydate.toLocaleString("en-US", options);
 }