想要允许用户使用 django 模型和表单来选择日期时间

Question

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

我创建了一个允许选择日期但不能选择时间的模型和表格。

models.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()

form.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(),
        }

Reservation.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