ボタンに添付された日付ピッカーを正しく設定する方法

Question

現在、Grappelliを使用してDjangoプロジェクトを作成しています。標準の変更フォームを模倣したページを作成しようとしています。ページはどのモデルにも基づいていないので、私は単にすべてのフィールドを自分で追加しています。しかし、私はdatepickerを使用して問題を抱えています。カレンダーを表示するはずのボタンをクリックすると、何も起こりません。私は単に重要なことを何も含めていないと確信しています。ここで

は私の現在のコードです：JavaScriptのブロックで

{% 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/から取られたとして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-インスペクタで一時停止する必要があります。

希望があれば、それは私に役立ちます。