Jquery控制My97DatePicker控件的日期格式

最新推荐文章于 2025-03-12 16:56:22 发布
最新推荐文章于 2025-03-12 16:56:22 发布
阅读量1.4w 收藏 2
点赞数
文章标签： jquery function button input 测试 firefox
最近的项目，要取时间段进行统计，按照年月日时等方法，取按年统计的时候，我们希望时间控件只能选择年，按照月统计时候，我们希望只能选择年月这两项，因此写了这个小程序。
firefox测试可用。
Java代码 复制代码  收藏代码
  1. <html>   
  2.     <head>   
  3.         <title>   
  4.             测试jquery控制My97DatetimePicker格式   
  5.         </title>   
  6.         <script type="text/javascript" src="WdatePicker.js"></script>   
  7.         <script type="text/javascript" src="jquery-1.4.2.min.js"></script>   
  8.     </head>   
  9.     <body>   
  10.     <script type="text/javascript" >   
  11.     $(document).ready(function(){   
  12.     $('.time').bind('focus',function(){WdatePicker()});   
  13.     });   
  14.     function changeAttr1(){   
  15.         $('#start').unbind('focus');   
  16.         $('#start').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy'});});   
  17.         $('#end').unbind('focus');   
  18.         $('#end').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy',minDate:'#F{$dp.$D(\'start\')}'});});   
  19.     }   
  20.     function changeAttr2(){   
  21.     $('#start').unbind('focus');   
  22.         $('#start').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy年MM月'});});   
  23.     $('#end').unbind('focus')   
  24.         $('#end').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy年MM月',minDate:'#F{$dp.$D(\'start\')}'});});   
  25.     }   
  26.     function changeAttr3(){   
  27.     $('#start').unbind('focus');   
  28.         $('#start').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy年M月d日'});});   
  29.     $('#end').unbind('focus');   
  30.         $('#end').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy年M月d日',minDate:'#F{$dp.$D(\'start\')}'});});   
  31.     }   
  32.     function changeAttr4(){   
  33.     $('#start').unbind('focus');   
  34.         $('#start').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy年M月d日 HH时'});});   
  35.     $('#end').unbind('focus');   
  36.         $('#end').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy年M月d日 HH时',minDate:'#F{$dp.$D(\'start\')}'});});   
  37.     }   
  38.   
  39.     </script>   
  40.     <input id="start" class="time" type="text"/>   
  41.     <input id="end" class="time" type="text"/>   
  42.     <input id="1" type="button" value="变为年" οnclick="changeAttr1()">   
  43.     <input id="2" type="button" value="变为月" οnclick="changeAttr2()">   
  44.     <input id="3" type="button" value="变为日" οnclick="changeAttr3()">   
  45.     <input id="4" type="button" value="变为时" οnclick="changeAttr4()">   
  46.     </body>   
  47. </html>  
<html>
	<head>
		<title>
			测试jquery控制My97DatetimePicker格式
		</title>
		<script type="text/javascript" src="WdatePicker.js"></script>
		<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	</head>
	<body>
	<script type="text/javascript" >
	$(document).ready(function(){
    $('.time').bind('focus',function(){WdatePicker()});
	});
	function changeAttr1(){
		$('#start').unbind('focus');
		$('#start').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy'});});
		$('#end').unbind('focus');
		$('#end').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy',minDate:'#F{$dp.$D(\'start\')}'});});
	}
	function changeAttr2(){
	$('#start').unbind('focus');
		$('#start').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy年MM月'});});
	$('#end').unbind('focus')
		$('#end').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy年MM月',minDate:'#F{$dp.$D(\'start\')}'});});
	}
	function changeAttr3(){
	$('#start').unbind('focus');
		$('#start').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy年M月d日'});});
	$('#end').unbind('focus');
		$('#end').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy年M月d日',minDate:'#F{$dp.$D(\'start\')}'});});
	}
	function changeAttr4(){
	$('#start').unbind('focus');
		$('#start').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy年M月d日 HH时'});});
	$('#end').unbind('focus');
		$('#end').bind('focus',function(){WdatePicker({skin:'whyGreen',dateFmt:'yyyy年M月d日 HH时',minDate:'#F{$dp.$D(\'start\')}'});});
	}

	</script>
	<input id="start" class="time" type="text"/>
	<input id="end" class="time" type="text"/>
	<input id="1" type="button" value="变为年" οnclick="changeAttr1()">
	<input id="2" type="button" value="变为月" οnclick="changeAttr2()">
	<input id="3" type="button" value="变为日" οnclick="changeAttr3()">
	<input id="4" type="button" value="变为时" οnclick="changeAttr4()">
	</body>
</html>

效果图：







  • 大小: 35.5 KB
  • 大小: 37.7 KB
  • 大小: 50.5 KB
  • 大小: 47.8 KB
咖啡加糖_
关注
My97 DatePicker My97日期控件 4.8正式版
07-03
功能相当强大 更人性化,更全面的功能 大部分日期控件都具备功能如:带时间显示,支持周显示,自定义格式,自动纠错,智能纠错,起始日期,操作按钮自定义,快速选择日期,支持多种调用模式等,My97DatePicker在这些方面做得更全面,更人性化,并且速度一流. 2.强大的日期范围限制功能 支持静态限制,动态限制,脚本自定义限制,以及无效天和无效日期功能,利用这样功能你可以任意定制不能选择的日期,这些日期即使毫无规律,毫无连续性,你也可以通过这些功能的组合使用轻松搞定. 3.自定义事件和丰富的API库 如果你需要做一些附加的操作,你也不必担心,日期控件自带的自定义事件可以满足你的需求.此外,你还可以在自定义事件中调用提供的API库来做更多的运算和扩展,绝对可以通过很少的代 码满足你及其个性化的需求. 4.多语言支持和自定义皮肤支持 通过lang属性,可以为每个日期控件单独配置语言,当然也可以通过WdatePicker.js配置全局的语言,皮肤也是一样,只要配置skin属性即可.这样一个页面中可以显示多种语言,多种皮肤的日期控件,更棒的是,他们之间的切换是无刷新的. 5.跨无限级框架显示和自动选择显示位置 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,My97日期控件是可以跨无限级框架显示的,并且当控件处在页面边界是,它会自动选择显示的位置.此外你还可以使用position参数对弹出位置做调整.
My97 DatePicker 日期格式
weixin_34128839的博客
01-07 138
一、格式说明 y 将年份表示为最多两位数字。如果年份多于两位数，则结果中仅显示两位低位数。  yy  同上，如果小于两位数，前面补零。  yyy 将年份表示为三位数字。如果少于三位数，前面补零。  yyyy 将年份表示为四位数字。如果少于四位数，前面补零。  M 将月份表示为从 1 至 12 的数字  MM 同上，如果小于两位数，前面补零。  MMM 返回月份的缩写 一月 至 十二月...
掌握jQuery日期选择插件：全面指南与实践
最新发布
weixin_42433737的博客
03-12 932
本文还有配套的精品资源，点击获取 简介：本文深入分析了jQuery日期选择插件的使用，包括其核心功能、配置选项、常用插件以及优点。通过具体示例代码，指导读者如何轻松实现用户友好的日期输入，并探讨了如何选择合适的日期选择插件以提升网页应用的交互性和用户体验。 1. jQuery日期选择器功能介绍 jQuery日期选择器是一个流行且强大的用户界面组件，它允许用户...
php日期格式化年月日时分秒,My97DatePicker设置日期年月日时分秒格式
weixin_39739170的博客
03-09 241
前端 JavaScript 日期插件 My97DatePicker 非常出名。N多年以前我就使用过，当时下载了之后，使用的时候默认是没有小时，分钟，秒之类的，直接是年月日的日期格式，跟一般的日期插件没有什么不同。后来找了文档才知道可以设置日期格式、最大日期限制和最小日期限制等。当我今天再去他们官网下载使用时，发现下载包的Demo中依然没有告诉用户怎么设置日期格式，默认的只显示年月日，不知道他们为什...
My97DatePicker的基本时间格式的使用
阿武刚巴得
06-10 1270
一.下载My97DatePicker组件包下载地址:http://www.my97.net/dp/down.asp（官方下载地址）二.具体使用  1.在页面中引用该组件JS文件:  &lt;script type="text/JavaScript" src="My97DatePicker/WdatePicker.js"&gt;&lt;/script&gt; 2:源代码(仅供参考,具体情况,具体分析...
97控件日期格式化
lmy_loveF的博客
09-19 348
//可以选择月份，只能选择当月及当月之前的月份 WdatePicker({ dateFmt: 'yyyy-MM',maxDate:'%y-%M' }) //可以选择日期，只能选择当天及当天之前的日期 WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'})  ...
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
10-19
接下来，将详细介绍推荐的三款日期选择插件：My97DatePicker、jquery.datepicker和Mobiscroll，并详细介绍它们各自的特点、使用方法以及适用场景。 1. My97DatePicker My97DatePicker是一款纯原生JS开发的日期选择...
My97DatePicker前端日期插件
07-23
由于其轻量级和API友好，My97DatePicker可以无缝集成到各种前端框架和库中，如jQuery、Vue.js、React等，提高开发效率。 总的来说，My97DatePicker是一款强大且易用的前端日期选择插件，它提供了丰富的配置选项和...
My97DatePicker前端日期控件使用及格式验证功能
除了基本的日期选择功能，My97DatePicker还允许开发者自定义一些参数，比如日期格式、日期范围、禁用日期等。这种可配置性满足了开发者在不同应用场景下的特殊需求。 ### 使用方法 要使用My97DatePicker插件，...
My97DatePicker日期控件的功能与使用示例
My97DatePicker是一款流行的JavaScript日期选择控件，它是基于jQuery的一个插件，广泛应用于Web页面中，使得用户可以更加方便地选择日期。以下详细阐述了My97DatePicker日期控件的相关知识点。 ### 1. My97...
My97DatePicker日期插件，jquery校验插件validation，js
04-16
My97DatePicker是一款在中国广泛应用的JavaScript日期选择插件，它为网页提供了强大的日期输入功能，具有易用性、灵活性和自定义性等优点。这款插件最初由My97 Design开发，因此得名My97 DatePicker。在网页设计中，...
datetimepicker：jQuery插件日期和时间选择器
02-03
jQuery DateTimePicker 请。 帮我更新文档。 该文件将自动显示在网站上 安装 npm install jquery-datetimepicker 要么 yarn add jquery-datetimepicker 或下载 日期时间选择器 ============== !!! 选项'lang'的最新版本已过时。 语言设置现在是全局的。 !!! 用这个： jQuery . datetimepicker . setLocale ( 'en' ) ; jQuery插件日期和时间选择器 DateTimePicker 日期选择器 时间选择器 突出显示单个日期或期间的选项 JS Build帮助 需要Node和NPM 安装： 安装bower全球与npm install -g bower 。 运行npm install 。 npm将查看package.json并自动安装必要的依赖项。 运行bower install ，它会安装bower.json定义的前端软件包。 注意：如果使用Bower v1.5.2，则会收到错误消息： The "main" field
My97DatePicker：高效易用的日历选择控件
weixin_33562004的博客
10-22 1346
本文还有配套的精品资源，点击获取 简介：My97DatePicker是一款广受欢迎的网页和应用程序日历控件，提供了多样的日期格式支持和高度的自定义能力，改善用户体验。具备丰富的日期计算功能和各种交互定制选项，同时实现了小体积代码和高效性能优化。此外，它还具有广泛的浏览器兼容性，包括旧版IE浏览器和移动设备适配，并由一个活跃的开发团队和社区支持。 1. My97Da...
根据条件决定My97DatePicker日期控件弹出的日期格式
weixin_30463341的博客
11-03 84
代码如下： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>根据条件决定My97DatePicker日期控件弹出的日期格式</title> 6 <...
js插件---日期控件My97DataPicker的使用
zuihongyan518的博客
12-07 813
1. 注意事项 （1）My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名； （2）各目录及文件的用途:         WdatePicker.js 配置文件,在调用的地方仅需使用该文件,可多个共存,以xx_WdatePicker.js方式命名         config.js 语言和皮肤配置文件,无需引入(4.8以后合并入Wdate...
jQuery-UI DateTimePicker日期和时间插件，显示日期和时间、只显示日期、只选择时间
人生若南柯一梦
05-24 5337
jQuery-UI DateTimePicker日期和时间插件，显示日期和时间、只显示日期、只选择时间
jQ datetimepicker插件时间格式化、限制开始和结束日期
qq_42034594的博客
07-10 1319
【代码】jQ datetimepicker插件时间格式化。
jQuery插件使用总结二：datetimepicker
qq_43392001的博客
02-29 1660
一、datetimepicker介绍
jquery datePicker插件只选择月份终极解决方案
热门推荐
fendouzhe123的专栏
05-14 1万+
jquery的datePicker插件是一款选择日历的比较好用的插件。有的时候我们需要只能让客户
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值