时间戳

首页 > 解决方案 > Django 日期和时间选择器

html - Django 日期和时间选择器

问题描述

我正在尝试使用 django 构建我的第一个网站，到目前为止我已经完成了用户注册和登录，但现在我被困住了：我想向用户展示一个每周日历，他们可以在其中选择一天并预订体育课. 我试图像处理表单域一样处理每个工作日，但它不起作用。

关于我应该如何解决这个问题的任何建议？

我正在寻找解释/教程之类的东西，如果可能的话，会避免使用 github 项目。

谢谢！

更新 Alrigth，感谢我得到的答案，我这样做了： 1.我在名为 register 的应用程序中注册 forms.py 中的新用户：

from django import forms
from django.contrib.auth import login, authenticate
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User


class RegisterForm(UserCreationForm):
    first_name=forms.CharField(max_length=50)
    last_name=forms.CharField(max_length=50)
    email=forms.EmailField()
    mobile=forms.CharField(max_length=13)


    class Meta:
        model = User
        fields=['username','first_name','last_name','email','mobile','password1', 'password2']

2.创建一个名为reservation的新应用程序，在模型中我尝试构建一个新数据库

from django.db import models
from register import forms
import datetime


class Booking(models.Model):
    class_name = models.ForeignKey('Class', on_delete=models.CASCADE)
    created_by = forms.ForeignKey('User', on_delete=models.SET_NULL, related_name="bookings")
    created_datetime = models.DateTimeField(auto_now_add=True, blank=True, editable=False)
    selected_datetime = models.DateTimeField(blank=True)


class Class(models.Model):
     class_time=models.DateTimeField()
     class_day=models.DateField()
     MIN_PEOPLE = 2 #not less than 2 people each class
     MAX_PEOPLE = 12 #not more than 12 allowed

但在这里我得到了这个错误：

AttributeError: module 'register.forms' has no attribute 'ForeignKey'

3.在预订中，我创建了一个名为 reservation.html 的 html 页面，我将日历放在我希望用户选择一天、上课时间并预订的地方

<!-- Class Time Section Begin -->
<section class="classtime-section class-time-table spad">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <div class="section-title">
                    <h2>Orario Classi</h2>
                </div>
            </div>
        </div>
        <div class="classtime-table">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>Lunedì</th>
                        <th>Martedì</th>
                        <th>Mercoledì</th>
                        <th>Giovedì</th>
                        <th>Venerdì</th>
                        <th>Sabato</th>
                        <th>Domenica</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="workout-time">10.00</td>
                        <td class="hover-bg ts-item" data-tsmeta="crossfit">
                            <span>10.00 - 14.00</span>
                            <h6>Crossfit lezione</h6>
                        </td>
                        <td></td>
                        <td class="hover-bg ts-item" data-tsmeta="crossfit">
                            <span>10.00 - 15.00</span>
                            <h6>Crossfit lezione</h6>
                        </td>
                        <td></td>
                        <td class="hover-bg ts-item" data-tsmeta="lunge">
                            <span>10.00 - 13.00</span>
                            <h6>Mobility</h6>
                        </td>
                        <td></td>
                        <td class="hover-bg ts-item" data-tsmeta="lunge">
                            <span>10.00 - 13.30</span>
                            <h6>Mobility</h6>
                        </td>
                    </tr>
                    <tr>
                        <td class="workout-time">14.00</td>
                        <td></td>
                        <td class="hover-bg ts-item" data-tsmeta="lunge">
                            <span>14.00 - 17.00</span>
                            <h6>Weight lifting</h6>
                        </td>
                        <td></td>
                        <td class="hover-bg ts-item" data-tsmeta="crossfit">
                            <span>14.00 - 17.00</span>
                            <h6>Crossfit lezione</h6>
                        </td>
                        <td></td>
                        <td class="hover-bg ts-item" data-tsmeta="walls">
                            <span>14.00 - 15.30</span>
                            <h6>Mobility</h6>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td class="workout-time">16.00</td>
                        <td class="hover-bg ts-item" data-tsmeta="lunge">
                            <span>16.00 - 18.00</span>
                            <h6>Lezione</h6>
                        </td>
                        <td></td>
                        <td class="hover-bg ts-item" data-tsmeta="candy">
                            <span>16.00 - 19.00</span>
                            <h6>Lezione</h6>
                        </td>
                        <td></td>
                        <td class="hover-bg ts-item" data-tsmeta="candy">
                            <span>16.00 - 19.00</span>

                        </td>
                        <td class="hover-bg ts-item" data-tsmeta="ppsr">
                            <span>16.00 - 17.00</span>
                            <h6></h6>
                        </td>
                        <td class="hover-bg ts-item" data-tsmeta="murph">
                            <span>16.00 - 20.00</span>
                            <h6></h6>
                        </td>
                    </tr>
                    <tr>
                        <td class="workout-time">18.00</td>
                        <td class="hover-bg ts-item" data-tsmeta="walls">
                            <span>18.00 - 20.00</span>
                            <h6></h6>
                        </td>
                        <td class="hover-bg ts-item" data-tsmeta="ppsr">
                            <span>18.00 - 20.00</span>
                            <h6></h6>
                        </td>
                        <td></td>
                        <td class="hover-bg ts-item" data-tsmeta="chelsea">
                            <span>18.00 - 22.00</span>
                            <h6></h6>
                        </td>
                        <td></td>
                        <td class="hover-bg ts-item" data-tsmeta="annie">
                            <span>18.00 - 22.00</span>
                            <h6></h6>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td class="workout-time">20.00</td>
                        <td class="hover-bg ts-item" data-tsmeta="lunge">
                            <span>21.00 - 23.00</span>
                            <h6></h6>
                        </td>
                        <td class="hover-bg ts-item" data-tsmeta="walls">
                            <span>20.00 - 22.00</span>
                            <h6></h6>
                        </td>
                        <td class="hover-bg ts-item" data-tsmeta="walls">
                            <span>20.30 - 23.00</span>
                            <h6></h6>
                        </td>
                        <td></td>
                        <td class="hover-bg ts-item" data-tsmeta="crossfit">
                            <span>22.00 - 23.00</span>
                            <h6></h6>
                        </td>
                        <td></td>
                        <td class="hover-bg ts-item" data-tsmeta="crossfit">
                            <span>21.00 - 23.00</span>
                            <h6></h6>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>
<!-- Class Time Section End -->

问题是：我不知道如何将 reservation.html 连接到 reservation/models.py 中的数据库以及带有预订类的用户模型。

谢谢你。

标签： htmldjangocalendar

解决方案

听起来您可能正在尝试重新发明轮子。Django 可以提供一个内置的日期和时间选择器。由于我们看不到您正在使用的代码，因此我将做出一些假设：

假设您有一个名为 Bookings 的数据库模型

# models.py

import datetime

class Booking(models.Model):
    class_name = models.ForeignKey('Class', on_delete=models.CASCADE)
    created_by = models.ForeignKey('UserProfile', on_delete=models.SET_NULL, related_name="bookings")
    created_datetime = models.DateTimeField(auto_now_add=True, blank=True, editable=False)
    selected_datetime = models.DateTimeField(blank=True)

然后，当您在前端创建表单时，使用 Django 的内置表单模板 ( https://docs.djangoproject.com/en/3.0/ref/forms/ )

#myapp/forms.py

from django import forms

class BookingForm(BookingForm):
    class Meta:
        model = Booking
        fields = ('class_name', 'selected_datetime ')

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['class_name'].widget.attrs['class'] = 'formInputs'
        self.fields['class_name'].widget.attrs['placeholder'] = 'Class Name'
        self.fields['class_name'].label = 'Class Name'

        self.fields['selected_datetime '].widget.attrs['class'] = 'formInputs'
        self.fields['selected_datetime '].widget.attrs['placeholder'] = 'Select a class time'
        self.fields['selected_datetime '].label = 'Select a class time'

Views.py 文件看起来像这样：

#views.py

from myapp.forms import BookingForm
from api.models import Booking

def choose_class(request):
    form = BookingForm()

    if request.method == 'POST':
        # this is where you would handle the returned data, and save it to the database 
        class_name = request.POST['class_name']
        selected_datetime = request.POST['selected_datetime ']
        Booking.objects.create(class_name = class_name, selected_datetime=selected_datetime)

    return render(request, 'choose_class.html', {'form':form})

然后您的 HTML 模板将如下所示：

#choose_class.html

{% extends 'myapp/base.html' %}
{% load staticfiles %}

{% block content %}


<div class="chooseClass">
    <h4 class="text-center">Choose Class</h4>

    <form class="chooseClassForm" method="POST" action="{% url 'choose_class' %}">
        {% csrf_token %}
        {% if form.errors %}
            <div class="alert alert-danger" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">x</span>
                </button>
                <p>Oops! Please double check the following errors:</p>
                {% for field in form %}
                    {% if field.errors %}
                        {{ field.errors }}
                    {% endif %}
                {% endfor %}
            </div>
        {% endif %}
        {{ form.as_p }}
        <input type="submit" value="Choose that class" class="btn btn-primary">
    </form>
</div>

{% endblock %}

无论如何，还有比这更多的东西，但是由于您没有给我们太多的工作，这就是我现在要提供的，这是未经测试的代码，可能会有一些错误，因为我没有先写在IDE里。希望，这会有所帮助！

推荐阅读