mvc 日历控件

 

第二个是日历控件，在网上查了一个普通的日历控件，也生成了下拉的日历样子，但是一些脚本比如选择年月，需要一些时间，最后只好套用了My97 DatePicker，这样以来其实简单多了。

第一步：下载 My97 DatePicker，我用的是 My97 DatePicker 4.72 Release。在Script文件夹下新增Calendar文件夹将My97相关文件放入这个文件夹中，如：

这些文件添加完成之后，在页面只需要引用WdataPicker.js即可（view 页面或者Master页面加载），例如：   

    <!--日历控件引用开始-->
    <script src="http://www.cnblogs.com/Scripts/Calendar/WdatePicker.js" type="text/javascript"></script>
    <!--日历控件引用结束-->

然后mvc的控件扩展，主要用到TextBox然后加一个Class名为Wdate，代码如下：

.Wdate
{
    border: #999 1px solid; /*height: 20px;*/
    background: url("./images/datePicker.gif") no-repeat right;//My97 picture
}

    /// <summary>
    /// 日期控件 
    /// </summary>
    public static class CalendarExtensions
    {
        public static MvcHtmlString Calendar(this HtmlHelper helper)
        {
            StringBuilder sb = new StringBuilder();
            TagBuilder textCalendar = new TagBuilder("input");
            textCalendar.AddCssClass("Wdate");
            textCalendar.Attributes.Add("type", "text");
            textCalendar.Attributes.Add("onclick", "WdatePicker()");
            return MvcHtmlString.Create(textCalendar.ToString(TagRenderMode.SelfClosing));
        }


        public static MvcHtmlString Calendar(this HtmlHelper helper, string id)
        {
            StringBuilder sb = new StringBuilder();
            TagBuilder txtCalendar = new TagBuilder("input");
            txtCalendar.AddCssClass("Wdate");
            txtCalendar.Attributes.Add("type", "text");
            txtCalendar.GenerateId(id);
            txtCalendar.Attributes.Add("onclick", "WdatePicker()");
            return MvcHtmlString.Create(txtCalendar.ToString(TagRenderMode.SelfClosing));
        }

        public static MvcHtmlString Calendar(this HtmlHelper helper, string id, DateTime defaultDate)
        {
            StringBuilder sb = new StringBuilder();
            TagBuilder txtCalendar = new TagBuilder("input");
            txtCalendar.AddCssClass("Wdate");
            txtCalendar.Attributes.Add("type", "text");
            txtCalendar.GenerateId(id);
            txtCalendar.Attributes.Add("value", string.Format("{0:d}", defaultDate).Replace('/','-'));
            txtCalendar.Attributes.Add("onclick", "WdatePicker()");
            return MvcHtmlString.Create(txtCalendar.ToString(TagRenderMode.SelfClosing));

        }
}

这样用法就很简单了，在view页面

    <% var date = new DateTime(2011, 12, 12); %>
    <%=Html.Calendar("tody",date)%>

效果：

这个My97如果想显示中文只需要在他的confg.js中配置，还有皮肤页面里面。