announce publication and expiration dates displayed in form

corbo/forms.py

@@ -3,9 +3,15 @@ from django import forms
 from .models import Announce, Category
 
 class AnnounceForm(forms.ModelForm):
+
     class Meta:
         model = Announce
-        exclude = ('publication_time', 'expiration_time')
+        widgets = {
+            'publication_time': forms.TextInput(attrs={'class': 'datepicker',
+                                                       'size': 8}),
+            'expiration_time': forms.TextInput(attrs={'class': 'datepicker',
+                                                      'size': 8})
+        }
 
 class CategoryForm(forms.ModelForm):
     class Meta:

corbo/models.py

@@ -18,7 +18,7 @@ class Announce(models.Model):
     text = RichTextField(_('Content'))
     publication_time = models.DateTimeField(_('publication time'), blank=True,
                                             null=True)
-    expiration_time = models.DateTimeField(_('expiration time'), blank=True,
+    expiration_time = models.DateTimeField(_('Expires on'), blank=True,
                                            null=True)
     ctime = models.DateTimeField(_('creation time'), auto_now_add=True)
     mtime = models.DateTimeField(_('modification time'), auto_now=True)

corbo/static/css/corbo.css

@@ -206,6 +206,10 @@ div.user a.logout:before {
     content: '\f1f8';
 }
 
+.status .icon {
+    color: #888;
+}
+
 .status .published:before {
     content: '\f1ea';
 }
@@ -256,4 +260,13 @@ div.user a.logout:before {
 a.add:before {
     content: '\f067';
     padding-right:3px;
-}
+}
+
+form ul li {
+    list-style-type: none;
+    margin: 5px 0;
+}
+
+form ul li label {
+    display: block;
+}

corbo/templates/corbo/announce_form.html

@@ -4,7 +4,16 @@
 <form method="post">
   {% csrf_token %}
   {{ form.media }}
-  {{ form.as_p }}
-  <button>{% trans "Save" %}</button>
+  <ul>
+  {{ form.as_ul }}
+  <li>
+    <button>{% trans "Save" %}</button>
+  </li>
+  </ul>
+  <script type="text/javascript">
+    $(function() {
+        $(".datepicker" ).datepicker();
+    });
+</script>
 </form>
 {% endblock %}