noweekends - jquery ui only datepicker
Cómo usar un JQuery Datepicker con el lenguaje de plantilla de Django (3)
Miré este enlace y encontré algo de ayuda, pero me pregunto cómo puedo elegir usar un widget JQueryUI Datepicker para un DateField que tengo en mi 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 - Cómo hace Django mi formulario. No en la página de administración
<!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>
Estoy esperando una forma de hacer que mi campo de modelo de ''fecha'' se represente como un widget JQueryUI Datepicker, pero busqué y no encontré la forma de vincular los dos (en mi caso).
SOLUCIÓN
En mi 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''})
}
Lo mejor es crear un nuevo widget en un archivo widgets.py en su aplicación:
Aquí hay un ejemplo mío para un selector de color:
- widgets.py -
from django import forms
from django.conf import settings
from django.utils.safestring import mark_safe
class ColorPickerWidget(forms.TextInput):
class Media:
css = {
''all'': (
settings.STATIC_URL + ''colorpicker/css/colorpicker.css'',
)
}
js = (
settings.STATIC_URL + ''js/jquery-1.8.3.min.js'',
settings.STATIC_URL + ''colorpicker/js/colorpicker.js'',
)
def __init__(self, language=None, attrs=None):
self.language = language or settings.LANGUAGE_CODE[:2]
super(ColorPickerWidget, self).__init__(attrs=attrs)
def render(self, name, value, attrs=None):
rendered = super(ColorPickerWidget, self).render(name, value, attrs)
return rendered + mark_safe(u''''''
<script type="text/javascript">
jQuery(''#id_%s'').css("background-color", "#"+jQuery(''#id_%s'').val());
jQuery(''#id_%s'').ColorPicker({
onSubmit: function(hsb, hex, rgb, el) {
jQuery(el).val(hex);
jQuery(el).css("background-color", "#"+hex);
jQuery(el).ColorPickerHide();
},
onBeforeShow: function () {
code = this.value
if (code.length==3) code = code.charAt(0)+code.charAt(0)+code.charAt(1)+code.charAt(1)+code.charAt(2)+code.charAt(2);
jQuery(this).ColorPickerSetColor(code);
}
}).bind(''keyup'', function(){
el = jQuery(this);
code = el.val();
hex = ''#''+code;
var isOk = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex);
if (isOk) {
el.css("background-color", hex);
if (code.length==3) code = code.charAt(0)+code.charAt(0)+code.charAt(1)+code.charAt(1)+code.charAt(2)+code.charAt(2);
el.ColorPickerSetColor(code);
}
else if (code=="") el.css("background-color", "");
});
</script>
'''''' % (name, name, name))
--- views.py ---
from django import forms ColorPickerWidget
from myapp.widgets import
class EditBackgroundForm(forms.Form):
background = forms.CharField(max_length=10, widget= ColorPickerWidget(), required = False, label="Background color")
Además, también puede crear un campo de formulario personalizado con su widget y sobre su método clean() .
Edite los atributos de widgets de fecha en el formulario de modelo, dándoles la clase ''.datepicker'', ya que eso es lo que buscará el fechador de JQuery. Entonces su ModelForm se convierte en:
class EForm(forms.ModelForm):
class Meta:
model = EModel
widgets = {''date'': DateInput(attrs={''class'': ''datepicker''})}
Documentación aquí .
Uso el siguiente código y funciona bien para mí. He mencionado todos los archivos para este proyecto,
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)