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
--- 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,