python Django Modelform日期时间选择器

v64noz0r  于 2023-04-10  发布在  Python
关注(0)|答案(2)|浏览(188)

我想为我的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'})

但我想要一个日期和时间选择器。
有人能帮我吗?:)
谢谢!

kr98yfug

kr98yfug1#

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

7ivaypg9

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选择器,它允许您选择日期和时间。

相关问题