feat(widget-datetime): add now to datepicker (#3484)

packages/netlify-cms-locales/src/en/index.js

@@ -153,6 +153,9 @@ const en = {
         headingFive: 'Heading 5',
         headingSix: 'Heading 6',
       },
+      datetime: {
+        now: 'Now',
+      },
     },
   },
   mediaLibrary: {

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;
   `,

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>
     );
   }