将日期从jquery传递到html

时间:2018-10-12 02:50:42

标签: jquery django bootstrap-4

我创建了一个与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'
        ]

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

我设法通过修改此答案来解决问题: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);

+1month的原因是因为Jan00开始而不是01。在上述代码中将其从int转换为string之前,也要完成此操作。希望对面临此问题的其他人有意义。