web-dev-qa-db-fra.com

Formulaire Django - Django-bootstrap-datepicker-plus ne rend pas datepicker

J'ai quelques inconvénients lorsque j'essaie de rendre Django-bootstrap-datepicker-plus widget En fonction de cette réponse . Tout fonctionne bien, mais Datepicker ne s'affiche pas. 

Ma version de Django est la 1.10.7 et les applications tierces que j'utilise sont les suivantes:

Ceci est mon forms.py, je remplace la classe DateInput pour le personnaliser en fonction de mes besoins.

from Django import forms
from bootstrap_datepicker.widgets import DatePicker

class DateInput(DatePicker):
    def __init__(self):
        DatePicker.__init__(self,format="%Y-%m-%d")

class UserUpdateForm(forms.ModelForm):
    class Meta:
        widgets = {     
            'date_of_birth': DateInput(),  # datepicker
            'creation_date': DateInput(), # datepicker
        }
        fields = ("other fields", "date_of_birth", "creation_date", "other fields",)
        model = get_user_model()

Ensuite, dans mon formulaire de modèle, j'ai un modèle principal de base nommé layout.html, Mon modèle user_form.html dans lequel je souhaite afficher les champs de formulaire précédemment mentionnés ci-dessus. Tous ces modèles ont une structure div et html comme vous pouvez le voir dans le fichier user_form.htmlici .

Dans les paramètres de démarrage dans mon settings.py je dois option include_jquery à True

Lorsque j'accède à la page de formulaire, le champ date_de_naissance n'est pas rendu en tant que sélecteur de date d'agenda , Il s'agit en tant que texte de type d'entrée dans lequel l'utilisateur doit entrer la date manuellement et dans un format spécifique.

Dans mon layout.html, j'appelle d'autres ressources cdn jQuery supplémentaires.

  • Est-ce que cela cause un conflit?
  • Pourquoi le widget datepicker dans le champ de formulaire ne rend pas le rendu?

[Les commentaires ci-dessous sont bien plus anciens que cette modification]

javascriptdjangodatepickerdjango-formsbootstrap-datepicker
9
bgarcial

Vous utilisez Django-bootstrap-datepicker-plus qui fonctionne sur la version de Django> = 1.8 et devrait donc fonctionner parfaitement sur votre projet utilisant Django version 1.10.7. Si vous avez tout suivi correctement, comme indiqué dans la page d'installation, vous souhaiterez peut-être consulter la liste de contrôle suivante pour voir si tout est en place.

Liste de contrôle pour que le widget fonctionne

  • jQuery est nécessaire, définissez l'option include_jquery sur True dans Paramètres d'amorçage .
  • Assurez-vous que les balises suivantes sont incluses dans la section head de votre modèle principal .
   {% load bootstrap3 %}       {# imports bootstrap3 #}
   {% bootstrap_css %}         {# Embeds Bootstrap CSS #}
   {% bootstrap_javascript %}  {# Embeds Bootstrap JS #}
   {% block extrahead %}       {# Embeds Extra Resources #}
   {% endblock %}              {# Ends Extra Resources #}
  • Vérifiez que le bloc de balises suivant se trouve en haut de votre modèle de formulaire.
   {% block extrahead %}   {# Extra Resources Start #}
   {{ form.media }}        {# Form required JS and CSS #}
   {% endblock %}          {# Extra Resources End #}

UPDATE: Trouvé le bogue

Le problème est exactement ce que vous avez deviné. "Dans mon layout.html, j'appelle des ressources cdn jQuery supplémentaires. Cela crée-t-il un conflit?"

J'ai parcouru votre layout.html et trouvé 2 bibliothèques jQuery incluses, l'une à la ligne 22, l'autre à la ligne 299, et vous avez déclaré que l'option include_jquery était définie sur true. Alors oui, ils sont en conflit. Datepicker est lié à jQuery chargé par l’option bootstrap include_jquery et jQuery est remplacé par jQuery à la ligne 299.

La solution:

La solution consiste à ne conserver qu'un seul jQuery dans votre modèle. Débarrassez-vous de jQuery dans votre modèle et ne gardez que include_jquery dans true. Ou ne conservez qu'un seul jQuery dans l'en-tête du modèle maître avant tout autre script et définissez include_jquery sur false.

2
Munim Munna

Essayez d’ajouter ces balises de lien dans votre modèle base.html et de les étendre au formulaire de modèle html: 

<link href="//cdn.bootcss.com/bootstrap-datetimepicker/4.17.44/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/moment.js/2.17.1/moment.min.js"></script>

Et ajoutez {{ form.media }} à votre modèle de formulaire, exemple:

      <form class="mt-3" action="" method="post">{% csrf_token %}
          {{ form.as_p }}
          {{ form.media }}
          <div class="text-center">
            <input class="btn btn-primary btn-block" type="submit" value="Update" />
          </div>
      </form>

Cela a résolu mon problème avec Django-bootstrap-datepicker-plus. Ce paquet nécessite une documentation plus détaillée, simple et avec des exemples. Mais cela fonctionne très bien une fois que vous avez à le configurer.

2
nilsoviani