diff --git a/scss/components/form/_date.scss b/scss/components/form/_date.scss
index dc9797976..d863414ad 100644
--- a/scss/components/form/_date.scss
+++ b/scss/components/form/_date.scss
@@ -83,10 +83,13 @@
 }
 
 .#{$ns}DatePicker-shortcuts {
-  margin: $gap-sm $gap-md (-$gap-sm) $gap-md;
+  margin: $gap-sm $gap-md $gap-sm $gap-md;
   padding: 0;
   list-style: none;
   max-width: 206px;
+  & + .rdt .rdtPicker {
+    padding-top: 0;
+  }
 }
 
 .#{$ns}DatePicker-shortcut {
diff --git a/src/components/DatePicker.tsx b/src/components/DatePicker.tsx
index dd257f694..59de795ae 100644
--- a/src/components/DatePicker.tsx
+++ b/src/components/DatePicker.tsx
@@ -845,6 +845,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     this.getParent = this.getParent.bind(this);
     this.getTarget = this.getTarget.bind(this);
     this.handlePopOverClick = this.handlePopOverClick.bind(this);
+    this.renderShortCuts = this.renderShortCuts.bind(this);
   }
 
   dom: HTMLDivElement;
@@ -994,7 +995,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     return null;
   }
 
-  renderShortCuts = (shortcuts: string | Array<ShortCuts>) => {
+  renderShortCuts(shortcuts: string | Array<ShortCuts>) {
     if (!shortcuts) {
       return null;
     }
@@ -1033,7 +1034,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
         })}
       </ul>
     );
-  };
+  }
 
   render() {
     const {
diff --git a/src/components/DateRangePicker.tsx b/src/components/DateRangePicker.tsx
index 33b2a0ec8..93307e83a 100644
--- a/src/components/DateRangePicker.tsx
+++ b/src/components/DateRangePicker.tsx
@@ -235,7 +235,7 @@ export class DateRangePicker extends React.Component<
     this.handleClick = this.handleClick.bind(this);
     this.handleKeyPress = this.handleKeyPress.bind(this);
     this.handlePopOverClick = this.handlePopOverClick.bind(this);
-
+    this.renderRanges = this.renderRanges.bind(this);
     const {format, joinValues, delimiter, value} = this.props;
 
     this.state = {
@@ -363,7 +363,7 @@ export class DateRangePicker extends React.Component<
     });
   }
 
-  renderRanges = (ranges: string | Array<ShortCuts> | undefined) => {
+  renderRanges(ranges: string | Array<ShortCuts> | undefined) {
     if (!ranges) {
       return null;
     }
@@ -403,7 +403,7 @@ export class DateRangePicker extends React.Component<
         })}
       </ul>
     );
-  };
+  }
 
   clearValue(e: React.MouseEvent<any>) {
     e.preventDefault();