使用jquery的mvc3日期選擇器示例

我是mvc3的新手，查看引擎是剃鬚刀，在我看來，如何獲取日期選擇器。我應該在哪裏寫日期選擇器函數來實現它的所有視圖。怎麼能在我的每一個觀點中稱呼它。使用jquery的mvc3日期選擇器示例

2012-04-05 vishali

你可以添加一些常用的類需要顯示爲日期選擇器的所有輸入字段：

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

，然後在一個單獨的JavaScript文件：

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

那麼所有你需要做的將這個.js文件包含在你的Layout中，這樣它就可以爲每個頁面和每個擁有日期類的輸入字段執行。

來源

2012-04-05 06:25:30

它似乎很容易使用，我一定會使用它。但是，你沒有忘記你正在談論的.js文件嗎？ – 2012-04-05 12:38:51

在_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>

導航到共享文件夾，並在該處創建名稱爲Edit的文件夾orTemplates
EditorTemplates文件夾中創建名爲日期時間
下面的代碼添加到日期時間局部視圖

@model System.DateTime的一個局部視圖？ @ Html.TextBox（「」，（Model.HasValue Model.Value.ToShortDateString（）：的String.Empty），新{@class = 「pickDate」}）
```
<script type="text/javascript"> 
     $(document).ready(function() { 

      $('.pickDate').datepicker({ 
       changeMonth: true, 
       changeYear: true 
      }); 
     }); 
    </script> 
```

現在你有一切設置，並在每一個你有一個字段是DateTime類型的視圖，你會看到一個jQueryUI日期選擇器，當點擊該領域內，或者如果你修改它的屬性，當點擊圖標等。

例如，您的看法就像它是從模型創建的一樣，你不需要添加任何東西。

<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> 
}

在您的視圖頂部。

來源

2012-04-05 06:33:59

對不起，它不起作用 – vishali 2012-04-05 07:17:19

它的工作我更新了腳本，你需要包括到佈局。一個腳本沒有被顯示出來。現在就試試。 – 2012-04-05 08:19:31

它正在工作，但我有另外兩個jQuery的更改功能女巫用於填充文本框，當我們從下拉選擇一個值不工作，日期選擇器的CSS影響到我的樹視圖和樹視圖的字體成爲小。所以我如何使用這個功能正常工作。 – vishali 2012-04-05 09:26:27

使用jquery的mvc3日期選擇器示例

回答

相關問題