diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index d1c5a5058bb6a45a975751786500016967d40731..eab3264bb9be88839b147407100173e2cd586412 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -400,20 +400,22 @@ const dateRangeControls = function(elem, siteno) {
 
     const customDateValidationContainer = customDateContainer.append('div')
         .attr('class', 'usa-alert usa-alert--warning usa-alert--validation')
+        .attr('id', 'custom-date-alert-container')
         .attr('hidden', true);
 
     const dateAlertBody = customDateValidationContainer.append('div')
-        .attr('class', 'usa-alert__body');
+        .attr('class', 'usa-alert__body')
+        .attr('id', 'custom-date-alert');
 
     dateAlertBody.append('h3')
         .attr('class', 'usa-alert__heading')
         .text('Date requirements');
 
     const startDateContainer = customDateContainer.append('div')
-        .attr('id', 'start-date-input');
+        .attr('id', 'start-date-input-container');
 
     const endDateContainer = customDateContainer.append('div')
-        .attr('id', 'end-date-input');
+        .attr('id', 'end-date-input-container');
 
     startDateContainer.append('label')
         .attr('class', 'usa-label')
@@ -448,6 +450,7 @@ const dateRangeControls = function(elem, siteno) {
 
     submitContainer.append('button')
         .attr('class', 'usa-button')
+        .attr('id', 'custom-date-submit')
         .text('Submit')
         .on('click', dispatch( function() {
             const userSpecifiedStart = customStartDate.node().value;
@@ -461,6 +464,7 @@ const dateRangeControls = function(elem, siteno) {
                 dateAlertBody.selectAll('p').remove();
                 dateAlertBody.append('p')
                     .text('The start date must precede the end date.');
+                customDateValidationContainer.attr('hidden', null);
             } else {
                 customDateValidationContainer.attr('hidden', true);
                 return Actions.getUserRequestedDataForDateRange(
diff --git a/assets/src/scripts/components/hydrograph/index.spec.js b/assets/src/scripts/components/hydrograph/index.spec.js
index 4280c9183a4f20ce598bc9a7b54a85157078823c..4c82ab7d022122405d845dd1cdc9156f1c8300fc 100644
--- a/assets/src/scripts/components/hydrograph/index.spec.js
+++ b/assets/src/scripts/components/hydrograph/index.spec.js
@@ -419,9 +419,11 @@ describe('Hydrograph charting module', () => {
 
         it('Expects the date range controls to be created', () => {
             let dateRangeContainer = select(graphNode).select('#ts-daterange-select-container');
+            let customDateDiv = select(graphNode).select('div#ts-customdaterange-select-container');
 
             expect(dateRangeContainer.size()).toBe(1);
             expect(dateRangeContainer.selectAll('input[type=radio]').size()).toBe(4);
+            expect(customDateDiv.attr('hidden')).toBe('true');
         });
 
         it('Expects to retrieve the extended time series when the radio buttons are change', () => {
@@ -432,6 +434,54 @@ describe('Hydrograph charting module', () => {
 
             expect(Actions.retrieveExtendedTimeSeries).toHaveBeenCalledWith('12345678', 'P1Y');
         });
+
+        it('Expects to show the date range from when the Custom radio is selected', () => {
+            let customRadio = select(graphNode).select('#custom-date-range');
+            customRadio.attr('checked', true);
+            customRadio.dispatch('change');
+
+            let customDateDiv = select(graphNode).select('div#ts-customdaterange-select-container');
+            expect(customDateDiv.attr('hidden')).toBeNull();
+
+            let customDateAlertDiv = select(graphNode).select('#custom-date-alert-container');
+            expect(customDateAlertDiv.attr('hidden')).toBe('true');
+        });
+
+        it('Expects an alert to be thrown if custom dates are not provided.', () => {
+             let submitButton = select(graphNode).select('#custom-date-submit');
+             submitButton.dispatch('click');
+
+             let customDateAlertDiv = select(graphNode).select('#custom-date-alert');
+             expect(customDateAlertDiv.attr('hidden')).toBeNull();
+             expect(customDateAlertDiv.select('p').text()).toEqual('Both start and end dates must be specified.');
+        });
+
+        it('Expects and alert to be thrown if the end date is earier than the start date.', () => {
+            select(graphNode).select('#custom-start-date').property('value', '2063-04-05');
+            select(graphNode).select('#custom-end-date').property('value', '2063-04-03');
+
+            select(graphNode).select('#custom-date-submit').dispatch('click');
+
+            let customDateAlertDiv = select(graphNode).select('#custom-date-alert-container');
+            expect(customDateAlertDiv.attr('hidden')).toBeNull();
+            expect(customDateAlertDiv.select('p').text()).toEqual('The start date must precede the end date.');
+        });
+
+        it('Expects data to be retrieved if both custom start and end dates are provided', () => {
+            spyOn(Actions, 'getUserRequestedDataForDateRange');
+
+            select(graphNode).select('#custom-start-date').property('value', '2063-04-03');
+            select(graphNode).select('#custom-end-date').property('value', '2063-04-05');
+
+            select(graphNode).select('#custom-date-submit').dispatch('click');
+
+            let customDateAlertDiv = select(graphNode).select('#custom-date-alert-container');
+            expect(customDateAlertDiv.attr('hidden')).toBe('true');
+
+            expect(Actions.getUserRequestedDataForDateRange).toHaveBeenCalledWith(
+                '12345678', '2063-04-03', '2063-04-05'
+            );
+        });
     });
 
     describe('Tests for loading indicators', () => {