Date selection support

tests/integration/test_studio_editable.py

+import datetime
+import pytz
 from xblock.core import XBlock
-from xblock.fields import Boolean, Dict, Float, Integer, List, String
+from xblock.fields import Boolean, Dict, Float, Integer, List, String, DateTime
 from xblock.validation import ValidationMessage
 from xblockutils.studio_editable import StudioEditableXBlockMixin
 from xblockutils.studio_editable_test import StudioEditableBaseTest
@@ -12,7 +14,8 @@ class EditableXBlock(StudioEditableXBlockMixin, XBlock):
     color = String(default="red")
     count = Integer(default=42)
     comment = String(default="")
-    editable_fields = ('color', 'count', 'comment')
+    date = DateTime(default=datetime.datetime(2014, 5, 14, tzinfo=pytz.UTC))
+    editable_fields = ('color', 'count', 'comment', 'date')
 
     def validate_field_data(self, validation, data):
         """
@@ -68,6 +71,7 @@ class TestEditableXBlock_StudioView(StudioEditableBaseTest):
         block.color = "green"
         block.count = 5
         block.comment = "Hello"
+        block.date = datetime.datetime(2014, 6, 17, tzinfo=pytz.UTC)
         block.save()
         orig_values = {field_name: getattr(block, field_name) for field_name in EditableXBlock.editable_fields}
         # Reload the page:
@@ -111,10 +115,16 @@ class TestEditableXBlock_StudioView(StudioEditableBaseTest):
         self.assert_unchanged(block)
 
         for field_name in EditableXBlock.editable_fields:
+            if field_name == 'date':
+                continue
             color_control = self.get_element_for_field(field_name)
             color_control.clear()
             color_control.send_keys('1000')
 
+        date_control = self.get_element_for_field('date')
+        date_control.clear()
+        date_control.send_keys("7/5/2015")
+
         self.click_save()
 
         block = self.load_root_xblock()  # Need to reload the block to bypass its cache
@@ -122,6 +132,7 @@ class TestEditableXBlock_StudioView(StudioEditableBaseTest):
         self.assertEqual(block.color, '1000')
         self.assertEqual(block.count, 1000)
         self.assertEqual(block.comment, '1000')
+        self.assertEqual(block.date, datetime.datetime(2015, 7, 5, 0, 0, 0, tzinfo=pytz.UTC))
 
         for field_name in EditableXBlock.editable_fields:
             self.click_reset_for_field(field_name)

xblockutils/public/studio_edit.js

@@ -4,6 +4,7 @@ function StudioEditableXBlockMixin(runtime, element) {
     
     var fields = [];
     var tinyMceAvailable = (typeof $.fn.tinymce !== 'undefined'); // Studio includes a copy of tinyMCE and its jQuery plugin
+    var datepickerAvailable = (typeof $.fn.datepicker !== 'undefined'); // Studio includes datepicker jQuery plugin
 
     $(element).find('.field-data-control').each(function() {
         var $field = $(this);
@@ -65,6 +66,11 @@ function StudioEditableXBlockMixin(runtime, element) {
                 }
             });
         }
+
+        if (type == 'datepicker' && datepickerAvailable) {
+            $field.datepicker('destroy');
+            $field.datepicker({dateFormat: "m/d/yy"});
+        }
     });
 
     $(element).find('.wrapper-list-settings .list-set').each(function() {

xblockutils/studio_editable.py

@@ -15,7 +15,7 @@ import logging
 
 from django.utils.translation import ugettext
 from xblock.core import XBlock
-from xblock.fields import Scope, JSONField, List, Integer, Float, Boolean, String
+from xblock.fields import Scope, JSONField, List, Integer, Float, Boolean, String, DateTime
 from xblock.exceptions import JsonHandlerError
 from xblock.fragment import Fragment
 from xblock.validation import Validation
@@ -104,6 +104,7 @@ class StudioEditableXBlockMixin(object):
             (Boolean, 'boolean'),
             (String, 'string'),
             (List, 'list'),
+            (DateTime, 'datepicker'),
             (JSONField, 'generic'),  # This is last so as a last resort we display a text field w/ the JSON string
         )
         info = {
@@ -143,6 +144,11 @@ class StudioEditableXBlockMixin(object):
             # Convert value to JSON string if we're treating this field generically:
             info["value"] = json.dumps(info["value"])
             info["default"] = json.dumps(info["default"])
+        elif info["type"] == "datepicker":
+            if info["value"]:
+                info["value"] = info["value"].strftime("%m/%d/%Y")
+            if info["default"]:
+                info["default"] = info["default"].strftime("%m/%d/%Y")
 
         if 'values_provider' in field.runtime_options:
             values = field.runtime_options["values_provider"](self)

xblockutils/templates/studio_edit.html

@@ -35,7 +35,7 @@
                   </option>
                 {% endfor %}
               </select>
-            {% elif field.type == "string" %}
+            {% elif field.type == "string" or field.type == "datepicker" %}
               <input
                 type="text"
                 class="field-data-control"