ฉันจะใช้วิดเจ็ตวันที่และเวลาของ JavaScript ที่ดีที่ผู้ดูแลระบบเริ่มต้นใช้กับมุมมองที่กำหนดเองได้อย่างไร

ฉันได้อ่านเอกสารในแบบฟอร์ม Djangoแล้วและได้กล่าวถึง django.contrib.admin.widgets สั้น ๆ แต่ฉันไม่รู้วิธีใช้งานหรือไม่

นี่คือเทมเพลตของฉันที่ฉันต้องการใช้กับมัน

<form action="." method="POST">
    <table>
        {% for f in form %}
           <tr> <td> {{ f.name }}</td> <td>{{ f }}</td> </tr>
        {% endfor %}
    </table>
    <input type="submit" name="submit" value="Add Product">
</form>

นอกจากนี้ฉันคิดว่าควรสังเกตว่าฉันไม่ได้เขียนมุมมองเองสำหรับฟอร์มนี้ฉันใช้มุมมองทั่วไป นี่คือรายการจาก url.py:

(r'^admin/products/add/$', create_object, {'model': Product, 'post_save_redirect': ''}),

และฉันก็มีความเกี่ยวข้องกับสิ่งใหม่ทั้งหมดของ Django / MVC / MTV ดังนั้นโปรดไปง่าย ๆ ...

ความซับซ้อนที่เพิ่มขึ้นของคำตอบนี้เมื่อเวลาผ่านไปและการแฮ็กจำนวนมากที่ต้องการอาจเป็นการเตือนให้คุณทำเช่นนี้ได้ตลอดเวลา มันขึ้นอยู่กับรายละเอียดการใช้งานภายในของผู้ดูแลระบบที่ไม่มีเอกสารและมีแนวโน้มว่าจะแตกอีกครั้งในรุ่นอนาคตของ Django และไม่ง่ายที่จะนำไปใช้มากกว่าแค่ค้นหาวิดเจ็ตปฏิทิน JS อื่นและใช้มัน

ที่กล่าวว่านี่คือสิ่งที่คุณต้องทำถ้าคุณตั้งใจจะทำงานนี้:

1. กำหนดคลาสย่อย ModelForm ของคุณเองสำหรับโมเดลของคุณ (ควรใส่ไว้ใน forms.py ในแอพของคุณ) และบอกให้ใช้ AdminDateWidget / AdminTimeWidget / AdminSplitDateTime (แทนที่ 'mydate' ฯลฯ ด้วยชื่อฟิลด์ที่ถูกต้องจากโมเดลของคุณ):

   from django import forms
   from my_app.models import Product
   from django.contrib.admin import widgets                                       
   
   class ProductForm(forms.ModelForm):
       class Meta:
           model = Product
       def __init__(self, *args, **kwargs):
           super(ProductForm, self).__init__(*args, **kwargs)
           self.fields['mydate'].widget = widgets.AdminDateWidget()
           self.fields['mytime'].widget = widgets.AdminTimeWidget()
           self.fields['mydatetime'].widget = widgets.AdminSplitDateTime()
   

2. เปลี่ยน URLconf ของคุณเพื่อส่ง 'form_class': ProductForm แทน 'model': ผลิตภัณฑ์เป็นมุมมอง create_object ทั่วไป (นั่นจะหมายถึง "จาก my_app.forms นำเข้า ProductForm" แทน "จาก my_app.models นำเข้าผลิตภัณฑ์" แน่นอน)

3. ในส่วนหัวของเทมเพลตของคุณให้ใส่ {{form.media}} เพื่อส่งลิงก์ไปยังไฟล์ Javascript

4. และส่วนที่เป็นแฮ็ค: วิดเจ็ตวันที่ / เวลาผู้ดูแลระบบสันนิษฐานว่าโหลดสิ่งของ i18n JS และยังต้องใช้ core.js แต่ไม่ได้จัดเตรียมอย่างใดอย่างหนึ่งโดยอัตโนมัติ ดังนั้นในเทมเพลตของคุณด้านบน {{form.media}} คุณจะต้อง:

   <script type="text/javascript" src="/my_admin/jsi18n/"></script>
   <script type="text/javascript" src="/media/admin/js/core.js"></script>
   

   คุณอาจต้องการใช้ผู้ดูแลระบบ CSS ต่อไปนี้ (ขอบคุณอเล็กซ์ที่กล่าวถึงเรื่องนี้):

   <link rel="stylesheet" type="text/css" href="/media/admin/css/forms.css"/>
   <link rel="stylesheet" type="text/css" href="/media/admin/css/base.css"/>
   <link rel="stylesheet" type="text/css" href="/media/admin/css/global.css"/>
   <link rel="stylesheet" type="text/css" href="/media/admin/css/widgets.css"/>
   

นี่หมายความว่าสื่อผู้ดูแลระบบของ Django (ADMIN_MEDIA_PREFIX) อยู่ที่ / media / admin / - คุณสามารถเปลี่ยนสิ่งนั้นสำหรับการตั้งค่าของคุณ เป็นการดีที่คุณจะใช้ตัวประมวลผลบริบทเพื่อส่งผ่านค่านี้ไปยังเทมเพลตของคุณแทนการเข้ารหัสแบบฮาร์ดโค้ด แต่มันอยู่นอกเหนือขอบเขตของคำถามนี้

สิ่งนี้ต้องการให้ URL / my_admin / jsi18n / เชื่อมต่อด้วยตนเองถึง django.views.i18n.javascript_catalog ดู (หรือ null_javascript_catalog หากคุณไม่ได้ใช้ I18N) คุณต้องทำด้วยตัวเองแทนที่จะต้องผ่านแอปพลิเคชันผู้ดูแลระบบเพื่อให้สามารถเข้าถึงได้ไม่ว่าคุณจะลงชื่อเข้าใช้ในระบบหรือไม่ (ขอบคุณJeremy ที่ชี้ให้เห็นสิ่งนี้) โค้ดตัวอย่างสำหรับ URLconf ของคุณ:

(r'^my_admin/jsi18n', 'django.views.i18n.javascript_catalog'),

สุดท้ายถ้าคุณใช้ Django 1.2 หรือใหม่กว่าคุณต้องมีรหัสเพิ่มเติมในแม่แบบของคุณเพื่อช่วยให้วิดเจ็ตค้นหาสื่อของพวกเขา:

{% load adminmedia %} /* At the top of the template. */

/* In the head section of the template. */
<script type="text/javascript">
window.__admin_media_prefix__ = "{% filter escapejs %}{% admin_media_prefix %}{% endfilter %}";
</script>

ขอบคุณlupefiascoสำหรับการเพิ่มนี้

ฉันคิดว่าการใช้วิดเจ็ตวันที่ / เวลาของคุณกับ JavaScript บางตัวจึงเป็นไปได้มากขึ้น

ใช่ฉันลงเอยด้วยการเอาชนะ / admin / jsi18n / url

นี่คือสิ่งที่ฉันเพิ่มใน URL ของฉัน ตรวจสอบให้แน่ใจว่าอยู่เหนือ / admin / url

    (r'^admin/jsi18n', i18n_javascript),

และนี่คือฟังก์ชั่น i18n_javascript ที่ฉันสร้างขึ้น

from django.contrib import admin
def i18n_javascript(request):
  return admin.site.i18n_javascript(request)

ฉันพบตัวเองอ้างอิงโพสต์นี้เป็นจำนวนมากและพบว่าเอกสารที่กำหนดเล็กน้อยวิธี hacky น้อยที่จะเริ่มต้นการแทนที่วิดเจ็ต

( ไม่จำเป็นต้องแทนที่เมธอด __init__ ของ ModelForm )

อย่างไรก็ตามคุณยังต้องเชื่อมโยง JS และ CSS ของคุณอย่างเหมาะสมตามที่ระบุไว้ใน Carl

forms.py

from django import forms
from my_app.models import Product
from django.contrib.admin import widgets                                       


class ProductForm(forms.ModelForm):
    mydate = forms.DateField(widget=widgets.AdminDateWidget)
    mytime = forms.TimeField(widget=widgets.AdminTimeWidget)
    mydatetime = forms.SplitDateTimeField(widget=widgets.AdminSplitDateTime)

    class Meta:
        model = Product

ประเภทเขตข้อมูลอ้างอิงเพื่อค้นหาเขตข้อมูลฟอร์มเริ่มต้น

รหัสหัวของฉันสำหรับรุ่น 1.4 (บางอันใหม่และบางอันถูกลบออก)

{% block extrahead %}

<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}admin/css/forms.css"/>
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}admin/css/base.css"/>
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}admin/css/global.css"/>
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}admin/css/widgets.css"/>

<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/core.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.init.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/actions.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/calendar.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/admin/DateTimeShortcuts.js"></script>

{% endblock %}

เริ่มต้นใน Django 1.2 RC1 หากคุณใช้เคล็ดลับเลือกวันที่ของผู้ดูแลระบบ Django ต้องเพิ่มสิ่งต่อไปนี้ลงในเทมเพลตของคุณหรือคุณจะเห็นไอคอนไอคอนปฏิทินถูกอ้างอิงผ่าน "/ missing-admin-media-prefix" /"

{% load adminmedia %} /* At the top of the template. */

/* In the head section of the template. */
<script type="text/javascript">
window.__admin_media_prefix__ = "{% filter escapejs %}{% admin_media_prefix %}{% endfilter %}";
</script>

การเติมเต็มคำตอบโดย Carl Meyer ฉันต้องการแสดงความคิดเห็นว่าคุณต้องใส่ส่วนหัวนั้นในบล็อกที่ถูกต้อง (ภายในส่วนหัว) ภายในแม่แบบของคุณ

{% block extra_head %}

<link rel="stylesheet" type="text/css" href="/media/admin/css/forms.css"/>
<link rel="stylesheet" type="text/css" href="/media/admin/css/base.css"/>
<link rel="stylesheet" type="text/css" href="/media/admin/css/global.css"/>
<link rel="stylesheet" type="text/css" href="/media/admin/css/widgets.css"/>

<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="/media/admin/js/core.js"></script>
<script type="text/javascript" src="/media/admin/js/admin/RelatedObjectLookups.js"></script>

{{ form.media }}

{% endblock %}

สำหรับ Django> = 2.0

หมายเหตุ: การใช้วิดเจ็ตผู้ดูแลระบบสำหรับเขตข้อมูลวันที่ไม่ใช่ความคิดที่ดีเนื่องจากสไตล์ชีตผู้ดูแลระบบอาจขัดแย้งกับสไตล์ชีตไซต์ของคุณในกรณีที่คุณใช้ bootstrap หรือเฟรมเวิร์ก CSS อื่น ๆ หากคุณกำลังสร้างเว็บไซต์ของคุณเกี่ยวกับการใช้บูตบูต-datepicker เครื่องมือของฉันDjango-บูต-datepicker บวก

ขั้นตอนที่ 1:เพิ่มjavascript-catalogURL ลงในไฟล์ (ไม่ใช่ของแอป) urls.pyโครงการ

from django.views.i18n import JavaScriptCatalog

urlpatterns = [
    path('jsi18n', JavaScriptCatalog.as_view(), name='javascript-catalog'),
]

ขั้นตอนที่ 2:เพิ่มทรัพยากร JavaScript / CSS ที่ต้องการลงในเทมเพลตของคุณ

<script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
<script type="text/javascript" src="{% static '/admin/js/core.js' %}"></script>
<link rel="stylesheet" type="text/css" href="{% static '/admin/css/widgets.css' %}">
<style>.calendar>table>caption{caption-side:unset}</style><!--caption fix for bootstrap4-->
{{ form.media }}        {# Form required JS and CSS #}

ขั้นตอนที่ 3:forms.pyการใช้เครื่องมือสำหรับผู้ดูแลระบบช่องใส่วันเวลาของคุณ

from django.contrib.admin import widgets
from .models import Product

class ProductCreateForm(forms.ModelForm):
    class Meta:
        model = Product
        fields = ['name', 'publish_date', 'publish_time', 'publish_datetime']
        widgets = {
            'publish_date': widgets.AdminDateWidget,
            'publish_time': widgets.AdminTimeWidget,
            'publish_datetime': widgets.AdminSplitDateTime,
        }

ด้านล่างนี้จะใช้เป็นทางเลือกสุดท้ายหากล้มเหลวข้างต้น

class PaymentsForm(forms.ModelForm):
    class Meta:
        model = Payments

    def __init__(self, *args, **kwargs):
        super(PaymentsForm, self).__init__(*args, **kwargs)
        self.fields['date'].widget = SelectDateWidget()

เหมือนกับ

class PaymentsForm(forms.ModelForm):
    date = forms.DateField(widget=SelectDateWidget())

    class Meta:
        model = Payments

วางสิ่งนี้ไว้ในแบบฟอร์มของคุณ from django.forms.extras.widgets import SelectDateWidget

แล้วการกำหนดคลาสให้กับวิดเจ็ตของคุณแล้วผูกคลาสนั้นกับ JQuery datepicker?

แบบฟอร์ม Django

class MyForm(forms.ModelForm):

  class Meta:
    model = MyModel

  def __init__(self, *args, **kwargs):
    super(MyForm, self).__init__(*args, **kwargs)
    self.fields['my_date_field'].widget.attrs['class'] = 'datepicker'

และ JavaScript บางส่วนสำหรับเทมเพลต:

  $(".datepicker").datepicker();

Updated วิธีการแก้ปัญหาและวิธีแก้ปัญหาสำหรับSplitDateTimeกับต้อง = false :

forms.py

from django import forms

class SplitDateTimeJSField(forms.SplitDateTimeField):
    def __init__(self, *args, **kwargs):
        super(SplitDateTimeJSField, self).__init__(*args, **kwargs)
        self.widget.widgets[0].attrs = {'class': 'vDateField'}
        self.widget.widgets[1].attrs = {'class': 'vTimeField'}  


class AnyFormOrModelForm(forms.Form):
    date = forms.DateField(widget=forms.TextInput(attrs={'class':'vDateField'}))
    time = forms.TimeField(widget=forms.TextInput(attrs={'class':'vTimeField'}))
    timestamp = SplitDateTimeJSField(required=False,)

form.html

<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="/admin_media/js/core.js"></script>
<script type="text/javascript" src="/admin_media/js/calendar.js"></script>
<script type="text/javascript" src="/admin_media/js/admin/DateTimeShortcuts.js"></script>

urls.py

(r'^admin/jsi18n/', 'django.views.i18n.javascript_catalog'),

ฉันใช้สิ่งนี้มันเยี่ยมมาก แต่ฉันมี 2 ปัญหากับเทมเพลต:

1. ฉันเห็นไอคอนปฏิทินสองครั้งสำหรับทุกไฟล์ในเทมเพลต

2. และสำหรับ TimeField ฉันมี ' ป้อนวันที่ที่ถูกต้อง '

   

models.py

from django.db import models
    name=models.CharField(max_length=100)
    create_date=models.DateField(blank=True)
    start_time=models.TimeField(blank=False)
    end_time=models.TimeField(blank=False)

forms.py

from django import forms
from .models import Guide
from django.contrib.admin import widgets

class GuideForm(forms.ModelForm):
    start_time = forms.DateField(widget=widgets.AdminTimeWidget)
    end_time = forms.DateField(widget=widgets.AdminTimeWidget)
    create_date = forms.DateField(widget=widgets.AdminDateWidget)
    class Meta:
        model=Guide
        fields=['name','categorie','thumb']

ใน Django 10. myproject / urls.py: ที่จุดเริ่มต้นของ urlpatterns

  from django.views.i18n import JavaScriptCatalog

urlpatterns = [
    url(r'^jsi18n/$', JavaScriptCatalog.as_view(), name='javascript-catalog'),
.
.
.]

ใน template.html ของฉัน:

{% load staticfiles %}

    <script src="{% static "js/jquery-2.2.3.min.js" %}"></script>
    <script src="{% static "js/bootstrap.min.js" %}"></script>
    {# Loading internazionalization for js #}
    {% load i18n admin_modify %}
    <script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
    <script type="text/javascript" src="{% static "/admin/js/jquery.init.js" %}"></script>

    <link rel="stylesheet" type="text/css" href="{% static "/admin/css/base.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "/admin/css/forms.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "/admin/css/login.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "/admin/css/widgets.css" %}">



    <script type="text/javascript" src="{% static "/admin/js/core.js" %}"></script>
    <script type="text/javascript" src="{% static "/admin/js/SelectFilter2.js" %}"></script>
    <script type="text/javascript" src="{% static "/admin/js/admin/RelatedObjectLookups.js" %}"></script>
    <script type="text/javascript" src="{% static "/admin/js/actions.js" %}"></script>
    <script type="text/javascript" src="{% static "/admin/js/calendar.js" %}"></script>
    <script type="text/javascript" src="{% static "/admin/js/admin/DateTimeShortcuts.js" %}"></script>

การตั้งค่า Django ของฉัน: 1.11 Bootstrap: 3.3.7

เนื่องจากไม่มีคำตอบใดที่ชัดเจนอย่างสมบูรณ์ฉันจึงแบ่งปันรหัสเทมเพลตซึ่งไม่มีข้อผิดพลาดเลย

เทมเพลตครึ่งบน:

{% extends 'base.html' %}
{% load static %}
{% load i18n %}

{% block head %}
    <title>Add Interview</title>
{% endblock %}

{% block content %}

<script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/core.js' %}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/forms.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/widgets.css' %}"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>

ครึ่งล่าง:

<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/jquery.init.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/actions.min.js' %}"></script>
{% endblock %}

3 มิถุนายน 2020 (คำตอบทั้งหมดไม่ได้ผลคุณสามารถลองใช้วิธีแก้ปัญหานี้ที่ฉันใช้สำหรับ TimeField)

ใช้ง่ายCharfieldสำหรับเขตเวลา ( เริ่มต้นและสิ้นสุดในตัวอย่างนี้) ในรูปแบบ

forms.py

เราสามารถใช้FormหรือModelFormที่นี่

class TimeSlotForm(forms.ModelForm):
    start = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'HH:MM'}))
    end = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'HH:MM'}))

    class Meta:
        model = TimeSlots
        fields = ('start', 'end', 'provider')

แปลงอินพุตสตริงเป็นวัตถุเวลาในมุมมอง

import datetime
def slots():
    if request.method == 'POST':
        form = create_form(request.POST)
        if form.is_valid():                
            slot = form.save(commit=False)
            start = form.cleaned_data['start']
            end = form.cleaned_data['end']
            start = datetime.datetime.strptime(start, '%H:%M').time()
            end = datetime.datetime.strptime(end, '%H:%M').time()
            slot.start = start
            slot.end = end
            slot.save()