How to Populate jQuery Datepicker widget from Django template variable?

Question

I'm having trouble populating a jQuery Datepicker widget with the value of a Django template variable. I have the following model and form fields:

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

In my template, the datepicker widget acts on the 'date' input tag. I want the default date format to be "mm-dd-yyyy", e.g. "12-30-2016". I'm telling the datepicker what date format to expect and then I pass the meeting object to the template and print out its date field using a date filter to convert it to the desired format:

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

The jQuery formatDate utility defines how dates are formatted for this widget while Django's date filter specifies how Django dates are formatted.

When I print the value in my PostgreSQL database, I see the field has the value "2016-12-30" and when I print the meeting.date field to my console from inside the view that renders the template, I also see that its value is "2016-12-30". However, the datepicker widget is populating the field with the value "06-30-2006". Am I setting up the jQuery Datepicker widget incorrectly? I don't have much experience with jQuery and it feels like that's where the problem is.

UPDATE

Per another SO question I tried to write the date to a hidden field in my page and then reference that the field directly, but this doesn't pre-populate the date field with the party.date value either .

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

SOLUTION

As gaetanoM showed, the key to inserting a Django template variable into a jQuery function is to surround the variable with single or double quotes. In this case I also had to apply a date filter. The Django date filter "Y-m-d" says that the value of the date being passed in from Django has a format of 'yy-mm-dd' (e.g. "2016-12-30"). Once jQuery knows what the 'yy', 'mm', and 'dd' "pieces" of the date are via the parseDate function, we display them in the widget using jQuery's default date format 'mm/dd/yy'. One thing I don't understand is if jQuery's default date format is 'mm/dd/yy', why do you have to explicity specify it in the first three lines of the function? In any event, I'm just glad it's working.

<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

According to django date template:

you can change:

'setDate', {{ meeting.date|date:"mm-dd-Y" }})

to:

'setDate', "{{ meeting.date|date:"m-d-Y" }}")

OLD ANSWER

You defined the dateFormat as 'mm-dd-yy' .

So, according to setDate( date ), you can pass a string in the defined format or a date. Because the formats are different you can use $.datepicker.parseDate( format, value, options ) in order to convert the date string to the right date value:

$( '#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>