버튼에 연결된 날짜 픽커를 올바르게 설정하는 방법

Question

현재 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 %} 

나는이 웹 사이트 http://jqueryui.com/datepicker/에서 가져온로 날짜 선택기 소스 기능을 추가하려고 시도했다, 그러나 그것은 어떤 영향을 미칠 것 같지 않았다 차단 :

여기에 내 현재 코드입니다. 어떤 제안?

Answer 1

나는 두어 번하기 전에 그것을했으며 grappelli으로 거의 알려졌습니다. 관심의

점 :이 라인

grappelli.js :

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

그리고이 reinits grappelli.reinitDateTimeFields 기능.

그래서 기본적으로 당신이 할 일은 당신의 입력 필드에 vDateField 및/또는 vTimeField 클래스를 넣어 grappelli.js가 제대로로드 및 문서가 준비되면 grappelli.initDateAndTimePicker()가 호출되고 있는지 확인하는 것입니다. 그러면 datepicker가있는 버튼이 자동으로로드됩니다.

당신은 grappelli.initDateAndTimePicker() 다른 JS-파일로 호출되는 것을 확인하실 수 있습니다 : 단지 grappelli.js에서 initDateAndTimePicker 생성자에서 어딘가에 debugger;을 넣고 그것이 당신의 JS-관리자에서 일시 중지해야합니다.

희망이 도움이 될 것입니다, 그것은 나를 위해 작동합니다.