Member Avatar for Sivaram R

I am using django1.3.7 for developing a web application.How to display a datepicker using jquery.I am having jquery datepicker which is working fine with html.The only requirement is i am using model form,so how to render the datepicker is my question.Kindly help me in this problem.

Thanks

  • 2 Contributors
  • 2 Replies
  • 273 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by Sivaram R

Dani AI

Generated

As noted, the important bit is giving the form field a selectable id/class and attaching jQuery UI’s datepicker to it. With a ModelForm the cleanest options are: (1) set the widget in Meta.widgets, or (2) add the attribute in init. Then include jQuery and jQuery UI on the page (or use a CDN) and initialize the datepicker in a small script.

Example (ModelForm + widget):

class BookingForm(forms.ModelForm):
    class Meta:
        model = Booking
        fields = ('pickup_date',)
        widgets = {
            'pickup_date': forms.DateInput(attrs={'class': 'datepicker', 'placeholder': 'YYYY-MM-DD'}),
        }

Initialize the picker in the template (run after jQuery/jQuery UI are loaded):

<script>
  $(function(){
    $('.datepicker').datepicker({ dateFormat: 'yy-mm-dd' });
  });
</script>

Notes and troubleshooting

  • Match formats: jQuery UI’s dateFormat must match what Django accepts. Either set dateFormat: 'yy-mm-dd' (ISO) or set input_formats on your DateField so Django can parse the submitted string.
  • Alternative to Meta.widgets: in the form init do self.fields['pickup_date'].widget.attrs.update({'class': 'datepicker'}) — handy when the widget must be conditional.
  • Ensure jQuery loads before jQuery UI and that there are no conflicting jQuery versions; check the browser console for JS errors if the picker doesn’t appear.
  • If using the admin, use the admin date widgets or override the ModelAdmin form’s Media to include your assets.
  • If the rendered input already has an auto id (Django usually gives id_<fieldname>), you can target that id in your selector instead of adding a new one.

This keeps the ModelForm logic server-side while the date UI is provided client-side; it avoids manual render() calls and fits the usual Django workflow.

Recommended Answers

All 2 Replies

Member Avatar for Sivaram R

good,but late reply.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.