This is a beginner level task. I am trying to implement a calendar widget in django using the following
example: http://djangosnippets.org/snippets/1629/
I am putting this calendar inside a form with that already has a submit button. The problem I am having is that my calendar button submits my form rather than displaying the calendar widget. The calendar icon and button display properly and I can see that it has the right code from firebug, but that's about it.
What I really need is an EASY calendar to go along with a ModelForm. I don't care so much about using the JSCal2 as much as making any calendar work.
Why is my calbutton submitting my form? How do I make it display the widget and work properly? Any other suggestions to easily get a working calendar?
-------------widgets.py ---------------------
calbtn = u"""<input id="calendar-inputField" /><button id="calendar-trigger"> <img src="%simages/calbutton.gif" alt="calendar" id="%s_btn"
style="cursor: pointer; height="20"; width="20"; border: 1px solid #8888aa;" title="Select date and
time"
onmouseover="this.style.background='#444444';"
onmouseout="this.style.background=''" />
</button>
<script type="text/javascript">
Calendar.setup({
trigger : "calendar-trigger",
inputField : "calendar-inputField"
inputField : "%s",
ifFormat : "%s",
button : "%s_btn",
singleClick : true,
showsTime : true
onSelect : function() { this.hide() }
});
</script>"""
class DateTimeWidget(forms.widgets.TextInput):
dformat = '%Y-%m-%d %H:%M'
def render(self, name, value, attrs=None):
# Same as the example ...
def value_from_datadict(self, data, files, name):
# Same as the example ...
class Media:
css = {
'all': ('/static/calendar/gold.css', )
}
js = ('/static/calendar/jscal2.js',
'/static/calendar/en.js',
)
------------- forms.py ----------------
class CustMainForm(ModelForm):
lastName = forms.CharField(max_length=20)
firstName = forms.CharField(max_length=20)
class Meta:
model = Customer
fields = ('notes', 'saleDate' )
widgets = {
'notes': Textarea(attrs={'cols': 80, 'rows': 20}),
'saleDate' : DateTimeWidget(), # shown above
}
