diff --git a/app/javascript/gabsocial/features/compose/components/schedule_post_dropdown.js b/app/javascript/gabsocial/features/compose/components/schedule_post_dropdown.js
new file mode 100644
index 00000000..88650808
--- /dev/null
+++ b/app/javascript/gabsocial/features/compose/components/schedule_post_dropdown.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, defineMessages } from 'react-intl';
+import DatePicker from 'react-datepicker';
+import IconButton from '../../../components/icon_button';
+
+import "react-datepicker/dist/react-datepicker.css";
+
+const messages = defineMessages({
+ change_privacy: { id: 'privacy.change', defaultMessage: 'Adjust status privacy' },
+});
+
+export default @injectIntl
+class SchedulePostDropdown extends React.PureComponent {
+
+ static propTypes = {
+ date: PropTypes.instanceOf(Date),
+ setScheduledAt: PropTypes.func.isRequired,
+ intl: PropTypes.object.isRequired,
+ isPro: PropTypes.bool,
+ onOpenProUpgradeModal: PropTypes.func.isRequired,
+ };
+
+ state = {
+ open: false,
+ };
+
+ handleToggle = () => {
+ if (!this.props.isPro) {
+ return this.props.onOpenProUpgradeModal();
+ }
+
+ const newOpen = !this.state.open;
+ const newDate = newOpen ? new Date() : null;
+
+ this.handleSetDate(newDate);
+
+ this.setState({
+ open: newOpen
+ });
+ }
+
+ handleSetDate = (date) => {
+ this.props.setScheduledAt(date);
+ }
+
+ render () {
+ const { intl, date, isPro } = this.props;
+ const { open } = this.state;
+
+ const datePickerDisabled = !isPro;
+
+ return (
+
+
+
+
+ {
+ open &&
+
this.handleSetDate(date)}
+ timeFormat="HH:mm"
+ timeIntervals={15}
+ timeCaption="Time"
+ dateFormat="MMMM d, yyyy h:mm aa"
+ disabled={datePickerDisabled}
+ showTimeSelect
+ />
+ }
+
+ );
+ }
+
+}
diff --git a/app/javascript/gabsocial/features/compose/containers/schedule_post_dropdown_container.js b/app/javascript/gabsocial/features/compose/containers/schedule_post_dropdown_container.js
new file mode 100644
index 00000000..c0c4d04d
--- /dev/null
+++ b/app/javascript/gabsocial/features/compose/containers/schedule_post_dropdown_container.js
@@ -0,0 +1,22 @@
+import { connect } from 'react-redux';
+import SchedulePostDropdown from '../components/schedule_post_dropdown';
+import { changeScheduledAt } from '../../../actions/compose';
+import { openModal } from '../../../actions/modal';
+import { me } from '../../../initial_state';
+
+const mapStateToProps = state => ({
+ date: state.getIn(['compose', 'scheduled_at']),
+ isPro: state.getIn(['accounts', me, 'is_pro']),
+});
+
+const mapDispatchToProps = dispatch => ({
+ setScheduledAt (date) {
+ dispatch(changeScheduledAt(date));
+ },
+
+ onOpenProUpgradeModal() {
+ dispatch(openModal('PRO_UPGRADE'));
+ },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(SchedulePostDropdown);
diff --git a/app/javascript/styles/gabsocial/components.scss b/app/javascript/styles/gabsocial/components.scss
index 192b9c8b..e907d832 100644
--- a/app/javascript/styles/gabsocial/components.scss
+++ b/app/javascript/styles/gabsocial/components.scss
@@ -5260,6 +5260,30 @@ noscript {
color: #000;
}
}
+
+.schedule-post-dropdown {
+ display: flex;
+ align-items: center;
+
+ &__datepicker {
+ margin-left: 4px;
+ border-radius: 4px;
+ border: 1px solid #ccc;
+ line-height: 22px;
+ padding-left: 6px;
+ width: 165px;
+ }
+
+ .react-datepicker-popper {
+ z-index: 1000;
+ }
+
+ .react-datepicker__day--selected,
+ li.react-datepicker__time-list-item--selected {
+ background-color: $gab-brand-default !important;
+ }
+}
+
.pro-upgrade-modal {
&__content {
overflow-y: scroll !important;