希望允许用户使用Django模型和表单选择datetime吗

Question

我有一个Django模型记录了预订的日期和时间。我无法创建日期和时间选择器

我已经创建了一个模型和表单，允许选择日期，但不允许选择时间

型号.py

from django.db import models
from django.contrib.auth.models import User
# Create your models here.

class Reservation(models.Model):
    LastName = models.CharField(max_length=100)
    FirstName = models.CharField(max_length=100)
    ReserveDate = models.DateTimeField()
    Time = models.TimeField()

表单.py

from django import forms
from .models import Reservation
from datetime import datetime


class DateInput(forms.DateInput):
    input_type = 'date'


class TimeInput(forms.TimeInput):
    input_type = 'time'


class ReservationForm(forms.ModelForm):
    class Meta:
        model = Reservation
        fields = ['LastName', 'FirstName', 'ReserveDate', 'Time']
        widgets = {
           'ReserveDate':DateInput(),
           'Time':TimeInput(),
        }

预订.html

{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block content %}
<style>
    .asteriskField {
      display: none;
    }
</style>
<div class="row justify-content-center">
    <div class="col-6">
        <div class="card">
            <div class="card-body">
                <h2>
                    Contact
                </h2>
                <form action="" method="post" novalidate>
                    {% csrf_token %}
                    {{ form|crispy }}
                    <input type="submit" class="btn btn-secondary" value="Create" />

                </form>
            </div>  
          </div>
      </div>
</div>
{% endblock %}

我想看看日期时间选取器上的日期和时间

Answer 1

安装

• 运行pip install django-datetimepicker
• 将'datetimepicker'添加到INSTALLED_APPS

基本用法

下面是一个如何使用小部件的示例。 更多的例子可以在示例项目中找到

1. 将DateTimePicker分配给DateTimeField、DateField或TimeField

from django import forms
from datetimepicker.widgets import DateTimePicker


class SampleForm(forms.Form):

datetime = forms.DateTimeField(
widget=DateTimePicker(),
)

这将呈现以下html代码：

<div class=" date input-group" id="datetimepicker_id_datetime">
<input class=" form-control" id="id_datetime" name="datetime" type="text" required/>
</div>
<script>(function () {
$(document).ready(function() {
$("#id_datetime").datetimepicker();
});
})(jQuery);
</script>

将选项传递给jQuery.datetimepicker

您可以根据需要添加jQuery.datetimepicker选项。 See XDSoft's documentation for a full list of options.

datetime = forms.DateTimeField(
widget=DateTimePicker(options={
'format': '%Y-%m-%d %H:%M',
'language': 'en-us',
}),
)

对于自定义，可以使用docs