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'}))

在我的模板中，datepicker小部件作用于＆＃39; date＆＃39;输入标签。我希望默认日期格式为＆＃34; mm-dd-yyyy＆＃34;，例如＆＃34;二零一六年十二月三十○日＆＃34 ;.我告诉datepicker期望的日期格式，然后我将会议对象传递给模板，并使用日期过滤器打印出日期字段，将其转换为所需的格式：

# 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数据库中打印该值时，我看到该字段的值为＆＃34; 2016-12-30＆＃34;当我从呈现模板的视图中将meeting.date字段打印到我的控制台时，我也看到它的值是＆＃34; 2016-12-30＆＃34;。但是，datepicker小部件使用值＆＃34; 06-30-2006＆＃34;填充该字段。我是否错误地设置了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日期过滤器＆＃34; Y-m-d＆＃34;说来自Django的日期值的格式为＆＃39; yy-mm-dd＆＃39; （例如＆＃34; 2016-12-30＆＃34;）。一旦jQuery知道＆＃39; yy＆＃39; mm＆＃39; mm＆＃39;和＆＃39; dd＆＃39; ＆＃34;片＆＃34;日期是通过parseDate函数，我们使用jQuery的默认日期格式＆＃39; mm / dd / yy＆＃39;在小部件中显示它们。我不明白的一件事是，如果jQuery的默认日期格式为＆＃39; mm / dd / yy＆＃39;，为什么你必须在函数的前三行中明确指定它？无论如何，我很高兴它能够工作。

<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 定义为 ＆＃39; mm-dd-yy＆＃39; 。< / p>

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: