Jquery Datepicker

For using jquery datepicker in a django form, I included four external files:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">

in the base.html and then added a script

$(function() {
$( "#id_date" ).datepicker();
$(function() {
$( "#id_hall" ).selectmenu()
.selectmenu( "menuWidget" )
.addClass( "overflow" );

So on viewing the book.html page (that contains the form), I viewed its source and found id of the date input field(#id_date) and then assigned it accordingly in the script above. In the script, I also added input id of hall(#id_hall) to show it as a nice looking dropdown list.

Also added some styles:

fieldset {
border: 0;
label, label#id_start_time{
display: block;
margin: 10px 0 0 0;
select {
width: 200px;

.overflow {
height: auto;

The commit can be seen @ https://github.com/rvirdiz/booking_system/commit/c9e65898170af181915f1e53952c5a1037ca01cf
I’d also downloaded the jquery files and css in the static folder but it didn’t work may be because of some path error.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s