How to Populate jQuery Datepicker widget from Django template variable?
<p>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:</p>

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

<p>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:</p>

<pre><code># edit_meeting.html
&lt;div&gt;
    &lt;label for="id_date"&gt;Date&lt;/label&gt;
    {{ form.date.errors }}
    &lt;input type="text" name="date" id="id_date"/&gt;
&lt;/div&gt;

&lt;script&gt;
$(function() {
    $( '#id_date' ).datepicker({
            dateFormat: 'mm-dd-yy',
    });
    $( '#id_date' ).datepicker(
            'setDate', {{ meeting.date|date:"mm-dd-Y" }})
});
&lt;/script&gt;
</code></pre>

<p>The jQuery <a href="http://api.jqueryui.com/datepicker/#utility-formatDate" rel="nofollow noreferrer">formatDate utility</a> defines how dates are formatted for this widget while Django's <a href="http://api.jqueryui.com/datepicker/#utility-formatDate://docs.djangoproject.com/en/1.8/ref/templates/builtins/#date" rel="nofollow noreferrer">date filter</a> specifies how Django dates are formatted.</p>

<p>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.</p>

<p><b>UPDATE</b></p>

<p>Per another SO <a href="https://stackoverflow.com/questions/17897835/get-datepicker-defaultdate-from-string-django-object">question</a> 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 .</p>

<pre><code>&lt;div id="meeting_date" class="hidden"&gt;
    {{ meeting.date }}
&lt;/div&gt;

&lt;script&gt;
$(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) )
    );
});
&lt;/script&gt;
</code></pre>

<p><b>SOLUTION</b></p>

<p>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.</p>

<pre><code>&lt;script&gt;
$(function() {
    $( '#id_date' ).datepicker({
            dateFormat: 'mm/dd/yy',
    });
    $( '#id_date' ).datepicker(
            'setDate', $.datepicker.parseDate( 'yy-mm-dd', '{{ party.date|date:"Y-m-d" }}' )
    );
});
&lt;/script&gt;
</code></pre>