Jquery datepicker django

Question

I've been trying to get the jquery datepicker to work on django, I've looked at Show datepicker but I've had no luck.

My Date is defined as

    date = models.DateTimeField('Published Date')

My date in the form is setup as:

class UploadForm(forms.ModelForm):
    class Meta:
        model = Archive
        widgets = {
            'date': forms.DateInput(attrs={'class': 'datepicker'}),
               }

In My upload.html

{% extends 'budget/base_form_views.html' %}
<script>
  $(function() {
    $('.datepicker').datepicker({
    changeMonth:true,
    changeYear: true,
    yearRange: 1900:2100,})
  });
</script>
//generated form//

The upload.html extends base_form.html and all the scripts are loaded there

<head>  
    <script type="text/javascript" src="{% static 'budget/js/jquery-1.10.2.js' %}"></script>
    <script type="text/javascript" src="{% static 'budget/js/jquery-ui-1.10.4.custom.js' %}"></script>
    <script type="text/javascript" src="{% static 'budget/js/bootstrap.js' %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'budget/css/jquery-ui.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'budget/css/bootstrap.css' %}" />

</head>

Nothing happends when I click on the date text field, In the firefox console, all scripts and css's get load with no errors.

I'm using Django 1.6.5.

Is there something that I'm missing?

edit: forgot to add Upload View to post.

class UploadView(FormView):
    template_name = "budget/upload.html"
    form_class = UploadForm
    success_url = reverse_lazy('view')

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

In your view, did you specify a form to be used? This can be done as shown below.

Views.py

class YourView():
    model = Archive
    # (Note that UploadForm must be imported to be used here) 
    form_class = UploadForm

edited Jun 20 '20 at 09:12

Community

1
1

answered May 29 '14 at 13:18

Greg

1,845
2
16
26

I forgot to add my view to the post. – shellcomplex May 29 '14 at 14:31

score 0 · Answer 2 · answered May 29 '14 at 14:33

0

You can try by giving an 'id' to the form and calling the JQuery code on the id instead of the class:

forms.py

  'date': forms.DateInput(attrs={'class': 'datepicker', 'id': 'my_date'})

upload.html

 $('#my_date').datepicker({...

answered May 29 '14 at 14:33

liarspocker

2,434
3
17
26

try these for jquery: – liarspocker May 29 '14 at 15:03
still no luck with those links. – shellcomplex May 30 '14 at 08:02

score 0 · Accepted Answer · answered Jul 09 '14 at 11:14

Ok, I finally managed to get it to work.

The UploadForm

class UploadForm(forms.ModelForm):
    date = forms.DateField(widget=forms.DateInput(attrs={'class': 'datepicker'}))
    ....

The upload.html file contains

<script>
    $(document).ready(function() {
        $('.datepicker').datepicker();
    });
</script>

Just a reminder that upload.html extends my base.html which houses all the jquery scripts

Jquery datepicker django

3 Answers3

Views.py

Linked