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

我在用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'}))

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

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

#edit_meeting.html
日期
{{form.date.errors}
$（函数（）{
$（'#id_date'）。日期选择器({
日期格式：“年月日”，
});
$（'#id_date'）。日期选择器(
'设定日期'，{会议日期|日期：“mm-dd-Y”}）
});

jQuery定义如何格式化此小部件的日期，而Django指定如何格式化Django日期

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

更新

因此，我尝试将日期写入页面中的隐藏字段，然后直接引用该字段，但这也不会使用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>

{{meeting.date}
$（函数（）{
var会议日期=$（“#会议日期”）.text（）；
$（'#id_date'）。日期选择器({
日期格式：“年月日”，
});
$（'#id_date'）。日期选择器(
'设置日期'，$.datepicker.parseDate（'年-月-日'，新日期（会议日期））
);
});

解决方案

正如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>

$（函数（）{
$（'#id_date'）。日期选择器({
日期格式：“mm/dd/yy”，
});
$（'#id_date'）。日期选择器(
'setDate'，$.datepicker.parseDate（'yy-mm-dd'，'{party.date | date:'Y-m-d'}}}}
);
});

根据：

您可以更改：

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

致：

旧答案

您将日期格式定义为'mm-dd-yy'

因此，根据，可以按定义的格式传递字符串或日期。 由于格式不同，您可以使用$.datepicker.parseDate（格式、值、选项）将日期字符串转换为正确的日期值：

$（'#id_date'）。日期选择器({
日期格式：“mm-dd-yy”
});
$（'#id_date'）。日期选择器(
'设置日期'，$.datepicker.parseDate（'年-月-日'，'2016-12-30'）
);

日期：
我明白你的意思，如果我像你所展示的那样硬编码我的模板，我会得到同样的结果。但从将Django变量传递给jQuery方法的角度来看，这并不能回答我的问题。如果我用{{party.date}替换您的'2016-12-30'字符串，jQuery方法将无法工作。我相信这是因为“{{”和“}}}”分隔符混淆了jQuery。我认为问题的关键是，如何将Django模板变量从Django模板中传递给jQuery方法？在jQuery中是否有方法将“{”和“}”字符替换为其ASCII等价物“123”和“125”？我能把它硬编码成“party.date”}}”这样吗？对不起，戴夫，但是{}字符必须直接从django处理。是的，你可以像往常一样在html中替换这些字符。@Dave你能看一下吗？
'setDate', "{{ meeting.date|date:"m-d-Y" }}")