Merge pull request #118 from smiclea/disable-dates

Disable old dates in scheduler 'Expire Date' field

src/components/molecules/DatetimePicker/DatetimePicker.jsx

@@ -52,6 +52,7 @@ class DatetimePicker extends React.Component {
   static propTypes = {
     value: PropTypes.object,
     onChange: PropTypes.func.isRequired,
+    isValidDate: PropTypes.func,
     timezone: PropTypes.string,
   }
 
@@ -77,6 +78,14 @@ class DatetimePicker extends React.Component {
     window.removeEventListener('mousedown', this.handlePageClick, false)
   }
 
+  isValidDate(currentDate, selectedDate) {
+    if (!this.props.isValidDate) {
+      return true
+    }
+
+    return this.props.isValidDate(currentDate, selectedDate)
+  }
+
   handlePageClick(e) {
     let path = DomUtils.getEventPath(e)
 
@@ -128,6 +137,7 @@ class DatetimePicker extends React.Component {
           dateFormat="DD/MM/YYYY"
           timeFormat="hh:mm A"
           locale="en-gb"
+          isValidDate={(currentDate, selectedDate) => this.isValidDate(currentDate, selectedDate)}
         />
       </Wrapper>
     )

src/components/molecules/DatetimePicker/story.jsx

@@ -14,11 +14,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import moment from 'moment'
 import DatetimePicker from './DatetimePicker'
 
 class Wrapper extends React.Component {
   render() {
-    return <div style={{ marginLeft: '100px' }}><DatetimePicker onChange={() => { }} /></div>
+    return <div style={{ marginLeft: '100px' }}><DatetimePicker {...this.props} onChange={() => { }} /></div>
   }
 }
 
@@ -26,3 +27,6 @@ storiesOf('DatetimePicker', module)
   .add('default', () => (
     <Wrapper />
   ))
+  .add('disabled dates', () => (
+    <Wrapper isValidDate={currentDate => currentDate.isAfter(moment().subtract(1, 'minute'))} />
+  ))

src/components/molecules/DatetimePicker/style.js

@@ -147,7 +147,7 @@ const style = css`
       }
     }
 
-    .rdtDay.rdtOld, .rdtDay.rdtNew {
+    .rdtDay.rdtOld, .rdtDay.rdtDisabled, .rdtDay.rdtNew {
       color: ${Palette.grayscale[3]};
     }
 

src/components/organisms/Schedule/Schedule.jsx

@@ -433,6 +433,7 @@ class Schedule extends React.Component {
         value={date}
         timezone={this.props.timezone}
         onChange={date => { this.handleExpirationDateChange(s, date) }}
+        isValidDate={date => date.isAfter(moment())}
       />
     )
   }