jveryを使用したmvc3の日付ピッカーの例

Question

mvc3の新機能で、ビューエンジンはrazorです。私のビューで日付ピッカーを取得する方法。私はどこにそれをすべてのビューを有効に日付ピッカー機能を記述する必要があります。どのように私のすべてのビューでそれを呼び出すことができます。すべてあなたがしなければならない、その後

$(function() { 
    $('.date').datepicker(); 
}); 

：

@Html.TextBoxFor(x => x.SomeDate, new { @class = "date" }) 

し、その後、別のJavaScriptファイルに：

Answer 1

あなたは日付ピッカーとして表示する必要のあるすべての入力フィールドにいくつかの一般的なクラスを追加することができますレイアウトにこの.jsファイルを含めて、各ページと日付クラスを持つ各入力フィールドに対して実行するようにします。

Answer 2

1. _Layout.cshtmlに以下を追加ライン

// CSS

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/redmond/jquery-ui.css" rel="Stylesheet" type="text/css" /> 

は// SCRIPTS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> 

1. が共有フォルダに移動し、そこに作成編集の名前のフォルダorTemplates

2. EditorTemplatesフォルダ内

3. DateTimeの部分図

   @modelのSystem.DateTimeに次のコードを追加したDateTime

   と呼ばれる部分図を作成しますか？ @ Html.TextBox：

   <script type="text/javascript"> 
        $(document).ready(function() { 
   
         $('.pickDate').datepicker({ 
          changeMonth: true, 
          changeYear: true 
         }); 
        }); 
       </script> 
   

今あなたが持っている（ ""、（Model.HasValue Model.Value.ToShortDateString（）？String.Emptyの）、新しい{@class = "pickDate"}）すべてが設定され、DateTime型のフィールドを持っているすべてのビューにjqueryUI datepickerが表示されます。

それがモデルから作成されたのと同じように、何も追加する必要はありません。

<div class="editor-label"> 
    @Html.LabelFor(model => model.DateOfBirth) 
</div> 
<div class="editor-field"> 
    @Html.EditorFor(model => model.DateOfBirth) 
    @Html.ValidationMessageFor(model => model.DateOfBirth) 
</div> 

UPDATE

おそらく、スクリプトのコリソンのいくつかの種類があります。お試しください。

@if(false) 
{ 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
} 

をご覧ください。