diff --git a/scss/components/form/_date.scss b/scss/components/form/_date.scss
index 56c885122..5dc67f5d8 100644
--- a/scss/components/form/_date.scss
+++ b/scss/components/form/_date.scss
@@ -82,11 +82,19 @@
     display: flex;
 }
 
-.#{$ns}DatePicker-rangers {
+.#{$ns}DatePicker-shortcuts {
     margin: $gap-sm $gap-md (-$gap-sm) $gap-md;
     padding: 0;
     list-style: none;
 }
+.#{$ns}DatePicker-shortcut {
+    display: inline-block;
+    margin-right: $gap-sm;
+
+    a {
+        cursor: pointer;
+    }
+}
 
 // override third-party styles
 .rdt {
diff --git a/src/components/DatePicker.tsx b/src/components/DatePicker.tsx
index c271e2b7e..9d12df209 100644
--- a/src/components/DatePicker.tsx
+++ b/src/components/DatePicker.tsx
@@ -695,6 +695,7 @@ export interface DateProps {
     maxTime?: moment.Moment;
     clearable?: boolean;
     defaultValue?: any;
+    utc?: boolean;
     onChange: (value: any) => void;
     value: any;
     shortcuts: string;
@@ -715,7 +716,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     state: DatePickerState = {
         isOpened: false,
         isFocused: false,
-        value: this.props.value ? moment(this.props.value, this.props.format) : undefined,
+        value: this.props.value ? (this.props.utc ? moment.utc : moment)(this.props.value, this.props.format) : undefined,
     };
     constructor(props: DateProps) {
         super(props);
@@ -740,7 +741,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     componentWillReceiveProps(nextProps: DateProps) {
         if (this.props.value !== nextProps.value) {
             this.setState({
-                value: nextProps.value ? moment(nextProps.value, nextProps.format) : undefined,
+                value: nextProps.value ? (nextProps.utc ? moment.utc : moment)(nextProps.value, nextProps.format) : undefined,
             });
         }
     }
@@ -868,7 +869,8 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
             timeConstraints,
             popOverContainer,
             clearable,
-            shortcuts
+            shortcuts,
+            utc
         } = this.props;
 
         const isOpened = this.state.isOpened;
@@ -954,6 +956,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
                                 timeConstraints={timeConstraints}
                                 input={false}
                                 onClose={this.close}
+                                utc={utc}
                             />
                         </PopOver>
                     </Overlay>