使用my97datepicker控件实现日期范围选择
注:(2014-12-05内容修改:添加运行效果)
使用my97datepicker 控件,需要对日期的范围进行控制,本人自己写了一个js完成此功能,示例为当前日期到下一周周五之间的日期可选,其他日期不可选,运行效果图如下(自己点,吼吼):
代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
<link type="text/css" rel="Stylesheet" href="My97DatePicker/skin/WdatePicker.css" />
<script type="text/javascript">
function getNextFriday() {
var myDate = new Date();
var year = myDate.getFullYear(); //得到当前年份
var month = myDate.getMonth() + ; //得到当前月份
var day = myDate.getDate(); //得到当前日
var weekDay = myDate.getDay(); //得到当前的星期X(0-6代表星期日-星期六)
var maxDayOfMonth = new Date(year, month, ).getDate(); //得到当前月最大日 var nextFriday;//距离下周五的天数 switch (weekDay) {
case :
nextFriday = ;
break;
case :
nextFriday = ;
break;
case :
nextFriday = ;
break;
case :
nextFriday = ;
break;
case :
nextFriday = ;
break;
case :
nextFriday = ;
break;
case :
nextFriday = ;
break;
default:
nextFriday = ;
break;
} var dayTotal = day + nextFriday; /**
* 1、如果当前日期到下周五所在的日期在当月,即下周五的日期未跨年也为跨月
* 2、跨月,且并未跨年
* 3、跨年
**/
if (dayTotal < maxDayOfMonth) {
if (month < ) {
month = "" + month;
}
if (dayTotal < ) {
dayTotal = "" + dayTotal;
}
return year + "-" + month + "-" + dayTotal;
} else if (month < ) {
month += ;
if (month < ) {
month = "" + month;
}
var nextMonthDay = nextFriday - (maxDayOfMonth - day);
if (nextMonthDay < ) {
nextMonthDay = "" + nextMonthDay;
}
return year + "-" + month + "-" + nextMonthDay;
} else {
year += ;
month = "";
var nextMonthDay = nextFriday - (maxDayOfMonth - day);
if (nextMonthDay < ) {
nextMonthDay = "" + nextMonthDay;
}
return year + "-" + month + "-" + nextMonthDay;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="DateText" type="text" class="Wdate" onclick="var friday=getNextFriday();WdatePicker({minDate:'%y-%M-%d',maxDate:friday})" />
</form>
</body>
</html>
使用my97datepicker控件实现日期范围选择的更多相关文章
- 背水一战 Windows 10 (44) - 控件(日期类): CalendarView, DatePicker, TimePicker
[源码下载] 背水一战 Windows 10 (44) - 控件(日期类): CalendarView, DatePicker, TimePicker 作者:webabcd 介绍背水一战 Window ...
- WPF进阶技巧和实战03-控件(4-基于范围的控件及日期控件)
系列文章链接 WPF进阶技巧和实战01-小技巧 WPF进阶技巧和实战02-布局 WPF进阶技巧和实战03-控件(1-控件及内容控件) WPF进阶技巧和实战03-控件(2-特殊容器) WPF进阶技巧和实 ...
- 时间格式—My97DatePicker控件使用
一.My97DatePicker控件使用(2步): 1:JSP页面:( class="Wdate" 显示控件图标) 引入控件包中的脚本: <script type=&qu ...
- Atitit.ui控件---下拉菜单选择控件的实现select html
Atitit.ui控件---下拉菜单选择控件的实现select html 1. 调用& model的实现 1 2. -----select.jsp------ 1 1. 调用& m ...
- 动态生成表格呈现还是将表格直接绑定gridview等控件呈现的开发方式选择依据
动态生成表格呈现还是将表格直接绑定gridview等控件呈现的开发方式选择依据:由存储过程决定,如果编写的存储过程可以生成需要呈现的表格则直接绑定,否则要动态生成表格
- Android --日期控件使用并显示选择的日期
1. main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns: ...
- bootstrap-daterangepicker双日历控件开始日期选择问题
在做项目的时候,有这样一个需求,需要选择时间段,于是在网上找了bootstrap的双日历时间控件daterangepicker控件,要选取时间段的年月来与后台进行数据交互,时间控件如下图所示: 关于控 ...
- 简洁JS 日历控件 支持日期和月份选择
原文出处 以下这个JS日历控件是我的闲暇之余自己编写的,所有的代码全部在IE7/IE8/Firefox下面测试通过, 而且可以解决被iframe层遮盖的问题.现在只提供两种风格(简洁版和古典版)和两种 ...
- WdatePicker控件中日期的范围选择
1.开始日期不能大于结束日期,结束日期只能选择今天之前(不包括今天) <asp:TextBox ID="T_CREATION_DATE_Start" Width=" ...
随机推荐
- Catalog和Schema
http://www.codeweblog.com/database-schema-and-catalog/ http://blog.sina.com.cn/s/blog_515015800100et ...
- ID卡常见型号
EM ID卡,主要是采用瑞士EM或台湾GK公司的4100.4102系列IC芯片 + 线圈 + 卡基封装而成. (1)4001感应式ID厚卡:台湾4001 COB 特征:普通型感应卡,厚薄适中,带有ID ...
- node.js介绍
官网说明: Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable ...
- 创业青年:刘霞(YBC推荐)_CCTV.com_中国中央电视台
创业青年:刘霞(YBC推荐)_CCTV.com_中国中央电视台 创业青年:刘霞(YBC推荐) CCTV.com 2009年06月23日 09:57 进入复兴论坛 来源:央视网 姓名 ...
- linux 和unix 的区别
Linux与Unix的区别 某些PC机的Unix和Linux在实现方面相类似.几乎所有的商业Unix版本都基本支持同样的软件.程序设计环境和网络特性.然而,Linux和Unix的商业版本依然存在许多 ...
- wx
wx The classes in this module are the most commonly used classes for wxPython, which is why they hav ...
- 菜鸟学SSH(十八)——Hibernate动态模型+JRebel实现动态创建表
项目用的是SSH基础框架,当中有一些信息非常相似,但又不尽同样.假设每个建一个实体的话,那样实体会太多.假设分组抽象,然后继承,又不是特别有规律.鉴于这样的情况.就打算让用户自己配置要加入的字段,然后 ...
- 把war包放到Tomcat安装文件夹下,不能直接訪问的解决方式
临床表现: Tomcat启动后首页能訪问(http://localhost:8080/). 将自己写的一个webprojectwar包放到Tomcat安装文件夹下的/webapps以下(比方hello ...
- 泛泰A870S官方4.4.2系统S0218210 内核版本号信息
从EGL中获取的信息: OpenGL ES Shader Compiler Version: 17.01.12.SPL Build Date: 02/24/14 Mon Local Branch: R ...
- bootstrap-js(1)模态框
1.禁止动画效果 如果你不需要模态框弹出时的动画效果(淡入淡出效果),删掉 .fade 类即可.一般还是不要去动这个,最多自己换个类名在写其他样式,不然你会头大的. <div class=&qu ...