如何从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”，例如“二〇一六年十二月三十〇日”。我说的是什么日期选择器日期格式的期望，然后我通过会议对象模板和使用日期过滤器将其转换为所需的格式打印出它的日期字段：

# 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字段打印到我的控制台时，I也看到它的价值是“2016-12-30”。但是，日期选择器窗口小部件正在填充值为“06-30-2006”的字段。我是不是正确设置了jQuery Datepicker小部件？我对jQuery没有多少经验，感觉就像是问题所在。

UPDATE

每另一SO question我试图日期写在我的页面中的隐藏字段，然后引用该字段直接，但这并不与党预填充日期字段.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> 

SOLUTION

作为gaetanoM表明，关键要插入Django模板变量成一个jQuery功能是围绕具有单一或双引号的变量。在这种情况下，我还必须应用日期过滤器。 Django日期过滤器“Y-m-d”表示从Django传入日期的值的格式为“yy-mm-dd”（例如“2016-12-30”）。一旦jQuery知道日期的'yy'，'mm'和'dd'“片段是通过parseDate函数的，我们使用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" }}") 

OLD ANSWER

你定义的DATEFORMAT为'MM-DD-YY'。

因此，根据setDate(date)，您可以传递一个字符串在定义的格式或日期。 由于格式是不同的，你可以使用$ .datepicker.parseDate（格式，值，选项）以日期字符串转换为正确的日期值：

$('#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>