如何在简单的Django表单中使用日期选择器？

jqjz2hbq 于 2022-11-26 发布在 Go

关注(0)|答案(5)|浏览(124)

在您将此标记为对most famous django datepicker question on SO的重复之前，请听我说完。我已经浏览了搜索结果前十页中的所有问题，但似乎没有人从一开始就在解释任何事情。
我正在寻找的是一个最简单的方法有一个日期选择器在我的形式，我不知道如果最简单的方法是导入它从管理或使用现有的jQuery的东西，但无论是什么，有人能请解释一步一步，就像你会做一个婴儿？这，我相信将有助于任何新的程序员喜欢我在那里谁正在寻找学习。这是我目前为止。
我的表单：

class SampleForm(forms.Form):
    date_of_birth = forms.DateField(label='Enter Date')

我的检视：

def dlp_test(request):
    form = SampleForm()
    return render(request, 'dlp_test.html', {'form': form})

我的模板：

<form action="/your-name/" method="post">
    {% csrf_token %}
    {{ form }}
    <input type="submit" value="Submit" />
</form>

这是任何人都可以开始的最简单的设置，我如何从这里开始呢？当有人单击HTML中的日期字段时，我希望弹出一个日历，以便他们可以选择日期。
如果实现这一点需要我在本地存储JS或jQuery文件，我更希望将URL嵌入到HTML中，而不是下载并提及源代码，因为我的路径现在很混乱。你可以假设我除了Django和Python之外，没有下载或安装任何其他东西。

django

来源：https://stackoverflow.com/questions/42165163/how-do-i-use-a-datepicker-on-a-simple-django-form

5条答案

按热度按时间

ghhkc1vu1#

这可能有点笨拙，但当我想对特定的表单字段使用jQueryUI datepicker时，我会这样做：
在我的模板的<head>中添加样式表：
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
在我的模板末尾添加javascript文件：
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
表单中要使用日期选择器的字段将有一个特定的ID。在本例中，它可能是id_date_of_birth。因此，您可以通过ID选择出生日期文本框，并将日期选择器应用于它（假设您也在使用jQuery）：

<script>
    $(document).ready(function() {
       $('#id_date_of_birth').datepicker({firstDay: 1,
          dateFormat: "dd/mm/yy",
          defaultDate: "16/06/2017",
          minDate: "16/06/2017",
          maxDate: "25/06/2017"});
    });
</script>

请注意，这个代码片段必须在您包含javascript文件之后出现。另外，我正在设置一些您可能不需要的默认值-使其工作的最简单方法是：

<script>
    $(document).ready(function() {
      $('#id_date_of_birth').datepicker();
    });
</script>

希望这对你有帮助!

赞(0）回复(0）举报 2022-11-26

xlpyo6sf2#

这是我添加到我的模板中的内容，它现在可以工作了。对于将来要寻找答案的人，它就在这里。虽然，我必须告诉你，这可能在大型项目中伸缩性不好，你可能不得不在任何地方使用这个函数或类似的东西，但现在，这对我来说是有效的。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  </head>

<body>
<form action="." method="post">
    {% csrf_token %}
    {{form.as_p}}
    <p>Date: <input type="text" id="datepicker"></p>
    <input type="submit" value="Submit" />
</form>

<script>

      $( function()
      {
        $( "#id_date_of_birth" ).datepicker();
        $( "#datepicker" ).datepicker();
      } );
</script>

</body>
</html>

赞(0）回复(0）举报 2022-11-26

t8e9dugd3#

我最近需要在表单中添加一个带有日期选择器的日期字段。我做得很快，所以请原谅错字或3：）
Jquery引用了一个id“#id_date_of_birth”，但最好将其作为一个类，如“datechooser”，这样就可以在任何表单上使用它，而不仅仅是“date_of_birth”表单字段。

型号.py

from django.db import models

class Sample(models.Model):
    date_of_birth = models.DateTimeField(help_text='date_of_birth', null=True)

表单.py

from django.forms import ModelForm, widgets, DateTimeField, DateField, DateInput

class SampleForm(ModelForm):
    date_of_birth = DateTimeField(widget = DateInput(format='%Y-%m-%d'),
                                   input_formats=('%Y-%m-%d',),
                                   required=False)
    class Meta:
        model = Sample
        fields = ["date_of_birth",]

查看次数.py

from django.views import generic
from sample.models import Sample
from sample.forms import SampleForm

def dlp_test(request):
    form = SampleForm()
    form = SampleForm(initial={'date_of_birth': timezone.now().date()}) # Set an initial value for today

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

dlp_测试.html

{{ form.date_of_birth }}
{{ form.date_of_birth.errors }}

通过Jquery为表单字段选择日期
标题.html

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

        $( function() {
            $( "#id_date_of_birth" ).datepicker({
                dateFormat: 'yy-mm-dd',
                changeMonth: true,
                changeYear: true
            });
        });

赞(0）回复(0）举报 2022-11-26

vbkedwbf4#

这就是我在django表单中获取datepicker的方法。
通过pip命令安装bootstrap_datepicker_plus。
pip安装django-bootstrap_日期选择器_plus
forms.py

from .models import Hello
from django import forms
from bootstrap_datepicker_plus import DatePickerInput

class CreateForm(forms.ModelForm):
    class Meta:
        model = Hello
        fields =[            
            "Date",
        ]

    widgets = {
        'Date': DatePickerInput(),
    }

settings.py

INSTALLED_APPS = [
    'bootstrap_datepicker_plus',
]

赞(0）回复(0）举报 2022-11-26

kulphzqa5#

我搜索和斗争了很多，以获得修复的问题，我推荐这个源enter link description here
In “forms.py”

# Create custom widget in your forms.py file.
class DateInput(forms.DateInput):
    input_type = 'date'

In the same “forms.py”

# Form class in forms.py
class LastActiveForm(forms.Form):
    """
    Last Active Date Form
    """
    last_active = forms.DateField(widget=DateInput)

这与formset也能完美配合。
在模板文件中：

{ form.as_p }

仅在没有任何外部库或附加组件的情况下

赞(0）回复(0）举报 2022-11-26

我来回答

如何在简单的Django表单中使用日期选择器？

5条答案

仅在没有任何外部库或附加组件的情况下

相关问题

热门标签

最新问答