初学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="--">"

再于是乎,在园友的建议下,给这个执行加了@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")

最后,附上扩展方法的所有代码,方便日后再次使用

   /// <summary>
/// Extended the HtmlHelper for Calendar
/// </summary>
public static class CalendarExtensions
{
private static string defaultFormat = "yyyy-MM-dd"; /// <summary>
/// 使用特定的名称生成控件
/// </summary>
/// <param name="helper">HtmlHelper对象</param>
/// <param name="name">控件名称</param>
/// <returns>Html文本</returns>
public static MvcHtmlString Calendar(this HtmlHelper helper, string name)
{
return Calendar(helper, name, defaultFormat);
} /// <summary>
/// 使用特定的名称生成控件
/// </summary>
/// <param name="helper">HtmlHelper对象</param>
/// <param name="name">控件名称</param>
/// <param name="format">显示格式</param>
/// <returns>Html文本</returns>
public static MvcHtmlString Calendar(this HtmlHelper helper, string name, string format)
{
return GenerateHtml(name, null, format);
} /// <summary>
/// 使用特定的名称和初始值生成控件
/// </summary>
/// <param name="helper">HtmlHelper对象</param>
/// <param name="name">控件名称</param>
/// <param name="date">要显示的日期时间</param>
/// <returns>Html文本</returns>
public static MvcHtmlString Calendar(this HtmlHelper helper, string name, DateTime date)
{
return Calendar(helper, name, date, defaultFormat);
} /// <summary>
/// 使用特定的名称和初始值生成控件
/// </summary>
/// <param name="helper">HtmlHelper对象</param>
/// <param name="name">控件名称</param>
/// <param name="date">要显示的日期时间</param>
/// <param name="format">显示格式</param>
/// <returns>Html文本</returns>
public static MvcHtmlString Calendar(this HtmlHelper helper, string name, DateTime date, string format)
{
return GenerateHtml(name, date, format);
} /// <summary>
/// 通过lambda表达式生成控件
/// </summary>
/// <param name="helper">HtmlHelper对象</param>
/// <param name="expression">lambda表达式,指定要显示的属性及其所属对象</param>
/// <returns>Html文本</returns>
public static MvcHtmlString CalendarFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression)
{
return CalendarFor(helper, expression, defaultFormat);
} /// <summary>
/// 通过lambda表达式生成控件
/// </summary>
/// <param name="helper">HtmlHelper对象</param>
/// <param name="expression">lambda表达式,指定要显示的属性及其所属对象</param>
/// <param name="format">显示格式</param>
/// <returns>Html文本</returns>
public static MvcHtmlString CalendarFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, string format)
{
string name = ExpressionHelper.GetExpressionText(expression);
DateTime value; object data = ModelMetadata.FromLambdaExpression<TModel, TProperty>(expression, helper.ViewData).Model;
if (data != null && DateTime.TryParse(data.ToString(), out value))
{
return GenerateHtml(name, value, format);
}
else
{
return GenerateHtml(name, null, format);
}
} /// <summary>
/// 通过lambda表达式获取要显示的日期时间
/// </summary>
/// <param name="helper">HtmlHelper对象</param>
/// <param name="expression">lambda表达式,指定要显示的属性及其所属对象</param>
/// <param name="format">显示格式</param>
/// <returns>Html文本</returns>
public static MvcHtmlString CalendarDisplayFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, string format)
{
string name = ExpressionHelper.GetExpressionText(expression);
DateTime value; object data = ModelMetadata.FromLambdaExpression<TModel, TProperty>(expression, helper.ViewData).Model;
if (data != null && DateTime.TryParse(data.ToString(), out value))
{
return MvcHtmlString.Create(value.ToString(format));
}
else
{
return MvcHtmlString.Create(string.Empty);
}
} /// <summary>
/// 通过lambda表达式获取要显示的日期时间
/// </summary>
/// <param name="helper">HtmlHelper对象</param>
/// <param name="expression">lambda表达式,指定要显示的属性及其所属对象</param>
/// <returns>Html文本</returns>
public static MvcHtmlString CalendarDisplayFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression)
{
return CalendarDisplayFor(helper, expression, defaultFormat);
} /// <summary>
/// 生成输入框的Html
/// </summary>
/// <param name="name">calendar的名称</param>
/// <param name="date">calendar的值</param>
/// <returns>html文本</returns>
private static MvcHtmlString GenerateHtml(string name, DateTime? date, string format)
{
string dateStr = string.Empty; if (date != null)
{
dateStr = "<input type=\"text\" id=\"" + name + "\" name=\"" + name + "\" onfocus=\"WdatePicker({dateFmt:'" + format + "'})\" class=\"Wdate\" value=\"" + date.Value.ToString(format) + "\" />";
}
else
{
dateStr = "<input type=\"text\" id=\"" + name + "\" name=\"" + name + "\" onfocus=\"WdatePicker({dateFmt:'" + format + "'})\" class=\"Wdate\" value=\"\" />";
} return MvcHtmlString.Create(dateStr);
}
}

总结:我的使用方法不一定是最好的,但是总算暂时解决了我的问题,如果园友有更好的方法,或是关于jquery的日期控件我使用方式有误的问题,欢迎指正。

MVC下使用日期控件的更多相关文章

  1. MVC模式下My97DatePicker日期控件引用注意事项

    My97DatePicker日期控件之前在用webform模式开发的时候,只要 <script language="javascript" type="text/j ...

  2. extjs4.0下的日期控件的星期显示为y的解决办法

    没有修改的时候的问题: 今天第一次写博客,就记录一下以前extjs4.2下运用日期组件的星期显示问题,当时找了n久,可能是extjs4.2才出来没多久,没有多少人发现这个问题或者说很少有人将Extjs ...

  3. bootstrap日期控件在火狐下的模态框中选择时间下拉菜单无效的解决办法

    今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的, 排错思路:1,在当前页面主层放置一个时间控件,测试通过 2,在ajax加 ...

  4. phpcmsV9中表单向导在js调用里日期控件在IE下报Calendar未定义的解决办法

    最近在phpcmsV9里用表单向导弄个的提交表单,但用了日期和时间类型时,用   <script language='javascript' src='{APP_PATH}index.php?m ...

  5. SSH+DWZ、JQuery-UI ,swfobject.embedSWF属性与用法,IE下日期控件被flash控件挡住

    ---恢复内容开始--- 最近在做SSH+DWZ(JQuery-UI)项目,在用到图表问题的时候,出现在IE下面,日期控件被flash被挡住而不能选取日期情况,经在网络搜查,现在解决办法如下: 1.首 ...

  6. 怎样使用My97日期控件

    有网友说无法使用My97日期控件,Insus.NET测试一下,是可以正常使用了. 在ASP.NET MVC环境中测试. 去官网下载My97日期控件程序包: 下载解压之后,把程序的目录拷贝至projec ...

  7. mvc4中jquery-ui日期控件datepicker的应用

    mvc4中jquery-ui日期控件datepicker的应用 本文适合mvc中日期选择需要的同学: 假设读者已经具备了mvc4和javascript中的相关知识 一. 开始项目之前把项目中目录:/C ...

  8. FineUIPro v5.2.0已发布(jQuery升级,自定义图标,日期控件)

    FineUIPro/MVC/Core/JS v5.2.0 已经于 2018-8-20 发布,官网示例已更新,如果大家在测试中发现任何问题,请回复本帖,谢谢了. 在线示例: FineUI Pro:htt ...

  9. bootstrop 日期控件 datepicker被弹出框dialog覆盖的解决办法

    筒子们在使用bootstrap的日期控件(datepicker , 现在官网提供的名称叫 datetimepicker)时可能会遇到如上图的问题这是啥原因造成的呢? 答案很简单时输出的优先级造成的(z ...

随机推荐

  1. MySQL5.7.9(GA)的安装

    1.解压ZIP文件到安装目录: 2.进入到bin目录,试运行mysqld --console,查看可能的出错信息,安装相应的辅助软件,如.net V4.0等: 3.编辑my.ini文件,关键内容如下: ...

  2. pathinfo()的用法

    pathinfo() 返回一个关联数组包含有 path 的信息. 包括以下的数组元素: [dirname] [basename] [extension] 提示和注释 注释:如果不是要求取得所有单元,则 ...

  3. Exception in thread "main" java.io.IOException: Mkdirs failed to create /var/folders/q0/1wg8sw1x0dg08cmm5m59sy8r0000gn/T/hadoop-unjar6090005653875084137/META-INF/license at org.apache.hadoop.util.Run

    在使用hadoop运行jar时出现. 解决方法 zip -d Test.jar LICENSE zip -d Test.jar META-INF/LICENSE 完美解决.

  4. Codeforces 158E Phone Talks:dp

    题目链接:http://codeforces.com/problemset/problem/158/E 题意: 你有n个电话要接,每个电话打进来的时刻为第t[i]分钟,时长为d[i]分钟. 每一个电话 ...

  5. python习题-判断输入字符串是不是小数类型

    写一个能判断输入的字符串是不是个小数类型的1,判断小数点的个数是否为1 count2,判断是否小数右边是整数 isdigit3,判断小数点左边的1,整数 isdigit ,2如果是负整数,取负号右边, ...

  6. Oracle学习笔记_02_基本SQL

    1.select语句 (1)语法 SELECT *|{[DISTINCT] column|expression [alias],...} FROM table; (2)示例: 选择全部列 SELECT ...

  7. 【Codeforces Round #466】E. Cashback DP+ST表

    题意 给定$n$个数,将其划分成若干个连续的子序列,求最小价值,数组价值定义为,数组和减去$\lfloor \frac{k}{c} \rfloor$,$k$为数组长度,$c$为给定数 可以列得朴素方程 ...

  8. [: xxxx: Unexpected operator

    /*************************************************************************** * [: xxxx: Unexpected o ...

  9. FFMPEG基于内存的转码实例——输入输出视频均在内存

    我在6月份写了篇文章<FFMPEG基于内存的转码实例>,讲如何把视频转码后放到内存,然后通过网络发送出去.但该文章只完成了一半,即输入的数据依然是从磁盘文件中读取.在实际应用中,有很多数据 ...

  10. WC2010 BZOJ1758 重建计划_长链剖分

    题目大意: 求长度$\in [L,U]$的路径的最大边权和平均值. 题解 首先二分就不用说了,分数规划大家都懂. 这题有非常显然的点分治做法,但还是借着这个题学一波长链剖分. 其长链剖分本身也没啥,就 ...