如何在 Django 模板中手动添加 Datetime 输入元素？

在 Django 模板中手动添加 Datetime 输入元素

简介

在 Django 模板中添加 Datetime 输入元素可以让你在表单之外收集用户输入的时间和日期数据。本文将指导你如何使用 JavaScript 手动添加和初始化 Datetime 输入元素。

步骤

1. 添加 JavaScript 文件

在你的模板中，包含 Django 内置的 DateTimeShortcuts.js 文件：

<script src="{% static 'django/js/admin/DateTimeShortcuts.js' %}"></script>

2. 创建输入元素

创建 HTML 输入元素，并设置适当的类型和 ID：

<input type="datetime-local" id="my-datetime-input">

3. 使用 JavaScript

使用 JavaScript 来初始化 Datetime 输入元素：

$('#my-datetime-input').djangoDatetime();

4. 设置选项

你可以设置其他选项来自定义输入元素，例如：

• allowBlank: 是否允许为空
• showTime: 是否显示时间选择器
• showDate: 是否显示日期选择器
• dateFormat: 日期格式
• timeFormat: 时间格式

示例

以下是一个使用 Django 内置 DateTimeField 小部件的示例：

<input type="datetime-local" id="my-datetime-input">
<script>
  $('#my-datetime-input').djangoDatetime({
    showTime: true,
    timeFormat: 'HH:mm:ss',
    dateFormat: 'yyyy-MM-dd'
  });
</script>

注意

• 确保 djangoDatetime() 函数在 DOM 准备好后调用。
• Django's Datetime 输入元素包含 Django 表单验证，但仅适用于表单。因此，对于手动添加的元素，你需要实现自己的验证。
• 如果在同一页面上有多个 Datetime 输入元素，请确保它们具有不同的 ID。

常见问题解答

1. 如何设置日期和时间的默认值？

你可以在 HTML 输入元素中直接设置 value 属性来指定默认值。例如：

<input type="datetime-local" id="my-datetime-input" value="2023-08-15T16:30">

2. 如何禁用输入元素？

设置 disabled 属性即可禁用输入元素：

<input type="datetime-local" id="my-datetime-input" disabled>

3. 如何验证输入？

由于手动添加的元素不包含 Django 的表单验证，你需要实现自己的验证逻辑。例如：

$('#my-datetime-input').on('change', function() {
  var value = $(this).val();
  if (value === '') {
    // 显示错误消息
  } else if (!isValidDateTime(value)) {
    // 显示错误消息
  }
});

4. 如何自定义选择器的外观？

你可以使用 CSS 来自定义 Datetime 选择器的外观。例如：

#my-datetime-input .datetimepicker {
  width: 300px;
  border: 1px solid #ccc;
}

5. 如何获取选定的日期和时间？

使用 value 属性可以获取选定的日期和时间：

var selectedDateTime = $('#my-datetime-input').val();