初学MVC，使用日期控件的时候发现不是特别理想，本来是想直接使用JQuery的日期控件的，发现支持的不是很好，type类型要改成date才能使用，而且编辑的时候使用@Html.EditFor也不能绑定值，不知道大家有没有在项目中使用过Jquery的日期控件，有没有遇到什么问题，希望能控讨一下。
于是乎，在园友的推荐下，改用大名鼎鼎的My97，下载地址:http://www.my97.net/dp/demo/index.htm,下载->包含到项目.然后在BundleConfig文件中添加引用
bundles.Add(new ScriptBundle("~/bundles/My97DatePicker").Include( "~/My97DatePicker/WdatePicker.js", "~/My97DatePicker/calendar.js")); bundles.Add(new StyleBundle("~/My97DatePicker/css").Include( "~/My97DatePicker/skin/WdatePicker.css"));
直接在母版页中对文件进行引用
@System.Web.Optimization.Styles.Render("~/My97DatePicker/css") @System.Web.Optimization.Scripts.Render("~/bundles/My97DatePicker")
为了使用方便，给HtmlHelper增加了扩展方法,方便使用,返回值是string
public static string Calendar(this HtmlHelper helper, string name) { return Calendar(helper, name, defaultFormat); }
@Html.Calendar("ProductBeginDate")
但这样会有一个问题，在界面上使用的时候，会生成带双引号的文本，而不是Html的标签
"<input type="date" id="BuyDate" name="BuyDate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" class="datetype" value="2015-01-17">"
再于是乎，在园友的建议下，给这个执行加了@Html.Raw给转换成了html标签
@Html.Raw(@Html.Calendar("ProductBeginDate"))
这样做，果然能正常显示了
但是总是觉得在外面加个@Html.Raw的使用方式很是不爽，这个Raw方法只不过是返回了IHtmlString,那就改进一下扩展方法吧
public static MvcHtmlString Calendar(this HtmlHelper helper, string name) { return Calendar(helper, name, defaultFormat); }
界面使用时，就可以直接使用，产生正确的html标签了
@Html.Calendar("ProductBeginDate")
最后，附上扩展方法的所有代码，方便日后再次使用
1 /// <summary> 2 /// Extended the HtmlHelper for Calendar 3 /// </summary> 4 public static class CalendarExtensions 5 { 6 private static string defaultFormat = "yyyy-MM-dd"; 7 8 /// <summary> 9 /// 使用特定的名称生成控件 10 /// </summary> 11 /// <param name="helper">HtmlHelper对象</param> 12 /// <param name="name">控件名称</param> 13 /// <returns>Html文本</returns> 14 public static MvcHtmlString Calendar(this HtmlHelper helper, string name) 15 { 16 return Calendar(helper, name, defaultFormat); 17 } 18 19 /// <summary> 20 /// 使用特定的名称生成控件 21 /// </summary> 22 /// <param name="helper">HtmlHelper对象</param> 23 /// <param name="name">控件名称</param> 24 /// <param name="format">显示格式</param> 25 /// <returns>Html文本</returns> 26 public static MvcHtmlString Calendar(this HtmlHelper helper, string name, string format) 27 { 28 return GenerateHtml(name, null, format); 29 } 30 31 /// <summary> 32 /// 使用特定的名称和初始值生成控件 33 /// </summary> 34 /// <param name="helper">HtmlHelper对象</param> 35 /// <param name="name">控件名称</param> 36 /// <param name="date">要显示的日期时间</param> 37 /// <returns>Html文本</returns> 38 public static MvcHtmlString Calendar(this HtmlHelper helper, string name, DateTime date) 39 { 40 return Calendar(helper, name, date, defaultFormat); 41 } 42 43 /// <summary> 44 /// 使用特定的名称和初始值生成控件 45 /// </summary> 46 /// <param name="helper">HtmlHelper对象</param> 47 /// <param name="name">控件名称</param> 48 /// <param name="date">要显示的日期时间</param> 49 /// <param name="format">显示格式</param> 50 /// <returns>Html文本</returns> 51 public static MvcHtmlString Calendar(this HtmlHelper helper, string name, DateTime date, string format) 52 { 53 return GenerateHtml(name, date, format); 54 } 55 56 /// <summary> 57 /// 通过lambda表达式生成控件 58 /// </summary> 59 /// <param name="helper">HtmlHelper对象</param> 60 /// <param name="expression">lambda表达式，指定要显示的属性及其所属对象</param> 61 /// <returns>Html文本</returns> 62 public static MvcHtmlString CalendarFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression) 63 { 64 return CalendarFor(helper, expression, defaultFormat); 65 } 66 67 /// <summary> 68 /// 通过lambda表达式生成控件 69 /// </summary> 70 /// <param name="helper">HtmlHelper对象</param> 71 /// <param name="expression">lambda表达式，指定要显示的属性及其所属对象</param> 72 /// <param name="format">显示格式</param> 73 /// <returns>Html文本</returns> 74 public static MvcHtmlString CalendarFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, string format) 75 { 76 string name = ExpressionHelper.GetExpressionText(expression); 77 DateTime value; 78 79 object data = ModelMetadata.FromLambdaExpression<TModel, TProperty>(expression, helper.ViewData).Model; 80 if (data != null && DateTime.TryParse(data.ToString(), out value)) 81 { 82 return GenerateHtml(name, value, format); 83 } 84 else 85 { 86 return GenerateHtml(name, null, format); 87 } 88 } 89 90 /// <summary> 91 /// 通过lambda表达式获取要显示的日期时间 92 /// </summary> 93 /// <param name="helper">HtmlHelper对象</param> 94 /// <param name="expression">lambda表达式，指定要显示的属性及其所属对象</param> 95 /// <param name="format">显示格式</param> 96 /// <returns>Html文本</returns> 97 public static MvcHtmlString CalendarDisplayFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, string format) 98 { 99 string name = ExpressionHelper.GetExpressionText(expression); 100 DateTime value; 101 102 object data = ModelMetadata.FromLambdaExpression<TModel, TProperty>(expression, helper.ViewData).Model; 103 if (data != null && DateTime.TryParse(data.ToString(), out value)) 104 { 105 return MvcHtmlString.Create(value.ToString(format)); 106 } 107 else 108 { 109 return MvcHtmlString.Create(string.Empty); 110 } 111 } 112 113 /// <summary> 114 /// 通过lambda表达式获取要显示的日期时间 115 /// </summary> 116 /// <param name="helper">HtmlHelper对象</param> 117 /// <param name="expression">lambda表达式，指定要显示的属性及其所属对象</param> 118 /// <returns>Html文本</returns> 119 public static MvcHtmlString CalendarDisplayFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression) 120 { 121 return CalendarDisplayFor(helper, expression, defaultFormat); 122 } 123 124 /// <summary> 125 /// 生成输入框的Html 126 /// </summary> 127 /// <param name="name">calendar的名称</param> 128 /// <param name="date">calendar的值</param> 129 /// <returns>html文本</returns> 130 private static MvcHtmlString GenerateHtml(string name, DateTime? date, string format) 131 { 132 string dateStr = string.Empty; 133 134 if (date != null) 135 { 136 dateStr = "<input type=\"text\" id=\"" + name + "\" name=\"" + name + "\" onfocus=\"WdatePicker({dateFmt:'" + format + "'})\" class=\"Wdate\" value=\"" + date.Value.ToString(format) + "\" />"; 137 } 138 else 139 { 140 dateStr = "<input type=\"text\" id=\"" + name + "\" name=\"" + name + "\" onfocus=\"WdatePicker({dateFmt:'" + format + "'})\" class=\"Wdate\" value=\"\" />"; 141 } 142 143 return MvcHtmlString.Create(dateStr); 144 } 145 }
总结：我的使用方法不一定是最好的，但是总算暂时解决了我的问题，如果园友有更好的方法，或是关于jquery的日期控件我使用方式有误的问题，欢迎指正。
