mvc4中jquery-ui日期控件datepicker的應用

本文適合mvc中日期選擇須要的同窗：

假設讀者已經具有了mvc4和javascript中的相關知識

1、

開始項目以前把項目中目錄：/Content/themes/base/jquery-ui.css加入到你的bundle的(~/Content/css)裏，以下：

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css",
                        "~/Content/themes/base/jquery-ui.css"));

 

1.在mvc項目中添加一個日期model：DateMOdel.cs

    public class DateModel
    {
        [Display(Name = "DOB")]
        [DataType(DataType.Date)]
        public Nullable<DateTime> DOB { get; set; }
    }

 

2.設置下日期選擇格式：能夠在Javascript下新建一個datepicker.js,添加你想要的日期選擇格式，添加下面代碼：

$(function () {
    $.validator.addMethod('date',
    function (value, element) {
        if (this.optional(element)) {
            return true;
        }
        var valid = true;
        try {
            $.datepicker.parseDate('dd/MM/yy', value);
        }
        catch (err) {
            valid = false;
        }
        return valid;
    });
    $(".datetype").datepicker({ dateFormat: 'dd/MM/yy' });
});

引用這個js文件，你的日期格式被設置成('dd/MM/yy')的格式

 

3.添加TestController控制器，爲Index方法添加視圖，在視圖裏引入DateModel，而且添加一個日期選擇器

Index.cshtml

 1 @model Mvc515圖片存取.Models.DateModel
 2 
 3 @using (Html.BeginForm("IndexPost", "Test", FormMethod.Post, new { @id = "frmtest" }))
 4 {
 5     
 6     <div class='editor-label'>
 7         @Html.LabelFor(model => model.DOB)
 8     </div>
 9     <div class='editor-field'>
10         @Html.TextBoxFor(model => model.DOB, new { @class = "datetype", type = "text" })
11         @Html.ValidationMessageFor(model => model.DOB)
12     </div>
13     <button type="submit">
14         submit</button>
15 }
16 @section Scripts{
17     <script src="../../Scripts/datepicker.js" type="text/javascript"></script>
18     @Scripts.Render("~/bundles/jqueryval")
19     @Scripts.Render("~/bundles/jqueryui")
20     @Styles.Render("~/Content/themes/base/css")
21 }

 

4.在你的web.config文件中<system.web>標籤中添加

<globalization culture="en-GB"uiCulture="en-GB"/>

這保證了選擇的日期格式時date-format同default-culture-type的一致性，更多culture-type

 

到此爲止已經能夠獲得以下的運行結果：

更詳細教程能夠參考這個連接：http://instinctcoder.com/asp-net-mvc-4-jquery-datepicker-date-format-validation/

 

6.在控制器裏添加接受提交來的日期參數的方法

        public JsonResult IndexPost(DateModel mydate)
        {
            
            return Json(new { Result = "OK" });
        }

點擊提交時返回{"Result":"OK"}的頁面，控制器接收到日期參數

 

2、對日期選擇進行範圍限定，以限制只能選擇今日及之後的兩個月的範圍爲例：在視圖中加入下面的javascript

1         $(document).ready(function () {
2             var today = new Date();　　　　　　//今日
3             var d = new Date();　　　　　　　　
4             d.setMonth(d.getMonth() + 2);　　//選擇的截止日期爲兩個月後的今天
6             $('#DOB').datepicker({ minDate: today, maxDate: d });　　//設置選擇的起始日期和截至日期
7         })

 

3、設置onselect 方法，使得選擇完日期便可進行必要的行爲。如下代碼選擇完日期在一個textbox顯示

<input type="text" id="dat" />

 

   
        $(function () {
            $('#DOB').datepicker({
                onSelect: function (datetext, inst) {
                    $('#dat').val(datetext);
                }
            })
        })

 對於日期的日月年讀取可用inst.selectedDay inst.selectedMonth  inst.selectedYear