Add generic datepicker support
authorSverre Rabbelier <srabbelier@gmail.com>
Sun, 22 Feb 2009 00:27:10 +0000
changeset 1451 ef134d062b83
parent 1450 688648dfe42c
child 1452 2209a6e59870
Add generic datepicker support Any date(time) field now automatically has a picker widget. Patch by: "Haoyu Bai" <baihaoyu@gmail.com> Rebased by: Sverre Rabbelier Reviewed by: To-Be-Reviewed
app/jquery/jquery-ui.datetimepicker.js
app/soc/content/css/ui.datetimepicker.css
app/soc/content/js/datetimepicker.js
app/soc/templates/soc/base.html
app/soc/views/helper/forms.py
app/soc/views/models/timeline.py
--- a/app/jquery/jquery-ui.datetimepicker.js	Sat Feb 21 23:36:39 2009 +0000
+++ b/app/jquery/jquery-ui.datetimepicker.js	Sun Feb 22 00:27:10 2009 +0000
@@ -9,6 +9,10 @@
  * Time functionality added by Stanislav Dobry (stanislav.dobry@datesoft.cz)
  * Date: 2008-06-04
  */
+/*
+ * Patched by Haoyu Bai (baihaoyu@gmail.com) for date-picker only mode,
+ * and better behavior. (Sync Year/Month select with input box)
+ */
 
 ;(function($) { // hide the namespace
 
@@ -56,6 +60,7 @@
 		isRTL: false // True if right-to-left language, false if left-to-right
 	};
 	this._defaults = { // Global defaults for all the date picker instances
+        pickDateOnly: false, // If true, work as datepicker, no time-picker
 		showOn: 'focus', // 'focus' for popup on focus,
 			// 'button' for trigger button, or 'both' for either
 		showAnim: 'show', // Name of jQuery animation for popup
@@ -607,6 +612,13 @@
 		inst[period == 'M' ? '_drawMonth' : '_drawYear'] =
 			select.options[select.selectedIndex].value - 0;
 		this._adjustDate(inst);
+
+
+        this._doNotHide = true;
+		$('td.datetimepicker_currentDay').each(function(){
+			$.datetimepicker._selectDay(inst, inst._selectedMonth, inst._selectedYear,$(this));
+		});
+		this._doNotHide = false;
 	},
 	_selectTime: function(id, select, period) {
 		var inst = this._getInst(id);
@@ -660,8 +672,16 @@
 		inst._selectedDay = inst._currentDay = $('a', td).html();
 		inst._selectedMonth = inst._currentMonth = month;
 		inst._selectedYear = inst._currentYear = year;
-		inst._selectedHour = inst._currentHour = $('select.datetimepicker_newHour option:selected').val();
-		inst._selectedMinute = inst._currentMinute = $('select.datetimepicker_newMinute option:selected').val();
+
+        inst._currentHour = $('select.datetimepicker_newHour option:selected').val();
+        if (inst._currentHour==undefined)
+            inst._currentHour = 0;
+		inst._selectedHour = inst._currentHour;
+        inst._currentMinute = $('select.datetimepicker_newMinute option:selected').val();
+        if (inst._currentMinute==undefined)
+            inst._currentMinute = 0;
+		inst._selectedMinute = inst._currentMinute;
+
 		this._selectDate(id, inst._formatDateTime(
 			inst._currentDay, inst._currentMonth, inst._currentYear, inst._currentHour, inst._currentMinute));
 		if (this._stayOpen) {
@@ -793,8 +813,8 @@
 		var year = -1;
 		var month = -1;
 		var day = -1;
-		var hour = -1;
-		var minute = -1;
+		var hour = 0;
+		var minute = 0;
 		var literal = false;
 		// Check whether a format character is doubled
 		var lookAhead = function(match) {
@@ -1358,7 +1378,7 @@
 			}
 			html += '</select>';
 		}
-		// if (this._get('changeTime'))
+		if (!this._get('pickDateOnly'))
 		{
 			html += '<br />';
 			html += '<select class="datetimepicker_newHour" ' +
@@ -1408,10 +1428,10 @@
 		date = (minDate && date < minDate ? minDate : date);
 		date = (maxDate && date > maxDate ? maxDate : date);
 		this._selectedDay = date.getDate();
-		this._drawMonth = this._selectedMonth = date.getMonth();
-		this._drawYear = this._selectedYear = date.getFullYear();
-		this._drawHour = this._selectedHour = date.getHours();
-		this._drawMinute = this._selectedMinute = date.getMinutes();
+		this._currentMonth = this._drawMonth = this._selectedMonth = date.getMonth();
+		this._currentYear = this._drawYear = this._selectedYear = date.getFullYear();
+		this._currentHour = this._drawHour = this._selectedHour = date.getHours();
+		this._currentMinute = this._drawMinute = this._selectedMinute = date.getMinutes();
 	},
 
 	/* Determine the number of months to show. */
@@ -1520,4 +1540,4 @@
 		.mousedown($.datetimepicker._checkExternalClick);
 });
 
-})(jQuery);
\ No newline at end of file
+})(jQuery);
--- a/app/soc/content/css/ui.datetimepicker.css	Sat Feb 21 23:36:39 2009 +0000
+++ b/app/soc/content/css/ui.datetimepicker.css	Sun Feb 22 00:27:10 2009 +0000
@@ -79,7 +79,7 @@
 	background: #944;
 	text-align: center;
 	font-weight: bold;
-	height: 3em;
+	/*height: 3em;*/
 }
  .datetimepicker_header select {
 	background: #944;
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/soc/content/js/datetimepicker.js	Sun Feb 22 00:27:10 2009 +0000
@@ -0,0 +1,9 @@
+$(function() {
+        $('.datetime-pick').datetimepicker();
+        $('.date-pick').datetimepicker({
+                'pickDateOnly' : true,
+                'timeFormat' : '',
+                'yearRange' : '1900:2008',
+            });
+        });
+
--- a/app/soc/templates/soc/base.html	Sat Feb 21 23:36:39 2009 +0000
+++ b/app/soc/templates/soc/base.html	Sun Feb 22 00:27:10 2009 +0000
@@ -77,6 +77,7 @@
   {% if uses_jq_datetimepicker %}
   <script type="text/javascript" src="/jquery/jquery-ui.datetimepicker.js"></script>
   <script type="text/javascript" src="/soc/content/js/datetime-loader.js"></script>
+  <script type="text/javascript" src="/soc/content/js/datetimepicker.js"></script>
   {% endif %}
  </head>
 {% endblock %}
--- a/app/soc/views/helper/forms.py	Sat Feb 21 23:36:39 2009 +0000
+++ b/app/soc/views/helper/forms.py	Sun Feb 22 00:27:10 2009 +0000
@@ -49,6 +49,8 @@
   ugettext() proxies used for internationalization in the Model will
   still work correctly with this new behavior, as long as the original
   strings are used as the translation keys.
+
+  Also set class date-pick or datetime-pick for DateField or DateTimeField.
   """
 
   def __init__(self, *args, **kwargs):
@@ -77,6 +79,12 @@
         if hasattr(model_prop, 'group'):
           self.fields[field_name].group = model_prop.group
 
+      if isinstance(self.fields[field_name], forms.DateField):
+        self.fields[field_name].widget.attrs['class'] = 'date-pick'
+
+      if isinstance(self.fields[field_name], forms.DateTimeField):
+        self.fields[field_name].widget.attrs['class'] = 'datetime-pick'
+
 
 class SelectQueryArgForm(forms.Form):
   """URL query argument change control implemented as a Django form.
--- a/app/soc/views/models/timeline.py	Sat Feb 21 23:36:39 2009 +0000
+++ b/app/soc/views/models/timeline.py	Sun Feb 22 00:27:10 2009 +0000
@@ -71,23 +71,13 @@
     super(View, self).__init__(params=params)
 
     for name, logic_value in program_logic.logic.TIMELINE_LOGIC.iteritems():
-      fields = {}
-      
-      # add class 'datetime-pick' for each DateTimeField
-      # this is used with datetimepicker js widget
-      for prop_key, prop_value in logic_value.getModel().properties().iteritems():
-        if isinstance(prop_value, db.DateTimeProperty):
-          fields[prop_key] = forms.DateTimeField(required=False,
-            widget=forms.TextInput(attrs={'class':'datetime-pick'}))
-      
       create_form = params_helper.getCreateForm(self._params, logic_value.getModel())
       edit_form = dynaform.extendDynaForm(
         dynaform = create_form,
         dynainclude = self._params['edit_dynainclude'],
         dynaexclude = self._params['edit_dynaexclude'],
-        dynaproperties = fields,
         )
-        
+
       self._params['edit_form_%s' % name] = edit_form
 
   def edit(self, request, access_type,