Trường Ngày giờ trong mô hình biểu mẫu Django

Question

Khi sử dụng DateTimeField trong ModelForm s, chúng trông giống như trường văn bản. Làm thế nào tôi có thể làm cho họ trông giống như trong admin? (Khi tôi đi đến admin và thêm một chương trình tôi thấy các trường như trường ngày)

# models.py 
class Show(models.Model): 
    ... 
    start_time = models.DateTimeField("Event Time") 
    sale_end_time = models.DateTimeField("Sale End Time") 

class ShowForm(ModelForm): 

    class Meta: 
     model = Show 

# views.py 
def createshow(request): 
    if request.method == 'POST': 
     form = ShowForm(request.POST) 
     if form.is_valid(): 
      form.save() 
      return HttpResponseRedirect('/showsaved') 
    else: 
     form = ShowForm() 
     return render(request, 'BizCreateShow.html', {'ShowForm' : form}) 

Trong mẫu:

<form class="form-horizontal well" action="" method="post"> 
{% csrf_token %} 
    {{ ShowForm }} </br> 
    <input type="submit" value="Submit"> 
</form> 

Answer 1

Bạn có thể làm điều này với các widget django. Nó rất đơn giản và dễ thực hiện. Dưới đây là các chi tiết cách bạn có thể sử dụng điều này bằng cách sử dụng các widget.

trong forms.py

class ShowForm(ModelForm): 
    class Meta: 
     model = Show 
    def __init__(self, *args, **kwargs): 
     super(ShowForm, self).__init__(*args, **kwargs) 
     self.fields['start_time'].widget = widgets.AdminSplitDateTime() 
     self.fields['sale_end_time'].widget = widgets.AdminSplitDateTime() 

trong mẫu

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

<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"/> 

Đây là nó. Xin vui lòng cho tôi biết nếu tôi không rõ ràng lắm. Hoặc bạn đang đối mặt với bất kỳ lỗi nào trong đó.

Answer 2

Bạn có lẽ nên sử dụng một cái gì đó giống như jQuery UI của datepicker widget:

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.