javascript - How to include datepicker in Django modelform? - Stack Overflow

admin管理员组

文章数量:1296338

I have already seen all the questions about this topic but i couldnt solve my problem, my error is: "TypeError: $(...).datepicker is not a function"

Here is my code:

html

.....

<script type="text/javascript" src="{{ STATIC_URL }} /static/bootstrap/js/jquery-1.11.3.min.js">
</script> 

<link rel="stylesheet" type="text/css" href="/static/bootstrap/css/jquery-ui.css">

<link rel="stylesheet" type="text/css" href="/static/bootstrap/css/estilo.css">

<script type="text/javascript" src="{{ STATIC_URL }} /static/bootstrap/js/jquery-ui.js">
</script>

<script type="text/javascript">
$(document).ready(function() {
   $('.datepicker').datepicker();
});
</script>

<div class="form-group">

    <label for="nacimiento" class="control-label col-md-2">Nacimiento:</label>
    <div class="col-md-8">
        <input class="form-control" id="datepicker" name="nacimiento" type="text" />
    </div>
</div>

....

In the html code i have all the form and every thing that let the page run... i just copy the important code for Datepicker

views.py

def registrarpaciente(request):
    if request.POST:
        form = PacienteForm(request.POST)
        if form.is_valid():
            mydate = form.cleaned_data('data_input') #I have agree this codeline just recently by looking another questions
            form.save()

            return render_to_response('ABME/Notificaciones/pregistrado.html')
    else:
        form = PacienteForm()

    args = {}
    args.update(csrf(request))

    args['form'] = form

    return render_to_response('ABME/Paciente/registrarpaciente.html', args)

form.py

from django import forms
from aplicacion.models import *
from functools import partial

DateInput = partial(forms.DateInput, {'class': 'datepicker'})

class PersonaForm(forms.ModelForm):
    class Meta:
        model = Persona
        exclude=()

class PacienteForm(forms.ModelForm):    
    class Meta:
        model = Paciente
        data_input = forms.DateField(widget=forms.DateInput(attrs={'class':'datepicker'}))
        exclude=()  

I dont know if im not calling properly the widget or something, the scripts are called, i have already checked in the firebug so thats not the problem.. plz help!

I have already seen all the questions about this topic but i couldnt solve my problem, my error is: "TypeError: $(...).datepicker is not a function"

Here is my code:

html

.....

<script type="text/javascript" src="{{ STATIC_URL }} /static/bootstrap/js/jquery-1.11.3.min.js">
</script> 

<link rel="stylesheet" type="text/css" href="/static/bootstrap/css/jquery-ui.css">

<link rel="stylesheet" type="text/css" href="/static/bootstrap/css/estilo.css">

<script type="text/javascript" src="{{ STATIC_URL }} /static/bootstrap/js/jquery-ui.js">
</script>

<script type="text/javascript">
$(document).ready(function() {
   $('.datepicker').datepicker();
});
</script>

<div class="form-group">

    <label for="nacimiento" class="control-label col-md-2">Nacimiento:</label>
    <div class="col-md-8">
        <input class="form-control" id="datepicker" name="nacimiento" type="text" />
    </div>
</div>

....

In the html code i have all the form and every thing that let the page run... i just copy the important code for Datepicker

views.py

def registrarpaciente(request):
    if request.POST:
        form = PacienteForm(request.POST)
        if form.is_valid():
            mydate = form.cleaned_data('data_input') #I have agree this codeline just recently by looking another questions
            form.save()

            return render_to_response('ABME/Notificaciones/pregistrado.html')
    else:
        form = PacienteForm()

    args = {}
    args.update(csrf(request))

    args['form'] = form

    return render_to_response('ABME/Paciente/registrarpaciente.html', args)

form.py

from django import forms
from aplicacion.models import *
from functools import partial

DateInput = partial(forms.DateInput, {'class': 'datepicker'})

class PersonaForm(forms.ModelForm):
    class Meta:
        model = Persona
        exclude=()

class PacienteForm(forms.ModelForm):    
    class Meta:
        model = Paciente
        data_input = forms.DateField(widget=forms.DateInput(attrs={'class':'datepicker'}))
        exclude=()  

I dont know if im not calling properly the widget or something, the scripts are called, i have already checked in the firebug so thats not the problem.. plz help!

• javascript
• jquery
• python
• django
• datepicker

Share Improve this question Follow asked Mar 29, 2016 at 19:08 LeandroDiaz96LeandroDiaz96 2311 gold badge22 silver badges1212 bronze badges 8

• is the data_input attribute really supposed to be under Meta class or you want it to appear as a form field instead? – v1k45 Commented Mar 29, 2016 at 19:13
• I just want the form field as a calendar, i have put it there cause i dont know what else do... just seeing anothers questions.. My field where i have to put my date is called "nacimiento" (its in the html code) – LeandroDiaz96 Commented Mar 29, 2016 at 19:16
• Possible duplicate of jQuery UI " $("#datepicker").datepicker is not a function" – Hackerman Commented Mar 29, 2016 at 19:18
• If you have a field named nacimiento, all you have to do is assign a class named datepicker to that input element. it'll solve the problem. – v1k45 Commented Mar 29, 2016 at 19:19
• a class in the input? .. it keeps the same problem, datepicker is not a function... probably its missing an script or css? – LeandroDiaz96 Commented Mar 29, 2016 at 19:25

 |  Show 3 more ments

5 Answers 5

Sorted by: Reset to default 6

Just for the benefit of anyone else seeking an answer.

If you just need a basic datepicker and not keen on js or jquery, try the DateInput widget provided by django.forms. Here is a sample code.

from django.forms import Form, ModelForm, DateField, widgets
from your.models import Packaging, Purchase, Sale


class AddSaleForm(ModelForm):
    class Meta:
        model = Sale
        fields = '__all__'
        exclude = ()
        widgets = {
            'order_date': widgets.DateInput(attrs={'type': 'date'})
        }

An example using pure Form

class ReportForm(Form):
    from_date = DateField(label="From Date", widget=widgets.DateInput(attrs={'type': 'date'}))
    to_date = DateField(label="To Date", widget=widgets.DateInput(attrs={'type': 'date'}))

P.S You would want to make sure views and templates are setup correctly. This is a code example that works with bootstrap and django.views.

If your data_input field is a model field, use this:

class PacienteForm(forms.ModelForm):    
    class Meta:
        model = Paciente
        exclude=()  
        widgets = {
            'data_input': forms.DateInput(attrs={'class': 'datepicker', 'id': 'data_input'})
        }

If it is not a model field, then use:

class PacienteForm(forms.ModelForm):    
     data_input = forms.DateField(widget=forms.DateInput(attrs={'class':'datepicker'}))
     class Meta:
         model = Paciente
         exclude=()  

It possible the file not exist.

try this.

{% load static %}
<script src="{% static 'bootstrap/js/jquery-ui.js' %}"></script>

And the file need permissions

Try to include this in you html:

<script src="http://ajax.googleapis./ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Use Bootstrap DateTime Picker Instead and specify this format. Check the code below.

$('id/class name').datetimepicker({
            minDate: new Date(),
            locale: 'en',
            format: 'MM/DD/YYYY'
        });

本文标签： javascriptHow to include datepicker in Django modelformStack Overflow