2009-09-20 84 views
11

django初心者ここに。私は登録ページの試みをしています。django dateTimeWidgetが表示されません

テキストフィールド(名前、ユーザー名、パスワードなど)とDateField(誕生日)で構成されます。

私はDateFieldのforms.DateTimeInputウィジェットを使用しようとしていますが、ページがレンダリングされても何も起こりません。何か間違っているのですか?これには何か見落としがありますか?それはかなりシンプルなようですが、私はそれを働かせることはできません。

これは私のフォーム

class RegisterForm(forms.Form): 
    username = forms.CharField(max_length= 50) 
    password = forms.CharField(label=u'Password',widget = forms.PasswordInput(render_value=False))#password 

    birthday = forms.DateField(required=False,initial=datetime.date.today,widget = forms.DateTimeInput())#25 Oct 2006 

そして、私の非常に単純なHTMLあなたはDateFieldでDateTimeInputを使うべきではありません

<form action="" method = "POST"> 
{{ form.as_p}} 
<input type='Submit' value='Register'/> 
</form> 
+0

あなたは明確にできますか?フォーム全体がレンダリングされないのですか、またはDateTimeフィールドのみですか? – David

+0

フォームと「入力」が表示されます。それはdoesntのカレンダーウィジェットです。 – Tom

+0

私はDateInputウィジェットを読むと、あまりにもグラフィカルな日付ピッカーコントロール(django adminのようなもの)が期待されました。しかし、それは単純なテキストボックスだと思います。直感的ではないIMO。 – User

答えて

4

である - のいずれかDateInput、またはDateTimeFieldを使用しています。

しかし、「何も起こらない」とは、カレンダーの日付セレクタのリンクが表示されないということです。これらは標準フォームフレームワークの一部ではなく、ドキュメンテーションではDate/DateTimeInputで表示されることを示唆していません。それらは管理アプリケーションに含まれているので、自分のアプリで必要な場合は、javascriptファイルを明示的に組み込む必要があります。

これを行う最も簡単な方法は、おそらくDateInputではなく、django.contrib.admin.widgetsからAdminDateWidgetを使用することです。また、テンプレートにjsi18nスクリプトを含める必要があります。

<script type="text/javascript" src="/admin/jsi18n/"></script> 
+0

私はDjangoがdatetimeウィジェットとどこにいるのか本当に混乱しています。 Docsは1.1のアップデートを暗示していますが、私はそれが何であるかはっきりしていません。私のようなフォームがある場合:

 class EventForm(forms.ModelForm): summary = forms.CharField(label="Event Name", widget=forms.TextInput(attrs={'size':'40'})) dtstart = forms.DateTimeField(widget=AdminDateWidget()) dtend = forms.DateTimeField(widget=AdminDateWidget) 
javascriptはロードされていますが、カレンダーアイコンはフォームに表示されません。私がjQueryに戻らなくても、この周りの明確さが大好きです。 – PhoebeB

+0

/admin/jsi18nが必要ですisStaff – goh

6

カレンダー日付セレクターはフォームフレームワークの一部ではありません。
あなたはしかし、誕生日のテキストボックスを選択/クリックするとjQueryの日付選択ウィジェット

<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-min.js"></script> 
<!-- give correct location for jquery.js --> 
<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-ui-min.js"></script> 
<!-- give correct location for jquery-ui.js --> 
<script type="text/javascript"> 
    jQuery(function() { 
     jQuery("#id_birthday").datepicker({ dateFormat: 'yy-mm-dd' }); 
    }); 
</script> 
<form method="post"> 
    {{ form.as_p }} 
    <input type="submit" value="Create Phase" /> 
</form> 

を使用することができ、それはカレンダーのセレクタウィジェット
が表示されますあなたのjquery.jsとjQuery-ui.jsの正しい場所を教えてください

10

Django DateInputウィジェットはプレーンテキスト入力以外のものを表示しません。しかし、さまざまなフォーマットに対してユーザーの入力を検証するので、無駄ではありません。

ほとんどの人は、Django Adminインターフェイスにある日付ピッカーと同じように動作すると予想していますので、間違いありません。

あなた自身のアプリでAdminDateWidgetを使用することは可能ですが、私はそれに対して助言します。それにはa lot of fiddling around to make it workが必要です。

最も簡単な解決策は、JQuery UI Datepickerのようなものを使用することです。単にあなたのページの<head>に次のものがあります。

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/redmond/jquery-ui.css" rel="Stylesheet" /> 
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script> 

次に一番下に、あなたの入力要素に日付ピッカーをアクティブにするために以下の行を置く:

<script type="text/javascript"> 
    $(function(){ 
    $("#id_birthday").datepicker(); 
    }); 
</script> 

あなたが、これはもう少しすることができますDRYあなたは、カスタムウィジェットを作成することによって、多くの日付フィールドを持っている場合は、あなたのforms.py

class JQueryUIDatepickerWidget(forms.DateInput): 
    def __init__(self, **kwargs): 
     super(forms.DateInput, self).__init__(attrs={"size":10, "class": "dateinput"}, **kwargs) 

    class Media: 
     css = {"all":("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/redmond/jquery-ui.css",)} 
     js = ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js", 
       "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js",) 

あなたのFで、このウィジェットを使用する必要があり、各日付フィールドを指定しますオームズ:

birthday = forms.DateField(label="Birthday", widget=JQueryUIDatepickerWidget) 

そして、あなたのテンプレートでは、<head>に次のものがあります。

{{form.media}} 

し、ページの一番下に次のように置くことによって、すべてのフィールドの日付ピッカーをアクティブ:

<script type="text/javascript"> 
    $(function(){ 
    $(".dateinput").datepicker(); 
    }); 
</script> 
関連する問題