Updated schedule post dropdown

app/javascript/gabsocial/features/compose/components/schedule_post_dropdown.js

@@ -11,6 +11,12 @@ const messages = defineMessages({
   schedule_status: { id: 'schedule_status.title', defaultMessage: 'Schedule Status' },
 });
 
+const DatePickerWrapper = ({ value, onClick }) => (
+  <button className="schedule-post-dropdown-wrapper" onClick={onClick}>
+    {value}
+  </button>
+);
+
 export default @injectIntl
 class SchedulePostDropdown extends React.PureComponent {
 
@@ -50,6 +56,7 @@ class SchedulePostDropdown extends React.PureComponent {
     const { open } = this.state;
 
     const datePickerDisabled = !isPro;
+    const withPortal = isMobile(window.innerWidth);
 
     return (
       <div className='schedule-post-dropdown'>
@@ -77,10 +84,11 @@ class SchedulePostDropdown extends React.PureComponent {
             timeFormat="p"
             timeIntervals={15}
             timeCaption="Time"
-            dateFormat="MMMM d, yyyy h:mm aa"
+            dateFormat="MMM d, yyyy h:mm aa"
             disabled={datePickerDisabled}
             showTimeSelect
-            startOpen
+            customInput={<DatePickerWrapper />}
+            withPortal={withPortal}
             popperModifiers={{
               offset: {
                 enabled: true,

app/javascript/styles/gabsocial/components.scss

@@ -5265,20 +5265,6 @@ noscript {
 	display: flex;
 	align-items: center;
 
-	&__datepicker {
-		margin-left: 4px;
-    border-radius: 4px;
-    border: 1px solid #ccc;
-    line-height: 22px;
-    padding-left: 6px;
-		width: 165px;
-
-		@media (max-width: 580px) {
-			width: 146px;
-			font-size: 10px;
-		}
-	}
-
 	.react-datepicker-popper {
 		z-index: 1000;
 	}
@@ -5318,4 +5304,24 @@ noscript {
 			margin-right: 10px;
 		}
 	}
-}
+}
+
+.schedule-post-dropdown-wrapper {
+	margin-left: 4px;
+	border-radius: 4px;
+	border: 1px solid darken($simple-background-color, 20%);
+	line-height: 22px;
+	padding-left: 6px;
+	text-align: left;
+	width: 145px;
+	height: 26px;
+	line-height: 20px;
+	color: $inverted-text-color;
+	background: $simple-background-color;
+
+	@media (max-width: 580px) {
+		width: 138px;
+		font-size: 10px;
+		padding-left: 2px;
+	}
+}