Fix field with no time slots provided

Also adds an extra example so that there's one with and without time
slots.

src/components/FieldDateInput/DateInput.js

@@ -5,7 +5,7 @@
  * N.B. *isOutsideRange* in defaultProps is defining what dates are available to booking.
  */
 import React, { Component } from 'react';
-import { bool, func, instanceOf, shape, string } from 'prop-types';
+import { bool, func, instanceOf, shape, string, arrayOf } from 'prop-types';
 import {
   SingleDatePicker,
   isInclusivelyAfterDay,
@@ -16,6 +16,7 @@ import { intlShape, injectIntl } from 'react-intl';
 import classNames from 'classnames';
 import moment from 'moment';
 import config from '../../config';
+import { propTypes } from '../../util/types';
 
 import NextMonthIcon from './NextMonthIcon';
 import PreviousMonthIcon from './PreviousMonthIcon';
@@ -161,7 +162,7 @@ class DateInputComponent extends Component {
       ? day => {
           return !timeSlots.find(timeSlot => isSameDay(day, moment(timeSlot.attributes.start)));
         }
-      : null;
+      : () => false;
 
     const placeholder = placeholderText || intl.formatMessage({ id: 'FieldDateInput.placeholder' });
 
@@ -203,6 +204,7 @@ DateInputComponent.defaultProps = {
   className: null,
   useMobileMargins: false,
   ...defaultProps,
+  timeSlots: null,
 };
 
 DateInputComponent.propTypes = {
@@ -226,6 +228,7 @@ DateInputComponent.propTypes = {
   value: shape({
     date: instanceOf(Date),
   }),
+  timeSlots: arrayOf(propTypes.timeSlot),
 };
 
 export default injectIntl(DateInputComponent);

src/components/FieldDateInput/FieldDateInput.example.js

@@ -21,6 +21,7 @@ const FormComponent = props => (
     {...props}
     render={fieldRenderProps => {
       const {
+        style,
         form,
         handleSubmit,
         onChange,
@@ -36,6 +37,7 @@ const FormComponent = props => (
 
       return (
         <form
+          style={style}
           onSubmit={e => {
             e.preventDefault();
             handleSubmit(e);
@@ -52,15 +54,41 @@ const FormComponent = props => (
   />
 );
 
-const defaultFormName = 'FieldDateInputExampleForm';
-
 export const Empty = {
+  component: FormComponent,
+  props: {
+    style: { marginBottom: '140px' },
+    dateInputProps: {
+      name: 'bookingDate',
+      useMobileMargins: false,
+      id: `EmptyDateInputForm.bookingDate`,
+      label: 'Date',
+      placeholderText: moment().format('ddd, MMMM D'),
+      format: null,
+      validate: composeValidators(required('Required'), bookingDateRequired('Date is not valid')),
+      onBlur: () => console.log('onBlur called from DateInput props.'),
+      onFocus: () => console.log('onFocus called from DateInput props.'),
+    },
+    onChange: formState => {
+      const { date } = formState.values;
+      if (date) {
+        console.log('Changed to', moment(date).format('L'));
+      }
+    },
+    onSubmit: values => {
+      console.log('Submitting a form with values:', values);
+    },
+  },
+  group: 'custom inputs',
+};
+
+export const WithAvailableTimeSlots = {
   component: FormComponent,
   props: {
     dateInputProps: {
       name: 'bookingDate',
       useMobileMargins: false,
-      id: `${defaultFormName}.bookingDate`,
+      id: `AvailableTimeSlotsDateInputForm.bookingDate`,
       label: 'Date',
       placeholderText: moment().format('ddd, MMMM D'),
       format: null,

src/components/FieldDateInput/FieldDateInput.js

@@ -78,7 +78,7 @@ FieldDateInputComponent.defaultProps = {
   id: null,
   label: null,
   placeholderText: null,
-  timeSlots: [],
+  timeSlots: null,
 };
 
 FieldDateInputComponent.propTypes = {