python Django Modelform日期时间选择器

v64noz0r 于 2023-04-10 发布在 Python

关注(0)|答案(2)|浏览(189)

我想为我的django模型表单获取一个日期和时间选择器。
型号：

class ServiceBooker(models.Model):
    regnr = models.CharField(max_length=255)
    namn = models.CharField(max_length=255, null=True, blank=True)
    telnr = models.CharField(max_length=255)
    email = models.EmailField(max_length=255)
    service_date = models.DateTimeField()
    booked_date = models.DateTimeField(auto_now=True)
    kommentar = models.TextField()
    service_name = models.ForeignKey(ServiceType, on_delete=models.CASCADE)
    noteringar = models.TextField(default='')

forms.py:

class ServiceBookerForm(forms.ModelForm):
    service_date = forms.DateTimeField(input_formats=['%d/%m/%Y %H:%M'],
                                       widget=forms.DateTimeInput(
                                           format='%d/%m/%Y %H:%M',
                                           attrs={'class': 'form-control'}))
    class Meta:
        model = ServiceBooker
        fields = '__all__'
        exclude = ('noteringar',)

但是在网站上它不显示日期时间选择器。我知道如何修复日期选择器：

'service_date': widgets.DateInput(attrs={'type': 'date'})

但我想要一个日期和时间选择器。
有人能帮我吗？：）
谢谢！

python

来源：https://stackoverflow.com/questions/75969706/django-modelform-datetime-picker

2条答案

按热度按时间

kr98yfug1#

马可帮我找到了这个问题的答案：
你有没有尝试过datetime-local作为类型？-马可

赞(0）回复(0）举报 2023-04-10

7ivaypg92#

要将DateTime选择器添加到Django表单，您可以使用JavaScript库，如jQuery UI或其他第三方库，如用于Bootstrap的Tempus Dominus。我将提供一个使用Tempus Dominus的示例，因为它是一个受欢迎的选择，并且与Bootstrap配合良好。
首先，在你的HTML文件中包含必要的库。确保你已经包含了jQuery，Moment.js和Bootstrap（如果你还没有）：

<head>
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  
  <!-- Moment.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  
  <!-- Tempus Dominus CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tempusdominus-bootstrap-5@6.0.0-alpha.17/build/css/tempusdominus-bootstrap-5.min.css" />

  <!-- Tempus Dominus JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/tempusdominus-bootstrap-5@6.0.0-alpha.17/build/js/tempusdominus-bootstrap-5.min.js"></script>

  <!-- Bootstrap JavaScript Bundle -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</head>

然后，更新您的forms.py文件以包含DateTimeInput小部件的自定义ID或类：

class ServiceBookerForm(forms.ModelForm):
service_date = forms.DateTimeField(input_formats=['%d/%m/%Y %H:%M'],
                                   widget=forms.DateTimeInput(
                                       format='%d/%m/%Y %H:%M',
                                       attrs={'class': 'form-control', 'id': 'datetimepicker'}))
class Meta:
    model = ServiceBooker
    fields = '__all__'
    exclude = ('noteringar',)

在呈现表单的模板中，确保存在具有datetimepicker ID的表单字段。例如：

<form method="post" class="form">
  {% csrf_token %}
  {{ form.as_p }}
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

最后，添加JavaScript代码以初始化输入字段的Tempus Dominus DateTime选择器，该输入字段具有datetimepicker ID：

<script>
  $(document).ready(function() {
    $('#datetimepicker').datetimepicker({
      format: 'DD/MM/YYYY HH:mm'
    });
  });
</script>

现在，当您在网站上加载表单时，您应该会看到service_date字段的DateTime选择器，它允许您选择日期和时间。

赞(0）回复(0）举报 2023-04-10

我来回答

python Django Modelform日期时间选择器

2条答案

相关问题

热门标签

最新问答