将日期从 jquery 传递到 html答案

【问题标题】：Passing of dates from jquery to html将日期从 jquery 传递到 html
【发布时间】：2019-03-17 05:04:03
【问题描述】：

我创建了一个与jquery 链接的按钮，这样当我单击表单中的edit button 时，条目中的数据也将填充到表单中。

其余的值确实通过jquery 填充到表单中，但是，我的问题是dates 值。不知何故，dates 从jquery 传回时并没有呈现到表单中。

html

...
<button type="button" class="edit-current-policy-term float-right" 
    data-toggle="modal" data-target="#edit-term-policy-modal" 
    data-term="{{ policy_period.term }}" 
    data-start_term="{{ policy_period.start_term }}" 
    data-end_term="{{ policy_period.end_term }}" 
    data-pk="{{ policy_period.pk }}">
    <i class="fas fa-edit"></i>
</button>

jquery

$(document).ready(function () {
    $(document).on('show.bs.modal', '#edit-term-policy-modal', function (event) {
        const button = $(event.relatedTarget); 
        let term = button.data('term'); 
        let start_term = button.data('start_term'); 
        let end_term = button.data('end_term'); 
        const pk = button.data('pk'); 

        const modal = $(this);                     
        modal.find('.modal-body #id_term_number').val(term);
        modal.find('.modal-body #id_start_term').val(start_term);
        modal.find('.modal-body #id_end_term').val(end_term);
    });
});

表格

class NewTermPolicyPeriodForm(forms.ModelForm):

    def __init__(self, *args, **kwargs):
        super(NewTermPolicyPeriodForm, self).__init__(*args, **kwargs)

        self.fields['term'].widget = forms.TextInput(
        attrs={'class': 'form-control', 'id': 'id_term_number', 'name': 'term_number', 'type': 'number',
               'placeholder': 'Term number'})
        self.fields['term'].required = True

        self.fields['start_term'].widget = forms.DateInput(
        attrs={'class': 'form-control', 'id': 'id_start_term', 'name': 'start_term', 'type': 'date',
               'placeholder': 'Term start date'})
        self.fields['start_term'].required = True

        self.fields['end_term'].widget = forms.DateInput(
        attrs={'class': 'form-control', 'id': 'id_end_term', 'name': 'end_term', 'type': 'date',
               'placeholder': 'Term end date'})
        self.fields['end_term'].required = True

        self.fields['term_end'].widget = forms.CheckboxInput(
        attrs={'class': 'form-control', 'id': 'id_term_end', 'name': 'term_end'})
        self.fields['term_end'].required = False

    class Meta:
        model = TermPolicyPeriod
        fields = [
            'term', 'start_term', 'end_term', 'term_end'
        ]

有什么想法吗？

【问题讨论】：

你的控制台有错误吗？
我有一些与non-unique-id 相关的错误，但这些ids 与此modal 或数据无关。除此之外，我的控制台中没有任何错误。
好像是这样。我做了一些测试，似乎jquery 格式是YYYY-MM-DD，而如果我是console.log(start_term)，则控制台打印出：Oct. 1, 2018。有什么想法可以将其转换为jquerydate object？
是的，这实际上是问题所在。因为日期的data 属性实际上是string 格式。我使用了console.log，发现它是string 格式。

标签： jquery django bootstrap-4

【解决方案1】：

我设法通过修改这个答案解决了这个问题：How do I get Month and Date of JavaScript in 2 digit format?

示例jquery 代码如下：

.... 
    const button = $(event.relatedTarget);          
    let term = button.data('term');             
    let start_term = new Date(button.data('start_term'));
    let start_term_getMonth = ("0" + (start_term.getMonth() + 1).toString()).slice(-2);
    let start_term_getDate = ("0" + (start_term.getDate()).toString()).slice(-2);

    let end_term = new Date(button.data('end_term'));
    let end_term_getMonth = ("0" + (end_term.getMonth() + 1).toString()).slice(-2);
    let end_term_getDate = ("0" + (end_term.getDate()).toString()).slice(-2);
    const pk = button.data('pk');                   

    const end_term_date = end_term.getFullYear() + '-' + end_term_getMonth + '-' + end_term_getDate;
    const start_term_date = start_term.getFullYear() + '-' + start_term_getMonth + '-' + start_term_getDate;

    const modal = $(this);                          
    modal.find('.modal-body #id_term_number').val(term);
    modal.find('.modal-body #id_start_term').val(start_term_date);
    modal.find('.modal-body #id_end_term').val(end_term_date);    

    console.log(start_term_date, end_term_date);

之所以将+1 改为month，是因为Jan 是从00 开始的，而不是01。这也是在上面代码中从int 转换为string 之前完成的。希望它对面临这个问题的其他人有意义。

【讨论】：