Menu
Looked at this link and found some help but I am wondering how I can choose to use a JQueryUI Datepicker widget for a DateField I have in my models.py
models.py
from django.db import models
class EModel(models.Model):
date = models.DateField(blank=False)
forms.py
from django import forms
from models import EModel
class EForm(forms.ModelForm):
class Meta:
model = EModel
form.html - How Django renders my form. Not in the admin page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Form</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
</head>
<body>
<form action="" method="post">{% csrf_token %}
{{ form.date }} <!-- ***** -->
<!-- The rest of my form -->
</form>
</body>
I am hoping for a way to make my 'date' model field render as a JQueryUI Datepicker widget, but I have searched around and found no way to link the two (in my case).
SOLUTION
In my forms.py
from django import forms
from models import EModel
class EForm(forms.ModelForm):
class Meta:
model = EModel
widgets = {
'date' : forms.DateInput(attrs={'type':'date'})
}
680
$(function() { $("input#date_due"). datepicker(); }); The selector you want is all elements with the tag name "input" and the id attribute set to "date_due".
Edit file "bootstrap-datepicker.js" to add your languages: Show activity on this post. Download Language wise all datepicker files from here: [https://github.com/jquery/jquery-ui/tree/master/ui/i18n][1] I hope it will work.
$(". trigger"). click(function(){ $("#date"). datepicker("show"); });
Edit your date widgets attributes in your model form, giving them the class '.datepicker', as that's what the JQuery datepicker will look for. So your ModelForm becomes:
class EForm(forms.ModelForm):
class Meta:
model = EModel
widgets = {'date': DateInput(attrs={'class': 'datepicker'})}
Documentation here.
125
I use the following code and it works fine for me. I have mentioned all the files for this project,
models.py
from django.db import models
class EModel(models.Model):
date = models.DateField(blank=False)
forms.py
from django import forms
from testApp.models import EModel
class EForm(forms.ModelForm):
class Meta:
model = EModel
widgets = {'date': forms.DateInput(attrs={'class': 'datepicker'})}
form.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Form</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#id_date" ).datepicker();
});
</script>
</head>
<body>
<form action="/datepickerview/" method="post">{% csrf_token %}
<!--{{ form.date }} -->
<p>Date: <input name='date' type="text" id="id_date"></p>
<!-- The rest of my form -->
<input type="submit" value="login" />
</form>
</body>
views.py
from django.shortcuts import render
from django.http import HttpResponse
from django.template import Context
from django.shortcuts import render_to_response
from django.http import HttpResponseRedirect
from django.core.context_processors import csrf
from django.template import RequestContext
from forms import EForm
def datepickerview(request):
# Get the context from the request.
context = RequestContext(request)
# A HTTP POST?
if request.method == 'POST':
form = EForm(request.POST)
# Have we been provided with a valid form?
if form.is_valid():
form.save(commit=True)
return HttpResponse("Successfully added the date to database");
else:
# The supplied form contained errors - just print them to the terminal.
print form.errors
else:
# If the request was not a POST, display the form to enter details.
form = EForm()
return render_to_response('form.html', {'form': form}, context)
urls.py
from django.conf.urls import patterns, include, url
from django.contrib import admin
admin.autodiscover()
urlpatterns = patterns('',
url(r'^datepickerview/$', 'testApp.views.datepickerview'),
)
admin.py
from django.contrib import admin
from testApp.models import EModel
admin.site.register(EModel)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
