Question

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
      }

Answer 1

Your button probably just needs a type attribute so it doesn’t behave as a submit button. In all browsers but IE the button tags have a default type of “submit”.

How to prevent buttons from submitting forms

http://www.w3schools.com/tags/tag_button.asp