From 79b8469337dade3bd7472b3f42b826efc7e0987d Mon Sep 17 00:00:00 2001
From: Tom Claes <tom.claes82@gmail.com>
Date: Sun, 12 Apr 2020 17:17:01 +0200
Subject: [PATCH] feat(widget-datetime): add now to datepicker (#3484)

---
 packages/netlify-cms-locales/src/en/index.js  |  3 +++
 packages/netlify-cms-ui-default/src/styles.js |  1 +
 .../src/DateTimeControl.js                    | 27 ++++++++++++++++++-
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/netlify-cms-locales/src/en/index.js b/packages/netlify-cms-locales/src/en/index.js
index 5557129a..ef4c48d4 100644
--- a/packages/netlify-cms-locales/src/en/index.js
+++ b/packages/netlify-cms-locales/src/en/index.js
@@ -153,6 +153,9 @@ const en = {
         headingFive: 'Heading 5',
         headingSix: 'Heading 6',
       },
+      datetime: {
+        now: 'Now',
+      },
     },
   },
   mediaLibrary: {
diff --git a/packages/netlify-cms-ui-default/src/styles.js b/packages/netlify-cms-ui-default/src/styles.js
index 5bc1d1f2..e297edc2 100644
--- a/packages/netlify-cms-ui-default/src/styles.js
+++ b/packages/netlify-cms-ui-default/src/styles.js
@@ -200,6 +200,7 @@ const buttons = {
     padding: 0 24px 0 14px;
   `,
   small: css`
+    font-size: 13px;
     height: 23px;
     line-height: 23px;
   `,
diff --git a/packages/netlify-cms-widget-datetime/src/DateTimeControl.js b/packages/netlify-cms-widget-datetime/src/DateTimeControl.js
index 8b82d5a4..0b8ffebb 100644
--- a/packages/netlify-cms-widget-datetime/src/DateTimeControl.js
+++ b/packages/netlify-cms-widget-datetime/src/DateTimeControl.js
@@ -5,6 +5,7 @@ import { jsx, css } from '@emotion/core';
 import reactDateTimeStyles from 'react-datetime/css/react-datetime.css';
 import DateTime from 'react-datetime';
 import moment from 'moment';
+import { buttons } from 'netlify-cms-ui-default';
 
 export default class DateTimeControl extends React.Component {
   static propTypes = {
@@ -106,13 +107,14 @@ export default class DateTimeControl extends React.Component {
   };
 
   render() {
-    const { forID, value, classNameWrapper, setActiveStyle } = this.props;
+    const { forID, value, classNameWrapper, setActiveStyle, t } = this.props;
     const { format, dateFormat, timeFormat } = this.formats;
 
     return (
       <div
         css={css`
           ${reactDateTimeStyles};
+          position: relative;
         `}
       >
         <DateTime
@@ -124,6 +126,29 @@ export default class DateTimeControl extends React.Component {
           onBlur={this.onBlur}
           inputProps={{ className: classNameWrapper, id: forID }}
         />
+        <div
+          css={css`
+            position: absolute;
+            right: 20px;
+            transform: translateY(-40px);
+            width: fit-content;
+            z-index: 1;
+          `}
+        >
+          <button
+            css={css`
+              ${buttons.button}
+              ${buttons.default}
+              ${buttons.lightBlue}
+              ${buttons.small}
+          `}
+            onClick={() => {
+              this.handleChange(moment());
+            }}
+          >
+            {t('editor.editorWidgets.datetime.now')}
+          </button>
+        </div>
       </div>
     );
   }