Django中的简单日期时间选择器答案

【问题标题】：Easy date time picker in DjangoDjango中的简单日期时间选择器
【发布时间】：2022-01-04 12:25:49
【问题描述】：

我想在我的一些页面中添加几个日期选择器。我已经按照以下链接中的指南获取了 Fengyuan Chen 的 Datepicker（最后一个）： https://simpleisbetterthancomplex.com/tutorial/2019/01/03/how-to-use-date-picker-with-django.html

如果我使用提供的代码创建一个独立的 html 页面，那就太好了！我不明白如何在其他页面中嵌入日期时间选择器。

我所有的 html 页面都扩展了一个基础。我把所有的内容都放在了基础头中：

base.html:

 <head>
    /* some unrelated things*/
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> 
    </script>

    <!-- Fengyuan Chen's Datepicker -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css" integrity="sha256-b88RdwbRJEzRx95nCuuva+hO5ExvXXnpX+78h8DjyOE=" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js" integrity="sha256-/7FLTdzP6CfC1VBAj/rsp3Rinuuu9leMRGd354hvk0k=" crossorigin="anonymous"></script>

</head>

然后，在我需要选择器的页面中：

    {% extends 'main/base.html' %}
    <input id="datepicker">

    {% block myBlock%}
        <script>
          $(function () {
            $("#datepicker").datepicker();
          });
        </script>
    {% endblock %}

在我看来

def test1(response):
    
    return render(response, "main/test1.html", {})

结果是我得到一个根本不动的输入字段。

令我感到沮丧的是，许多指南是针对独立页面的，而描述嵌入的却不多。

【问题讨论】：

标签： python jquery django

【解决方案1】：

如果您没有使用任何类型的模型或表单，请在 html 文件中像这样使用它，这与 Django 之前加载该函数没有任何关系：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Datepick</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>
<input type="text" id="datepicker">
</body>
</html>

如果您使用的是表单或模型，则可以使用小部件：

from django.forms.widgets import DateInput
class dateform(forms.ModelForm):
    class Meta:
        model = date
        fields = '__all__'
        labels = {
            'dob':'Date Of Birth',
        }
        widgets = {
            'dob': forms.DateInput(attrs={'type': 'date'})
        }

【讨论】：

【解决方案2】：

最后，包含日期选择器的最简单方法是依赖input type 'date'

我知道有时不同的浏览器可能会以不同的方式显示它，但重要的是它会做我想要它做的事情：让用户选择一个日期。

html page

<form method="POST">
    {% csrf_token %}        
    Start date 
    <input type = 'date'  name='start_date' value={{defaultDates.start}}>
    End date 
    <input type = 'date'  name='end_date' value={{defaultDates.end}}>
    <button type="submit" class="btn btn-info" name="setDateRange.end">Set Date Range</button>
</form>

【讨论】：

type="date" 的元素在 IE11 及更早版本中不显示为任何日期字段/日历
@Blackranger 你是完全正确的，但我的应用程序将无法通过互联网访问。这将是一个仅限局域网的网站。所有用户都有能够理解 type="date" 的浏览器版本。所以我会坚持下去，虽然你确实是对的。