如何從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>