diff --git a/Controls/DatePickerSetupControl.php b/Controls/DatePickerSetupControl.php
index d788990cb..a5a22b9ee 100644
--- a/Controls/DatePickerSetupControl.php
+++ b/Controls/DatePickerSetupControl.php
@@ -43,7 +43,11 @@ public function PageLoad()
         $this->SetDefault('MinDate', null);
         $this->SetDefault('MaxDate', null);
 
-        $this->Display('Controls/DateSetup.tpl');
+        if ($controlId == 'datepicker') {
+            $this->Display('Controls/DatePickerSetup.tpl');
+        } else {
+            $this->Display('Controls/DateSetup.tpl');
+        }
     }
 
     private function SetDefault($key, $value)
diff --git a/tpl/Controls/DatePickerSetup.tpl b/tpl/Controls/DatePickerSetup.tpl
new file mode 100644
index 000000000..faefcaadf
--- /dev/null
+++ b/tpl/Controls/DatePickerSetup.tpl
@@ -0,0 +1,60 @@
+{function name=datePickerDateFormat}
+new Date({$date->Year()}, {$date->Month()-1}, {$date->Day()})
+{/function}
+<script type="text/javascript">
+    $(function () {
+        $("#{$ControlId}").{if $HasTimepicker}datetimepicker{else}datepicker{/if}({ldelim}
+            numberOfMonths: {$NumberOfMonths},
+            showButtonPanel: {$ShowButtonPanel},
+            onSelect: {$OnSelect},
+            dayNames: {$DayNames},
+            dayNamesShort: {$DayNamesShort},
+            dayNamesMin: {$DayNamesMin},
+            dateFormat: '{$DateFormat}',
+            {if $FirstDay >=0 && $FirstDay <= 6}
+            firstDay: {$FirstDay},
+            {/if}
+            monthNames: {$MonthNames},
+            monthNamesShort: {$MonthNamesShort},
+            currentText: "{{translate key='Today'}|escape:'javascript'}",
+            timeFormat: "{$TimeFormat}",
+            altFieldTimeOnly: false,
+            showWeek: {if $ShowWeekNumbers}true{else}false{/if},
+            controlType: 'select'
+            {if $AltId neq ''}
+            ,
+            altField: "#{$AltId}",
+            altFormat: '{$AltFormat}'
+            {/if}
+            {if $DefaultDate}
+            ,
+            defaultDate: {datePickerDateFormat date=$DefaultDate}
+            {/if}
+            {if $MinDate}
+            ,
+            minDate: {datePickerDateFormat date=$MinDate}
+            {/if}
+            {if $MaxDate}
+            ,
+            maxDate: {datePickerDateFormat date=$MaxDate->AddDays(1)}
+            {/if}
+            {rdelim});
+
+        {if $AltId neq ''}
+        $("#{$ControlId}").change(function () {
+            if ($(this).val() == '') {
+                $("#{$AltId}").val('');
+            }
+            else {
+                var dateVal = $("#{$ControlId}").{if $HasTimepicker}datetimepicker{else}datepicker{/if}('getDate');
+                var dateString = dateVal.getFullYear() + '-' + ('0' + (dateVal.getMonth() + 1)).slice(-2) + '-' + ('0' + dateVal.getDate()).slice(-2);
+                {if $HasTimepicker}
+                dateString = dateString + ' ' + dateVal.getHours() + ':' + dateVal.getMinutes();
+                {/if}
+                $("#{$AltId}").val(dateString);
+            }
+        });
+        {/if}
+
+    });
+</script>