如何从 Django 模板变量填充 jQuery Datepicker 小部件？

Question

我在使用 Django 模板变量的值填充 jQuery Datepicker 小部件时遇到问题。我有以下模型和表单字段：

# models.py
class Meeting(models.Model):
    date = models.DateField()

# forms.py
class AddMeetingForm(forms.Form):
    date = forms.DateField(
        widget=forms.widgets.DateInput(attrs={'type': 'date'}))

在我的模板中，日期选择器小部件作用于“日期”输入标签。我希望默认日期格式为“mm-dd-yyyy”，例如“2016 年 12 月 30 日”。我告诉日期选择器期望的日期格式，然后我将会议对象传递给模板并使用日期过滤器打印出它的日期字段以将其转换为所需的格式：

# edit_meeting.html
<div>
    <label for="id_date">Date</label>
    {{ form.date.errors }}
    <input type="text" name="date" id="id_date"/>
</div>

<script>
$(function() {
    $( '#id_date' ).datepicker({
            dateFormat: 'mm-dd-yy',
    });
    $( '#id_date' ).datepicker(
            'setDate', {{ meeting.date|date:"mm-dd-Y" }})
});
</script>

jQuery formatDate utility 定义了这个小部件的日期格式，而 Django 的 date filter 指定了 Django 日期的格式。

当我在我的 PostgreSQL 数据库中打印值时，我看到该字段的值是“2016-12-30”，当我从呈现模板的视图内部将 meeting.date 字段打印到我的控制台时，我也看到它的值为“2016-12-30”。但是，日期选择器小部件正在使用值“06-30-2006”填充该字段。我是否错误地设置了 jQuery Datepicker 小部件？我对 jQuery 没有太多经验，感觉这就是问题所在。

更新

根据另一个 SO question 我尝试将日期写入页面中的隐藏字段，然后直接引用该字段，但这也不会使用 party.date 值预先填充日期字段。

<div id="meeting_date" class="hidden">
    {{ meeting.date }}
</div>

<script>
$(function() {
    var meeting_date = $("#meeting_date").text();
    $( '#id_date' ).datepicker({
            dateFormat: 'mm-dd-yy',
    });
    $( '#id_date' ).datepicker(
            'setDate', $.datepicker.parseDate( 'yy-mm-dd', new Date(meeting_date) )
    );
});
</script>

解决方案

正如 gaetanoM 所示，将 Django 模板变量插入 jQuery 函数的关键是用单引号或双引号将变量括起来。在这种情况下，我还必须应用日期过滤器。 Django 日期过滤器“Y-m-d”表示从 Django 传入的日期值的格式为“yy-mm-dd”（例如“2016-12-30”）。一旦 jQuery 通过 parseDate 函数知道日期的“yy”、“mm”和“dd”“片段”是什么，我们使用 jQuery 的默认日期格式“mm/dd/yy”将它们显示在小部件中。我不明白的一件事是如果jQuery的默认日期格式是'mm/dd/yy'，为什么你必须在函数的前三行明确指定它？无论如何，我很高兴它能正常工作。

<script>
$(function() {
    $( '#id_date' ).datepicker({
            dateFormat: 'mm/dd/yy',
    });
    $( '#id_date' ).datepicker(
            'setDate', $.datepicker.parseDate( 'yy-mm-dd', '{{ party.date|date:"Y-m-d" }}' )
    );
});
</script>

Answer 1

根据django date template：

你可以改变：

'setDate', {{ meeting.date|date:"mm-dd-Y" }})

到：

'setDate', "{{ meeting.date|date:"m-d-Y" }}")

老答案

您将 dateFormat 定义为 'mm-dd-yy'。

因此，根据setDate( date )，您可以传递定义格式的字符串或日期。 因为格式不同，您可以使用 $.datepicker.parseDate(format, value, options) 将日期字符串转换为正确的日期值：

$( '#id_date' ).datepicker({
  dateFormat: 'mm-dd-yy'
});
$( '#id_date' ).datepicker(
  'setDate', $.datepicker.parseDate( 'yy-mm-dd', '2016-12-30' )
);

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


<p>Date: <input type="text" id="id_date"></p>