Question

在将此标记为most famous django datepicker question on SO的副本之前，请听我说。我在搜索结果的前十页中已经完成了所有问题，但似乎没有人从一开始就解释任何问题。

我正在寻找的是在我的表单上使用datepicker的最简单的方法，我不知道最简单的方法是从Admin导入它还是使用现有的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之外我没有下载或安装任何其他内容。

Answer 1

这可能有些笨拙，但是当我想将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选择出生日期文本框并将datepicker应用于此（假设您也使用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>

希望能帮到你！

Answer 2

这是我添加到模板中的内容，现在正在运行。对于将来寻找答案的人来说，就是这样。虽然，我必须告诉你，这可能无法在大型项目上很好地扩展，你可能不得不在任何地方使用这个功能或类似的东西，但是现在，这对我有用。

<!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>

Answer 3

我最近需要在表单上添加带有日期选择器的日期字段。我做得很快，所以请原谅错字或3：）

Jquery引用了一个ID“ #id_date_of_birth”，但最好将其设为“ datechooser”之类的类，以便您可以在任何表单上使用它，而不仅仅是“ date_of_birth”表单字段。

Models.py

from django.db import models

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

Forms.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",]

Views.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_test.html

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

通过Jquery的表单字段的日期选择器

Header.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
            });
        });

Answer 4

这就是我要以Django形式获取日期选择器的方法。

通过pip命令安装bootstrap_datepicker_plus。

pip install django-bootstrap_datepicker_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',
]

如何在简单的Django表单上使用datepicker？

4 个答案: