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

Posted 2023-02-24

【中文标题】如何从 Django 模板变量填充 jQuery Datepicker 小部件？

【英文标题】：How to Populate jQuery Datepicker widget from Django template variable?

【发布时间】：2017-05-13 22:16:51

【问题描述】：

我在使用 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>

【参考方案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>

【讨论】：

我明白你在说什么，如果我像你展示的那样对我的模板进行硬编码，我会得到相同的结果。但这并不能从将 Django 变量传递给 jQuery 方法的角度回答我的问题。如果我用 party.date 替换您的“2016-12-30”字符串，则 jQuery 方法不起作用。我相信这是因为“”和“”分隔符让 jQuery 感到困惑。我认为问题的症结在于，如何将 Django 模板变量从 Django 模板中传递给 jQuery 方法？

在 jQuery 中有没有办法将“”和“”字符替换为对应的 ASCII 字符“123”和“125”？我可以像“”party.date“”那样硬编码吗？

抱歉，Dave，但 字符必须直接从 django 处理。是的，您可以像往常一样在 html 中替换这些字符。

@Dave 你能看看django to js variable吗？