Passing of dates from jquery to html

Question

I created a button linked with a jquery so that when I click on the edit button in my form, the data from the entry will be populated into the form as well.

The rest of the values do get populated into the form via jquery, however, my problem is with the dates value. Somehow, the dates are not being rendered into the form when passed back from 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);
    });
});

forms

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

Any thoughts?

I've got some errors related to `non-unique-id` but these `id`s are not related to this `modal` or data in any way. Asides from this, there isn't any error in my console. — jake wong, Oct 12 '18 at 03:01
It seems like it. I did some test and it seems that `jquery` format is `YYYY-MM-DD` whereas if i `console.log(start_term)`, the console prints out: `Oct. 1, 2018`. Any ideas how I can be converting this to `jquery` `date object`? — jake wong, Oct 12 '18 at 03:59
Yes, that's actually the problem. Because the `data` attribute for the date is actually in `string` format. I used `console.log` and saw that it's in `string` format. — jake wong, Oct 12 '18 at 05:08

score 0 · Answer 1 · answered Oct 12 '18 at 10:31

I managed to solve the problem with modification from this answer: How do I get Month and Date of JavaScript in 2 digit format?

Sample jquery code below:

.... 
    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);

The reason why you +1 to month is because Jan starts from 00 instead of 01. This is also done before it converts from int to string in the above code. Hope it makes sense for others who are facing this problem.

Passing of dates from jquery to html

1 Answers1