diff --git a/smash/web/forms/voucher_forms.py b/smash/web/forms/voucher_forms.py
index 5d7b4fe9944d3581fa51911e399deeea6657d9c0..9eaf8ee1bc3b571627a8b9cac259ecc3f0bd24b4 100644
--- a/smash/web/forms/voucher_forms.py
+++ b/smash/web/forms/voucher_forms.py
@@ -67,13 +67,21 @@ class VoucherForm(ModelForm):
         self.fields['number'].widget.attrs['readonly'] = True
         self.fields['number'].required = False
         self.fields['issue_worker'].widget.attrs['readonly'] = True
-
-        self.fields['issue_date'].widget.attrs['readonly'] = True
+        #issue date
+        self.fields['issue_date'].input_formats = ('%Y-%m-%d', )
         self.fields['issue_date'].required = False
+        self.fields['issue_date'].widget.attrs.update({'class': 'datepicker'})
+        self.fields['issue_date'].widget.attrs.update({'readonly': False})
+        self.fields['issue_date'].widget.attrs.update({'placeholder': 'yyyy-mm-dd (optional)'})
+        self.fields['issue_date'].widget.attrs.update({'pattern': '[0-9]{4}-[0-9]{2}-[0-9]{2}'})
+        self.fields['issue_date'].widget.attrs.update({'required': False})
+        self.fields['issue_date'].initial = timezone.now()
+        #expiry date
         self.fields['expiry_date'].widget.attrs['readonly'] = True
         self.fields['expiry_date'].required = False
         instance = getattr(self, 'instance', None)
         if instance and instance.pk:
+            self.fields['issue_date'].widget.attrs['readonly'] = True
             self.fields['voucher_type'].widget.attrs['readonly'] = True
             self.fields['hours'].widget.attrs['readonly'] = True
             self.fields['activity_type'].widget.attrs['readonly'] = True
@@ -83,10 +91,14 @@ class VoucherForm(ModelForm):
                 self.fields['status'].widget.attrs['readonly'] = True
                 self.fields['feedback'].widget.attrs['readonly'] = True
 
+    def clean(self):
+        #if empty, add a datetime
+        if self.cleaned_data['issue_date'] is None:
+            self.cleaned_data['issue_date'] = timezone.now()
+
     def save(self, commit=True):
         instance = super(VoucherForm, self).save(commit=False)
         if not instance.id:
-            instance.issue_date = timezone.now()
             instance.expiry_date = instance.issue_date + relativedelta(months=+instance.study_subject.study.default_voucher_expiration_in_months)
             max_id = str(1).zfill(5)
             if Voucher.objects.all().count() > 0:
diff --git a/smash/web/templates/_base.html b/smash/web/templates/_base.html
index 58492739c8b9d3678d0190f508c04059cd13d3e0..da7b7ddab5d8ed1c554095a1dff663a440158df7 100644
--- a/smash/web/templates/_base.html
+++ b/smash/web/templates/_base.html
@@ -24,6 +24,8 @@
 
         <link rel="stylesheet" href="{% static 'css/smash.css' %}">
 
+        <link rel="stylesheet" href="{% static 'AdminLTE/plugins/jQueryUI/jquery-ui.min.css' %}">
+
 
         <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
         <!--[if lt IE 9]>
diff --git a/smash/web/templates/vouchers/add_edit.html b/smash/web/templates/vouchers/add_edit.html
index c0083e92cc23d2b666a8a60547a0237e04123da5..6c181944a4dc3723b901b2bad923f15736f1be8a 100644
--- a/smash/web/templates/vouchers/add_edit.html
+++ b/smash/web/templates/vouchers/add_edit.html
@@ -6,6 +6,24 @@
     {{ block.super }}
     <link rel="stylesheet" href="{% static 'AdminLTE/plugins/awesomplete/awesomplete.css' %}"/>
 
+    <style type="text/css">
+        .ui-datepicker-header {
+           border: 1px solid #555;
+           background: #00a65a;
+        }
+        .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
+            border: 1px solid #000000;
+            background: #00a65a url(images/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x;
+        }
+
+        .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
+            border: 1px solid red;
+            background: #fff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
+            font-weight: bold;
+            color: red;
+        }
+    </style>
+
 {% endblock styles %}
 
 {% block ui_active_tab %}'configuration'{% endblock ui_active_tab %}
@@ -107,5 +125,8 @@
     {{ block.super }}
 
     <script src="{% static 'AdminLTE/plugins/awesomplete/awesomplete.min.js' %}"></script>
+    <script type="text/javascript">
+        $(".datepicker").datepicker({ dateFormat: 'yy-mm-dd' });
+    </script>
 
 {% endblock scripts %}
\ No newline at end of file