Add an unset button to datetime picker

src/views/assets/locales.ts

@@ -36,6 +36,7 @@ export default new LocalizedStrings({
         editor_parentNoParentVal: "No parent",
         editor_deadline: "Deadline:",
         editor_reminder: "Reminder:",
+        editor_unsetTp: "Unset",
         task_toggleBtnCompleted: "Completed",
         task_toggleBtnPending: "Pending",
         app_versionString: `${appFullName} v${appVersion} by ${appAuthor}`,

src/views/components/dateTimePicker.tsx

@@ -7,6 +7,7 @@ import {
     DateFormat,
     TimeFormat,
 } from "../../helpers/datetime";
+import strings from "../assets/locales";
 
 /** Helper for `new Date()`. */
 const FDate = (v: number | undefined) => new Date(v || 0);
@@ -46,9 +47,10 @@ export class DateTimePicker extends React.Component<Props, State> {
         const date = parse(e.currentTarget.value, TimeFormat, this.state.date);
         this.setState({ date });
     };
-    // TODO: add an "Unset" button
+    unsetDate = () => this.setState({ date: FDate(0) });
     render = () => {
         let date, time;
+        // date/time input sometimes reports weird values that are out of range
         try {
             date = format(this.state.date, DateFormat);
             time = format(this.state.date, TimeFormat);
@@ -70,6 +72,11 @@ export class DateTimePicker extends React.Component<Props, State> {
                     value={time}
                     required={this.props.timeRequired}
                 />
+                <input
+                    type="button"
+                    value={strings.editor_unsetTp}
+                    onClick={this.unsetDate}
+                />
             </div>
         );
     };