Allow to set time in release date and display it under additional options

package.json

@@ -53,7 +53,7 @@
     "electron-updater": "^4.2.4",
     "express": "^4.17.1",
     "if-env": "^1.0.4",
-    "react-date-picker": "^8.0.7",
+    "react-datetime-picker": "^3.1.0",
     "remove-markdown": "^0.3.0",
     "tempy": "^0.6.0",
     "videojs-logo": "^2.1.4"

ui/component/publishAdditionalOptions/view.jsx

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import usePersistedState from 'effects/use-persisted-state';
 import { FormField } from 'component/common/form';
 import Button from 'component/button';
+import PublishReleaseDate from 'component/publishReleaseDate';
 import LicenseType from './license-type';
 import Card from 'component/common/card';
 import SUPPORTED_LANGUAGES from 'constants/supported_languages';
@@ -111,6 +112,7 @@ function PublishAdditionalOptions(props: Props) {
 
   return (
     <Card
+      className="card--enable-overflow"
       actions={
         <React.Fragment>
           {!hideSection && (
@@ -151,12 +153,14 @@ function PublishAdditionalOptions(props: Props) {
               )} */}
               {/* @endif */}
               <div className="section">
+                <PublishReleaseDate />
+
                 <FormField
                   label={__('Language')}
                   type="select"
                   name="content_language"
                   value={language}
-                  onChange={event => updatePublishForm({ language: event.target.value })}
+                  onChange={(event) => updatePublishForm({ language: event.target.value })}
                 >
                   {Object.entries(SUPPORTED_LANGUAGES).map(([langkey, langName]) => (
                     // $FlowFixMe
@@ -176,12 +180,12 @@ function PublishAdditionalOptions(props: Props) {
                       licenseUrl: newLicenseUrl,
                     })
                   }
-                  handleLicenseDescriptionChange={event =>
+                  handleLicenseDescriptionChange={(event) =>
                     updatePublishForm({
                       otherLicenseDescription: event.target.value,
                     })
                   }
-                  handleLicenseUrlChange={event => updatePublishForm({ licenseUrl: event.target.value })}
+                  handleLicenseUrlChange={(event) => updatePublishForm({ licenseUrl: event.target.value })}
                 />
               </div>
             </div>

ui/component/publishForm/view.jsx

@@ -19,8 +19,6 @@ import PublishDescription from 'component/publishDescription';
 import PublishPrice from 'component/publishPrice';
 import PublishFile from 'component/publishFile';
 import PublishBid from 'component/publishBid';
-import PublishReleaseDate from 'component/publishReleaseDate';
-import PublishName from 'component/publishName';
 import PublishAdditionalOptions from 'component/publishAdditionalOptions';
 import PublishFormErrors from 'component/publishFormErrors';
 import SelectThumbnail from 'component/selectThumbnail';
@@ -415,11 +413,6 @@ function PublishForm(props: Props) {
         }
       />
 
-      {!publishing && (
-        <div className={classnames({ 'card--disabled': formDisabled })}>
-          <PublishReleaseDate />
-        </div>
-      )}
       {!publishing && (
         <div className={classnames({ 'card--disabled': formDisabled })}>
           {mode === PUBLISH_MODES.FILE && <PublishDescription disabled={formDisabled} />}

ui/component/publishReleaseDate/view.jsx

@@ -1,7 +1,6 @@
 // @flow
 import React, { useCallback } from 'react';
-import DatePicker from 'react-date-picker';
-import Card from 'component/common/card';
+import DateTimePicker from 'react-datetime-picker';
 
 type Props = {
   releaseTime: ?number,
@@ -21,22 +20,18 @@ const PublishReleaseDate = (props: Props) => {
   }, []);
 
   return (
-    <Card
-      className="card--enable-overflow"
-      actions={
-        <div>
-          <label className="form-field-date-picker-label">Release date</label>
-          <DatePicker
-            className="date-picker-input"
-            calendarClassName="form-field-date-picker"
-            onChange={onChange}
-            value={dateOrToday(releaseTime)}
-            maxDate={maxDate}
-            format="dd/MM/y"
-          />
-        </div>
-      }
-    />
+    <div className="form-field-date-picker">
+      <label className="form-field-date-picker-label">Release date</label>
+      <DateTimePicker
+        className="date-picker-input"
+        calendarClassName="form-field-calendar"
+        onChange={onChange}
+        value={dateOrToday(releaseTime)}
+        maxDate={maxDate}
+        format="y-MM-dd h:mm a"
+        disableClock
+      />
+    </div>
   );
 };
 

ui/modal/modalPublishPreview/view.jsx

@@ -179,7 +179,7 @@ class ModalPublishPreview extends React.PureComponent<Props> {
                       {this.createRow(__('Deposit'), depositValue)}
                       {this.createRow(__('Price'), priceValue)}
                       {this.createRow(__('Language'), language)}
-                      {this.createRow(__('Release Date'), moment(release_time).format('MMMM Do, YYYY'))}
+                      {this.createRow(__('Release Date'), moment(release_time).format('MMMM Do, YYYY - h:mm a'))}
                       {this.createRow(__('License'), licenseValue)}
                       {this.createRow(__('Tags'), tagsValue)}
                     </tbody>

ui/scss/component/_form-field.scss

@@ -462,16 +462,22 @@ fieldset-section {
 }
 
 .date-picker-input {
-  .react-date-picker__wrapper {
+  font-weight: bold;
+
+  .react-datetime-picker__wrapper {
     border: 0;
   }
 }
 
+.form-field-date-picker {
+  margin-bottom: var(--spacing-l);
+}
+
 .form-field-date-picker-label {
   display: block;
 }
 
-.form-field-date-picker {
+.form-field-calendar {
   border-radius: var(--card-radius);
   border: 1px solid var(--color-border);
 }

yarn.lock

@@ -1956,7 +1956,7 @@
     "@webassemblyjs/wast-parser" "1.8.5"
     "@xtuc/long" "4.2.2"
 
-"@wojtekmaj/date-utils@^1.0.2", "@wojtekmaj/date-utils@^1.0.3":
+"@wojtekmaj/date-utils@^1.0.0", "@wojtekmaj/date-utils@^1.0.2", "@wojtekmaj/date-utils@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@wojtekmaj/date-utils/-/date-utils-1.0.3.tgz#2dcfd92881425c5923e429c2aec86fb3609032a1"
   integrity sha512-1VPkkTBk07gMR1fjpBtse4G+oJqpmE+0gUFB0dg3VIL7qJmUVaBoD/vlzMm/jNeOPfvlmerl1lpnsZyBUFIRuw==
@@ -9255,6 +9255,15 @@ react-calendar@^3.3.1:
     merge-class-names "^1.1.1"
     prop-types "^15.6.0"
 
+react-clock@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-clock/-/react-clock-3.0.0.tgz#0d29f8e682ef516574061d1d24b1a286cb2da89b"
+  integrity sha512-D3K82D3YGcDtzxZCfiACLcDTL8cJXSgpdrzTY9ff3H5vflxlLzTSLF8apZRo6JZzOFrZQvw5mrS7TkQzj9nG0A==
+  dependencies:
+    "@wojtekmaj/date-utils" "^1.0.0"
+    merge-class-names "^1.1.1"
+    prop-types "^15.6.0"
+
 react-compound-slider@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/react-compound-slider/-/react-compound-slider-2.5.0.tgz#99771a3397f4ab00aa2a37f8410da87e6ca2449b"
@@ -9286,6 +9295,22 @@ react-date-picker@^8.0.7:
     react-fit "^1.0.3"
     update-input-width "^1.1.1"
 
+react-datetime-picker@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/react-datetime-picker/-/react-datetime-picker-3.1.0.tgz#109cc062ff666948713f7b45833b323c73975619"
+  integrity sha512-osC97vzEEi3al9Bo+V+0+SCcDIhVVXTmSngeW4NL/yB9AsNf0ShF5tEmPKkGoSQBBW3GGthb4LOQzaOEzu+FXw==
+  dependencies:
+    "@wojtekmaj/date-utils" "^1.0.3"
+    get-user-locale "^1.2.0"
+    make-event-props "^1.1.0"
+    merge-class-names "^1.1.1"
+    prop-types "^15.6.0"
+    react-calendar "^3.3.1"
+    react-clock "^3.0.0"
+    react-date-picker "^8.0.7"
+    react-fit "^1.0.3"
+    react-time-picker "^4.1.0"
+
 react-dom@^16.8.2:
   version "16.13.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.0.tgz#cdde54b48eb9e8a0ca1b3dc9943d9bb409b81866"
@@ -9413,6 +9438,20 @@ react-spring@^8.0.20, react-spring@^8.0.27:
     "@babel/runtime" "^7.3.1"
     prop-types "^15.5.8"
 
+react-time-picker@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/react-time-picker/-/react-time-picker-4.1.2.tgz#7e977ba546a2313d622a536494cec6e4d727b57b"
+  integrity sha512-O2lSyv9j11YcpVuxQnJnqanaYiJ7yyCl7/p6jS6HHcR0i+plX95Ko105CKyJeAd40I6LxHqfweR+9DIL2AFmYg==
+  dependencies:
+    "@wojtekmaj/date-utils" "^1.0.0"
+    get-user-locale "^1.2.0"
+    make-event-props "^1.1.0"
+    merge-class-names "^1.1.1"
+    prop-types "^15.6.0"
+    react-clock "^3.0.0"
+    react-fit "^1.0.3"
+    update-input-width "^1.1.1"
+
 react@^16.8.2:
   version "16.13.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.0.tgz#d046eabcdf64e457bbeed1e792e235e1b9934cf7"