diff --git a/apps/web/src/components/properties/index.js b/apps/web/src/components/properties/index.js
index f0c2ea82aa..5343819e47 100644
--- a/apps/web/src/components/properties/index.js
+++ b/apps/web/src/components/properties/index.js
@@ -17,9 +17,9 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see .
*/
-import React, { useCallback, useEffect, useState } from "react";
+import React, { forwardRef, useCallback, useEffect, useState } from "react";
import * as Icon from "../icons";
-import { Flex, Text } from "@theme-ui/components";
+import { Flex, Text, Input } from "@theme-ui/components";
import { useStore, store } from "../../stores/editor-store";
import { COLORS } from "../../common/constants";
import { db } from "../../common/db";
@@ -37,6 +37,8 @@ import TimeAgo from "../time-ago";
import Attachment from "../attachment";
import { formatBytes } from "../../utils/filename";
import { getTotalSize } from "../../common/attachments";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
const tools = [
{ key: "pin", property: "pinned", icon: Icon.Pin, label: "Pin" },
@@ -65,7 +67,7 @@ const metadataItems = [
{
key: "dateCreated",
label: "Created at",
- value: (date) => formatDate(date || Date.now())
+ value: (date) => date || Date.now()
},
{
key: "dateEdited",
@@ -78,6 +80,7 @@ function Properties(props) {
const { onOpenPreviewSession } = props;
const [versionHistory, setVersionHistory] = useState([]);
+ const [startDate, setStartDate] = useState();
const toggleProperties = useStore((store) => store.toggleProperties);
const isFocusMode = useAppStore((store) => store.isFocusMode);
@@ -185,16 +188,36 @@ function Properties(props) {
justifyContent: "space-between"
}}
>
-
- {item.label}
-
- {item.value(session[item.key])}
+ {item.label}
+ {item.key === "dateCreated" ? (
+ }
+ showMonthDropdown
+ showYearDropdown
+ selected={startDate || item.value(session[item.key])}
+ onChange={async (date) => {
+ setStartDate(date);
+ await noteStore.dateCreated(sessionId, date);
+ }}
+ dropdownMode="select"
+ timeInputLabel="Time:"
+ dateFormat="MMM d, yyyy, h:mm aa"
+ showTimeInput
+ >
+ ) : (
+
+ {item.value(session[item.key])}
+
+ )}
))}
{!isPreviewMode && (
@@ -433,3 +456,21 @@ function Card({ title, subtitle, button, children }) {
);
}
+
+const CustomInput = forwardRef((props, refs) => {
+ return (
+
+ );
+});
diff --git a/apps/web/src/stores/note-store.js b/apps/web/src/stores/note-store.js
index 937818b0e5..3ba536438f 100644
--- a/apps/web/src/stores/note-store.js
+++ b/apps/web/src/stores/note-store.js
@@ -129,6 +129,12 @@ class NoteStore extends BaseStore {
});
};
+ dateCreated = async (id, dateCreated) => {
+ await db.notes.add({ id, dateCreated });
+ this._syncEditor(id, "dateCreated", dateCreated);
+ this.refresh();
+ };
+
lock = async (id) => {
await Vault.lockNote(id);
this.refreshItem(id);