Как правильно настроить датупиксера, прикрепленного к кнопке

Question

В настоящее время я работаю над проектом Django с использованием Grappelli, и я пытаюсь создать страницу, имитирующую стандартную форму изменения. Страница не основана на какой-либо модели, поэтому я просто добавляю все поля. Однако у меня проблемы с использованием datepicker. Всякий раз, когда я нажимаю кнопку, которая должна показывать календарь, ничего не происходит. Я уверен, что я просто не включаю в себя что-то важное.

Вот мой текущий код:

{% extends "admin/change_form.html" %} 

{% block javascripts %} 
{{ block.super }} 
{% endblock %} 

{% block content %} 

    <div id="grp-content-container"> 
     <form enctype="multipart/form-data" action method="post"> 
      {% csrf_token %} 
      <div> 
       <fieldset class="module grp-module"> 
        <div class="form-row grp-row grp-cells-1 dob"> 
         <div class="field-box l-2c-fluid l-d-4"> 
          <div class="c-1"> 
           <label class="required" for="dob">Birthday</label> 
          </div> 
          <div class="c-2"> 
           <p class="datetime"> 
            <input class="vDateField hasDatepicker" type="text" id="dob" name="dob"> 
            <button id="dob-button" type="button" class="ui-datepicker-trigger"></button> 
           </p> 
          </div> 
         </div> 
        </div> 
       </fieldset> 
      </div> 
     </form> 
    </div> 
{% endblock %} 

В JavaScripts блок, я попытался добавить в функциональности источника DatePicker, как взяты с этого сайта http://jqueryui.com/datepicker/, но это, похоже, не имеют никакого эффекта. Какие-либо предложения?

Answer 1

Я делал это несколько раз и хочу сказать, что с grappelli он работает почти из коробки.

Достопримечательности:

grappelli.js с этой линией:

var dateFields = $("input[class*='vDateField']:not([id*='__prefix__'])"); 
dateFields.datepicker(options); 

И grappelli.reinitDateTimeFields функции reinits это.

Поэтому в основном все, что вам нужно сделать, это положить vDateField или/и vTimeField класс в поле ввода и убедитесь, что grappelli.js загружена и grappelli.initDateAndTimePicker() вызывается, когда документ будет готов. Затем кнопки с datepicker должны загружаться автоматически.

Вы можете быть уверены, что grappelli.initDateAndTimePicker() называют, как и любой другой JS-файла: просто положить debugger; где-то в initDateAndTimePicker конструктор в grappelli.js, а затем он должен сделать паузу в вашем JS-инспектора.

Надеюсь, что это поможет, оно работает для меня.