cshtml:

<input type="text" id="purchaseDate" name="PurchaseDate" value="<%=order.PurchaseDate !=DateTime.MinValue?order.PurchaseDate.ToLongDateString():DateTime.Now.ToLongDateString()%>" /></label>
         

Jquery:

  //初始化DatePicker
$.fn.calendar = function () {
var that = this, as = $('<div id="calnedar"><b>&lt;</b><b style="width:180px"></b><b>&gt;</b><b>日</b><b>一</b><b>二</b><b>三</b><b>四</b><b>五</b><b>六</b><i></i></div>').insertAfter(that), date = new Date();
as.children().eq(0).on('click', function () {
date = new Date(date.getFullYear(), date.getMonth() - 1, 1);
as.range(date);
}).next().next().on('click', function () {
date = new Date(date.getFullYear(), date.getMonth() + 1, 1);
as.range(date);
});
for (var i = 1; i < 32; i++) {
$('<a>' + i + '</a>').appendTo(as).click(function () {
that.val(as.css('display', 'none').children().eq(1).html() + this.innerHTML + '日');
});
}
as.children().eq(date.getDate() + 10).attr('class', 'hover');
as.range(date);
return this.mousedown(function () {
as.css('display', 'block');
});
}
$.fn.range = function (date) {
var children = this.children(), i = 39;
children.eq(1).html(date.getFullYear() + '年' + (date.getMonth() + 1) + '月');
children.eq(10).width(30 * new Date(date.getFullYear(), date.getMonth(), 1).getDay());
for (; i < new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate() + 11; i++) {
children.eq(i).css('display', 'block');
}
for (; i < 42; i++) {
children.eq(i).css('display', 'none');
}
}
//将购买时间input实现为datepicker
$('#purchaseDate').calendar();

css:

       #calnedar {
background-color: #fff;
border: 1px solid #ddd;
display: none;
margin-left: 120px;
overflow: hidden;
position: absolute;
width: 252px;
} #calnedar a, #calnedar b, #calnedar i {
float: left;
padding: 5px 0px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} #calnedar a {
color: #333;
padding: 5px 6px;
text-align: right;
width: 24px;
} #calnedar b {
background-color: #eee;
text-align: center;
width: 36px;
} #calnedar a:hover, #calnedar a.hover {
background-color: #eee;
}

Jquery简单实现Datepicker的更多相关文章

  1. 浅析jquery ui的datepicker组件

    今天计划在博客上添加一个日历,方便用户查看日期.Google了一圈,最终决定使用jquery ui的datepicker部件实现.原因有三:Datepicker使用配置比较简洁,几行代码就可以得到一个 ...

  2. jQuery中的DatePicker今天按钮不起作用

    转载:http://codego.net/63433/ jquery-ui 日期选择器datepicker我想用 jQueryUI 的 DatePicker ,并显示“今天”按钮, 但它不工作,它也不 ...

  3. jQuery简单实现iframe的高度根据页面内容自适应的方法(转)

    本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...

  4. jQuery简单的手风琴菜单

    查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...

  5. jquery 简单弹出层(转)

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...

  6. jQuery里面的datepicker日期控件默认是显示英文的,如何显示中文或其他语言呢?

    jQuery里面的datepicker日期控件默认是显示英文的,如何让他显示中文或其他呢? [官方的写法]: (1)引入JS文件: <script type="text/javascr ...

  7. JQuery简单实现锚点链接的平滑滚动

    在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现.   一般使用锚点来跳转到页面指定位置的时候,会生 ...

  8. jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)

    这篇文章主要介绍了jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate),需要的朋友可以参考下 使用jQuery ui首先需要引入jQuery类库 ...

  9. 基于Jquery 简单实用的弹出提示框

    基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...

随机推荐

  1. 2017-2018-2 《网络对抗技术》 20155322 第二周 Exp1 PC平台逆向破解(5)M

    #2017-2018-2 <网络对抗技术> 20155322 第二周 Exp1 PC平台逆向破解(5)M [博客目录] 1-实践目标 1.1-实践介绍 1.2-实践内容 1.3-实践要求 ...

  2. 对Linux命令od -tc -tx1的C语言程序实现myod-优化版

    导语 自编od C语言实现版名为myod 上个星期有一个初代版,链接- myod原版 这星期的课上要求实现myod-系统调用版本,要求如下 1 参考教材第十章内容 2 用Linux IO相关系统调用编 ...

  3. 微信小程序点击按钮,修改状态

    WXML中: <view wx:if="{{orderstate}} = '待送检' " data-no="{{orderstate}}" bindtap ...

  4. SaltStack入门篇(五)之salt-ssh的使用以及LAMP状态设计部署

    1.salt-ssh的使用 官方文档:https://docs.saltstack.com/en/2016.11/topics/ssh/index.html ()安装salt-ssh [root@li ...

  5. Windows server 2008 IIS7发布asp.net mvc网站css、js脚本无法访问 问题解决

    今天发布网站遇到一个感到很无语的问题,网站发布成功,浏览网站内容数据显示正常,就是没有样式,试了下脚本也是没有反应,如图效果: 接下来就是一顿苦找原因,检查iis设置.什么应用程序池.文件路径等各种检 ...

  6. 洛谷 P1941 飞扬的小鸟

    洛谷 P1941 飞扬的小鸟 原题链接 首先吐槽几句 noip都快到了,我还不刷起联赛大水题! 题目描述 Flappy Bird 是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节 ...

  7. 探寻ASP.NET MVC鲜为人知的奥秘(1):对LESS的支持

    在ASP.NET MVC3中(从那时开始),我们拥有了对js和css等文件的捆绑(Bundling)和压缩(Minification)的能力,这是ASP.NET性能优化工作的一部分. 想一下很久以前, ...

  8. (原创)python发送邮件

    这段时间一直在学习flask框架,看到flask扩展中有一个mail插件,所以今天就给大家演示如果发邮件. 首先我注册了一个163邮箱,需要开启smtp功能,因为咱们python发送邮件经过的是smt ...

  9. C#特性的简单介绍

    特性应该我们大多接触过,比喻经常使用的[Obsolete],[Serializable]等下面我就主要介绍一个特性的一些用法 摘自MSDN定义:用以将元数据或声明信息与代码(程序集.类型.方法.属性等 ...

  10. 我们一起学习WCF 第二篇WCF承载多个接口

    前言:现在王大叔养了大批猪,赚了很多钱.但是最近发现养鸡也可以赚很多钱,他就像扩展业务开始养鸡.又过两年他发现市场对狗的需求量很大,他开始养狗.那么他改怎么做呢,不可能去修改猪住的地方把鸭子和狗放里面 ...