forms: use declarative js for date widgets (#11108)

wcs/qommon/form.py

@@ -956,8 +956,6 @@ class DateWidget(StringWidget):
         StringWidget.__init__(self, name, value=value, **kwargs)
         self.attrs['size'] = '12'
         self.attrs['maxlength'] = '10'
-        self.jpicker_args = kwargs.pop('jpicker_args', {})
-        self.jquery = kwargs.pop('jquery', True)
 
     def parse(self, request=None):
         StringWidget.parse(self, request=request)
@@ -997,7 +995,8 @@ class DateWidget(StringWidget):
 
     @classmethod
     def prepare_javascript(cls):
-        get_response().add_javascript(['jquery.js', 'bootstrap-datetimepicker.js'])
+        get_response().add_javascript([
+            'jquery.js', 'bootstrap-datetimepicker.js', 'qommon.forms.js'])
         current_language = get_request().language
         if current_language != 'en' and current_language in get_publisher().supported_languages or []:
             get_response().add_javascript(['bootstrap-datetimepicker.%s.js' % current_language])
@@ -1008,7 +1007,7 @@ class DateWidget(StringWidget):
         self.attrs['id'] = 'form_%s' % self.name
         self.attrs['class'] = 'date-pick'
 
-        if self.attrs.get('readonly') or not self.jquery:
+        if self.attrs.get('readonly'):
             return StringWidget.render_content(self)
 
         self.prepare_javascript()
@@ -1017,18 +1016,17 @@ class DateWidget(StringWidget):
                 '%m', 'mm').replace('%d', 'dd').replace('%H', 'hh').replace(
                 '%M',  'ii').replace('%S', 'ss')
 
-        args = []
-        args.append('format: "%s"' % date_format)
+        self.attrs['data-date-format'] = date_format
+        self.attrs['data-min-view'] = '0'
+        self.attrs['data-start-view'] = '2'
         if not 'hh' in date_format:
             # if the date format doesn't contain the time, set widget not to go
             # into the time pages
-            args.append('minView: 2')
-            if not self.value:
-                # if there's no value we set the initial view to be the view of
-                # decades, it's more appropriate to select a far away date.
-                args.append('startView: 4')
-        args.append('autoclose: true')
-        args.append('weekStart: 1')
+            self.attrs['data-min-view'] = '2'
+        if not self.value:
+            # if there's no value we set the initial view to be the view of
+            # decades, it's more appropriate to select a far away date.
+            self.attrs['data-start-view'] = '4'
 
         if self.minimum_date:
             start_date = date_format.replace(
@@ -1036,7 +1034,7 @@ class DateWidget(StringWidget):
                     'mm', '%02d' % self.minimum_date[1]).replace(
                     'dd', '%02d' % self.minimum_date[2]).replace(
                     'hh', '00').replace('ii', '00').replace('ss', '00')
-            args.append('startDate: "%s"' % start_date)
+            self.attrs['data-start-date'] = start_date
 
         if self.maximum_date:
             end_date = date_format.replace(
@@ -1044,29 +1042,9 @@ class DateWidget(StringWidget):
                     'mm', '%02d' % self.maximum_date[1]).replace(
                     'dd', '%02d' % self.maximum_date[2]).replace(
                     'hh', '00').replace('ii', '00').replace('ss', '00')
-            args.append('endDate: "%s"' % end_date)
-        for key, value in self.jpicker_args.iteritems():
-            args.append("%s: %s" % (key, value))
-
-        if args:
-            args = '{' + ','.join(args) + '}'
-        else:
-            args = ''
-
-        if get_request().get_header('x-popup') == 'true':
-            # unfortunately we cannot add a popup calendar inside a popup :/
-            return StringWidget.render_content(self)
-        else:
-            get_response().add_javascript_code('''
-$(function() {
-        $('#%(id)s').datetimepicker(%(args)s)
-        .on('changeDate', function(ev) {
-          $(this).data('datetimepicker').startViewMode = 2;
-        });
-});''' % {'id': self.attrs['id'], 'args': args})
-            t = StringWidget.render_content(self)
-            return t
+            self.attrs['data-end-date'] = end_date
 
+        return StringWidget.render_content(self)
 
 
 class DateTimeWidget(DateWidget):

wcs/qommon/static/js/qommon.forms.js

@@ -31,6 +31,18 @@ $(function() {
   $('#tracking-code button').click(function() {
     $('input[name=savedraft]').click();
   });
+  $('.date-pick').each(function() {
+    var $date_input = $(this);
+    var options = Object();
+    options.autoclose = true;
+    options.weekStart = 1;
+    options.format = $date_input.data('date-format');
+    options.minView = $date_input.data('min-view');
+    options.startView = $date_input.data('start-view');
+    if ($date_input.data('start-date')) options.startDate = $date_input.data('start-date');
+    if ($date_input.data('end-date')) options.endDate = $date_input.data('end-date');
+    $date_input.datetimepicker(options);
+  });
   if ($('.widget-with-error').length) {
     var first_field_with_error = $($('.widget-with-error')[0]).find('input,textarea,select');
     if (first_field_with_error.length) {