rendering django ModelForm with jquery datepicker

Question

every one I am trying to rendering django ModelForm with jquery datepicker,,do now know how to do it?

models.py

....
class ProductsTbl(models.Model):
    model_number = models.CharField(max_length=255, blank=True, null=True)
    name = models.CharField(max_length=255, blank=True, null=True)
    material = models.TextField(blank=True, null=True)
    release = models.DateTimeField(blank=True, null=True)
    ...

forms.py

from django import forms
from django.forms import ModelForm
from .models import ProductsTbl,Upload


class ProductsTblForm(ModelForm):
    class Meta:
        model = ProductsTbl
        fields = ('model_number','name','feature', 'material','release',)

edit_thing.html

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });


  });
  </script>
{% extends 'base.html' %} {% block title %}
Edit {{ thing.name }} - {{ block.super }} {% endblock title %}
{% block content %}
<h1>Edit "{{ thing.name }}"</h1>
<form role="form" action="" method="post">
{% csrf_token %}
{{ form.as_p }}
<br>
<button type="submit">Submit</button>
<a href="{% url 'edit_thing_uploads' slug=thing.slug %}"> Edit images</a>
</form>
{% endblock %}

I guess I have to do something in forms.py,,, let the

Release

has datepicker features,,according to the link here

right now just a plain html

the Release input text part need datepicker ,,I guess have to do something in forms.py,,,now just plain html no datepicker ,,,. — Joe Lin, Apr 21 '16 at 08:18
just like the link here http://stackoverflow.com/a/16356818/5678590 but I do not know how to do it in my forms.py — Joe Lin, Apr 21 '16 at 08:20

Sayse · Accepted Answer · 2016-04-21T08:28:56.513

2

In the below line of code, #datepicker refers to the id of the element that you want to apply the datepicker to which in this case won't be datepicker since it will be the default id that django provides, I'm guessing its should be something like #id_release but you'll have to inspect the input element to find out what it should be

 $( "#datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });

Django creates the id's for fields by default because of auto_id

The id attribute values are generated by prepending id_ to the form field names. This behavior is configurable, though, if you want to change the id convention or remove HTML id attributes and tags entirely.

edited Apr 21 '16 at 08:28

answered Apr 21 '16 at 08:21

Sayse

42,633
14
77
146

in the plain html I have to put ,,,however django-form just render {{ form.as_p }} in html ,,so I guess I have to add some code in forms.py – Joe Lin Apr 21 '16 at 08:27
@CcL - I've added a link to the doc which explains how django creates the id's you don't have to write in the plain html at all, you just need your script to apply to the correct element. – Sayse Apr 21 '16 at 08:29
1

thank you,,after I change $("#datepicker") to $( "#id_release" ) in edit_thing.html it works – Joe Lin Apr 21 '16 at 08:39

rendering django ModelForm with jquery datepicker

1 Answers1