Login

Use JQuery Calendar in ModelForm

Author:
Induane
Posted:
July 1, 2010
Language:
HTML/template
Version:
1.2
Score:
2 (after 2 ratings)

The important code really is just setting up the base site to use jquery and then using the javascript function to show the calendar on a widget with the .vDateField class set. The DateField modeltype automatically gets the css class .vDateField when using ModelForms.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!-- Given this model:

class Shipment(models.Model):
	ordernum = models.CharField('Order Number', max_length=10)
	scheduled_date = models.DateField('date scheduled')

	def __unicode__(self):
		return self.ordernum

	class Meta:
		ordering = ["-ordernum"]

-->

<!--Base Site -->


<!DOCTYPE html>
<html>
<head>{% block head %}{% endblock %}
<link rel="stylesheet" type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/jquery-ui.css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('.vDateField').datepicker();
    });
</script>
{% block scripts %}{% endblock %}
<title>Site Name</title>

</head>
<body bgcolor="#1E0F0F">
<div id="engrave"><h1><font color="white">Site Name</font></h1></div>
<div id="content">
<h2>{% block title %}{% endblock %}</h2>
{% block content %}{% endblock %}<br />
<div align="right"><p><i>Site powered viciously by OWLad</i></p></div>
</div>
</body>
</html>

<!-- Then create a page that uses the model: -->

{% extends "base_site.html" %}
{% block title %}Add Shipment{% endblock %}
{% block content %}
<p>{{ messsage }}</p>
<form method="post">
{{ addform.as_p }}
<input type="submit" value="Create Shipment" />
</form>
{% endblock %}

More like this

  1. Bootstrap Accordian by Netplay4 7 years, 9 months ago
  2. Bootstrap theme for django-endless-pagination? by se210 10 years, 9 months ago
  3. Bootstrap theme for django-endless-pagination? by se210 10 years, 9 months ago
  4. Reusable form template with generic view by roldandvg 10 years, 10 months ago
  5. Pagination Django with Boostrap by guilegarcia 11 years ago

Comments

Please login first before commenting.