Как заполнить виджет jQuery Datepicker из переменной шаблона Django?

Question

У меня возникли проблемы с заполнением виджета jQuery Datepicker со значением переменной шаблона Django. У меня есть следующие модели и поля формы:

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

В моем шаблоне DatePicker виджет действует на «дата» ввода тега. Я хочу, чтобы формат даты по умолчанию был «mm-dd-yyyy», например. "12-30-2016". Я говорю DatePicker, какой формат даты ожидать, и затем я передать объект встречи в шаблон и распечатать его поле даты, используя фильтр даты, чтобы преобразовать его в нужный формат:

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

В JQuery formatDate utility определяет как даты отформатированы для этого виджета, в то время как Django's date filter определяет, как даты Django отформатированы.

Когда я печатаю значение в моей базе данных PostgreSQL, я вижу, что поле имеет значение «2016-12-30», и когда я печатаю поле meeting.date на моей консоли изнутри представления, которое отображает шаблон, я также см., что его значение равно «2016-12-30». Однако виджет datepicker заполняет поле значением «06-30-2006». Я неправильно настроил виджет jQuery Datepicker? У меня нет большого опыта работы с jQuery, и похоже, что проблема такова.

UPDATE

Per другой SO question Я попытался написать дату в скрытом поле на моей странице, а затем ссылку, что поле непосредственно, но это не предварительно заполнить поле даты с партией .date значение.

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

РЕШЕНИЕ

Как показал gaetanoM, ключ к вставке переменной шаблона Django в функции JQuery, чтобы окружить переменную одинарные или двойные кавычки. В этом случае мне также пришлось применить фильтр даты. Фильтр даты Django «Y-m-d» говорит, что значение даты, передаваемой из Django, имеет формат «yy-mm-dd» (например, «2016-12-30»). Как только jQuery знает, что «yy», «mm» и «dd» «штуки» этой даты используются через функцию parseDate, мы отображаем их в виджетах с использованием формата даты по умолчанию jQuery «mm/dd/yy». Одна вещь, которую я не понимаю, - это если формат даты по умолчанию jQuery равен 'mm/dd/yy', почему вы должны объяснить его в первых трех строках функции? В любом случае, я просто рад, что он работает.

<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

По django date template:

вы можете изменить:

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

к:

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

OLD ОТВЕТА

Вы определили DateFormat в 'ДД-ММ-YY'.

Итак, согласно setDate(date), вы можете передать строку в определенном формате или в дате. Поскольку форматы различны вы можете использовать $ .datepicker.parseDate (формат, стоимость, варианты) для того, чтобы преобразовать строку даты в нужное значение даты:

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