Jquery控制My97DatePicker控件的日期格式

最新推荐文章于 2024-07-29 15:03:26 发布
最新推荐文章于 2024-07-29 15:03:26 发布
阅读量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
咖啡加糖_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
日期控件My97 DatePicker 的使用
chuowen140381的博客
07-24 727
1.解压后添加My97DatePicker文件夹 2.引入WdatePicker.js文件 日期控件My97DatePicker的使用.html <!DOCTYPEhtml> <html> <head> <met...
My97DatePicker时间控件使用
低调的http://
07-10 613
My97DatePicker是一款非常灵活好用的日期控件。使用非常简单。  1、下载My97DatePicker组件包  2、在页面中引入该组件js文件：        3、页面使用两个方式：      常规调用:        图标触发：                     注:$dp.$ 相当于 document.getElementById   
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 115
一、格式说明 y 将年份表示为最多两位数字。如果年份多于两位数，则结果中仅显示两位低位数。  yy  同上，如果小于两位数，前面补零。  yyy 将年份表示为三位数字。如果少于三位数，前面补零。  yyyy 将年份表示为四位数字。如果少于四位数，前面补零。  M 将月份表示为从 1 至 12 的数字  MM 同上，如果小于两位数，前面补零。  MMM 返回月份的缩写 一月 至 十二月...
My97date日期控件
最新发布
xjdkxnhcoskxbco的博客
07-29 206
9My97date日期控件，我们将该控件拷贝到项目中导入WdatePicker.js。在文本框添加onclick 事件指向WdatePicker()即可。
php日期格式化年月日时分秒,My97DatePicker设置日期年月日时分秒格式
weixin_39739170的博客
03-09 210
前端 JavaScript 日期插件 My97DatePicker 非常出名。N多年以前我就使用过，当时下载了之后，使用的时候默认是没有小时，分钟，秒之类的，直接是年月日的日期格式，跟一般的日期插件没有什么不同。后来找了文档才知道可以设置日期格式、最大日期限制和最小日期限制等。当我今天再去他们官网下载使用时，发现下载包的Demo中依然没有告诉用户怎么设置日期格式，默认的只显示年月日，不知道他们为什...
My97DatePicker的基本时间格式的使用
阿武刚巴得
06-10 1207
一.下载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 314
//可以选择月份，只能选择当月及当月之前的月份 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日期插件，jquery校验插件validation，js
04-16
My97DatePicker是一款在中国广泛应用的JavaScript日期选择插件，它为网页提供了强大的日期输入功能，具有易用性、灵活性和自定义性等优点。这款插件最初由My97 Design开发，因此得名My97 DatePicker。在网页设计中，...
My97DatePicker-WdatePicker4.8日历插件附详细示例
05-23
此日期插件功能还可以，用着挺顺手。目前的版本是:4.8 正式版 。 附详细实例教程，参考我的博客 https://blog.csdn.net/lianzhang861/article/details/80425968
jQuery Datepicker 日期选择插件
03-24
NULL 博文链接：https://xuwoool.iteye.com/blog/1114167
My97DatePicker
09-28
My97DatePicker,支持静态限制，动态限制，脚本自定义限制，以及无效天和无效日期功能，利用这样功能可以任意定制不能选择的日期，这些日期即使毫无规律，毫无连续性，也可以通过这些功能的组合使用轻松搞定·
jquery时间控件 My97DatePicker
06-16
【jQuery时间控件 My97DatePicker】是一款广泛应用于网页中的日期选择插件，以其便捷性和易用性在IT行业中颇受欢迎。它允许用户通过简单的HTML和JavaScript代码就能在网页上添加一个功能强大的日期选择器，极大地...
My97DatePicker.zip
08-12
在实际开发中，My97 DatePicker 可以方便地与其他JavaScript库（如jQuery）结合使用，通过API接口实现更复杂的功能，如日期限制、自定义事件处理等。此外，由于其源码开放，开发者还可以深入研究和扩展其功能，以...
根据条件决定My97DatePicker日期控件弹出的日期格式
weixin_30463341的博客
11-03 68
代码如下： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>根据条件决定My97DatePicker日期控件弹出的日期格式</title> 6 <...
js插件---日期控件My97DataPicker的使用
zuihongyan518的博客
12-07 767
1. 注意事项 （1）My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名； （2）各目录及文件的用途:         WdatePicker.js 配置文件,在调用的地方仅需使用该文件,可多个共存,以xx_WdatePicker.js方式命名         config.js 语言和皮肤配置文件,无需引入(4.8以后合并入Wdate...
mydatepicker97复选日期功能实现
Demon丶冷漠
05-28 547
近日在做一个需求，需要日期可以复选，翻了些许资料，发现mydatepicker97并不支持复选，想要支持复选，需要自己重写一些方法，其实实现的原理也很简单，代码很简单，一看便知。以下代码本人以亲自实验，没有问题。欢迎大家批评指正哈！！！！！ js代码如下： //日期控制事件 function chooseDate() { var nowDate = $("#billM...
My97DatePicker设置日期范围限制教程
"这篇文章主要讲解了如何在JQuery日历插件My97DatePicker中设置日期范围限制，提供了多个示例来演示不同类型的限制方法。" 在开发网页时，经常需要使用日期选择功能，My97DatePicker是一款非常流行的JQuery日历插件...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值