Wie verwende ich einen Datepicker auf einem einfachen Django-Formular?

Bevor Sie dies als ein Duplikat an die most famous django datepicker question on SO markieren, hören Sie mich an. Ich habe alle Fragen auf den ersten zehn Seiten der Suchergebnisse durchgesehen, aber niemand scheint etwas von Anfang an zu erklären.Wie verwende ich einen Datepicker auf einem einfachen Django-Formular?

Was ich suche ist der einfachste Weg, um ein Datepicker auf meinem Formular zu haben, ich weiß nicht, ob der einfachste Weg ist, es aus dem Admin zu importieren oder eine vorhandene jQuery-Sache zu verwenden, aber was auch immer es ist jemand bitte erklären Schritt für Schritt wie Sie zu einem Baby tun würden? Dies, glaube ich, wird jedem neuen Programmierer wie mir da draußen helfen, der etwas lernen will. Das habe ich bisher.

Meine Form:

class SampleForm(forms.Form): 
    date_of_birth = forms.DateField(label='Enter Date')

Meine Ansicht:

def dlp_test(request): 
    form = SampleForm() 
    return render(request, 'dlp_test.html', {'form': form})

Meine Vorlage:

<form action="/your-name/" method="post"> 
    {% csrf_token %} 
    {{ form }} 
    <input type="submit" value="Submit" /> 
</form>

Dies ist die einfachste jemand Setup aus starten können, wie mache ich es von hier? Wenn jemand im HTML auf das Datumsfeld klickt, möchte ich, dass ein Kalender erscheint, damit er ein Datum auswählen kann.

Wenn ich dies erreiche, muss ich JS- oder jQuery-Dateien lokal gespeichert haben, würde ich bevorzugen, dass die URL im HTML eingebettet wird, anstatt die Quelle herunterzuladen und dann zu erwähnen, weil meine Pfade gerade durcheinander sind. Sie können davon ausgehen, dass ich außer Django und Python nichts anderes heruntergeladen oder installiert habe.

Quelle

2017-02-10 DeA

Dies ist, was ich meiner Vorlage hinzugefügt habe und es funktioniert jetzt. Um jemanden in der Zukunft auf der Suche nach einer Antwort, hier ist es. Obwohl ich Ihnen sagen muss, dass dies bei großen Projekten möglicherweise nicht gut skaliert, müssen Sie diese Funktion möglicherweise überall oder in der Art verwenden, aber für den Moment funktioniert das für mich.

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Datepicker - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    </head> 

<body> 
<form action="." method="post"> 
    {% csrf_token %} 
    {{form.as_p}} 
    <p>Date: <input type="text" id="datepicker"></p> 
    <input type="submit" value="Submit" /> 
</form> 


<script> 

     $(function() 
     { 
     $("#id_date_of_birth").datepicker(); 
     $("#datepicker").datepicker(); 
     }); 
</script> 


</body> 
</html>

Quelle

2017-02-10 19:03:20 DeA

Dies ist wahrscheinlich etwas hacky, aber wenn ich die jQueryUI datepicker für ein bestimmtes Formularfeld verwenden, möchte ich dies tun:

Fügen Sie das Stylesheet in der <head> meiner Vorlage:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />

Fügen Sie die JavaScript-Datei am Ende meiner Vorlage:

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

Das Feld Ihres Formulars, mit dem Sie den Datepicker verwenden möchten, hat eine spezifische ID. In Ihrem Fall wird es wahrscheinlich id_date_of_birth sein. So können Sie das Geburtsdatum Textbox von ID auswählen und anwenden, die Datepicker, um es (dies setzt voraus, Sie werden auch mit jQuery):

<script> 
    $(document).ready(function() { 
     $('#id_date_of_birth').datepicker({firstDay: 1, 
      dateFormat: "dd/mm/yy", 
      defaultDate: "16/06/2017", 
      minDate: "16/06/2017", 
      maxDate: "25/06/2017"}); 
    }); 
</script>

Beachten Sie, dass dieser Ausschnitt zu kommen hat, nachdem Sie die JavaScript-Datei enthalten. Auch ich einige Ausfälle bin Einstellung, die Sie nicht benötigen - die einfachste Art und Weise, um es wäre funktioniert:

<script> 
    $(document).ready(function() { 
     $('#id_date_of_birth').datepicker(); 
    }); 
</script>

Hoffentlich, das Ihnen hilft heraus!

Quelle

2017-02-10 17:43:19

Sieht das so aus, als ob Sie etwas von mir wollten? http: // Pastebin.com/pdKmMcX7 – DeA

@DeA hier sind einige Kommentare: http://pastebin.com/YkAAvyz5. –

Yup, dass definitiv einige Hinweise zur Verfügung gestellt. Vielen Dank! – DeA

Wie verwende ich einen Datepicker auf einem einfachen Django-Formular?

Antwort

Verwandte Themen