My97 DatePicker切换日期类型

最新推荐文章于 2022-04-18 09:57:27 发布
最新推荐文章于 2022-04-18 09:57:27 发布
阅读量270 收藏
点赞数
文章标签： javascript ViewUI

1、问题背景

日期类型：按日、按月、按年和按时间，切换到不同的类型，日历控件显示不同的日期


2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>my97datepicker切换日期类型</title>
		<script type="text/javascript" src="../js/jquery-1.12.3.js" ></script>
		<script type="text/javascript" src="../js/My97DatePicker/WdatePicker.js"></script>
		<script>
			$(document).ready(function(){
				$("#selectDate").change(function(){
					var date = $(this).val();
					if(date=="0")
					{
						$("#date").empty().html('<input type="text" id="day" name="day" class="Wdate" onClick="WdatePicker({startDate:\'%y-%M-%d\',dateFmt:\'yyyy-MM-dd\',alwaysUseStartDate:true})"/>');
					}
					else if(date=="1")
					{
						$("#date").empty().html('<input type="text" id="month" name="month" class="Wdate" onClick="WdatePicker({startDate:\'%y-%M\',dateFmt:\'yyyy-MM\',alwaysUseStartDate:true})"/>');
					}
					else if(date=="2")
					{
						$("#date").empty().html('<input type="text" id="year" name="year" class="Wdate" onClick="WdatePicker({startDate:\'%y\',dateFmt:\'yyyy\',alwaysUseStartDate:true})"/>');
					}
					else if(date=="3")
					{
						$("#date").empty().html('<input type="text" id="startTime" name="startTime" class="Wdate" onClick="WdatePicker({startDate:\'%y-%M-01 00:00:00\',dateFmt:\'yyyy-MM-dd HH:mm:ss\',alwaysUseStartDate:true})"/>至<input type="text" id="endTime" name="endTime" class="Wdate" onClick="WdatePicker({startDate:\'%y-%M-%d 23:59:59\',dateFmt:\'yyyy-MM-dd HH:mm:ss\',alwaysUseStartDate:true})"/>');
					}
				});
			});
		</script>
	</head>
	<body>
		<div>
			<select id="selectDate" style="width: 200px;">
				<option value="0">按日</option>
				<option value="1">按月</option>
				<option value="2">按年</option>
				<option value="3">按时间</option>
			</select>
		</div>
		<br>
		<div id="date">
			<input type="text" id="day" name="day" class="Wdate" onClick="WdatePicker({startDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd',alwaysUseStartDate:true})"/>
		</div>
	</body>
</html>

3、实现结果

（1）按日切换


（2）按月切换


（3）按年切换


（4）按时间切换


iteye_8264
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
My97DatePicker日期控件的使用及MySql中datetime数据类型显示时间去掉.0的问题
qq_41172565的博客
04-23 545
还是毕业设计中遇到的问题，使用Myeclipse做网页，如何点击输入框就能自己选择日期时间呢？此时日历控件就非常方便了，我使用的是My97DatePicker日期控件，先上效果图： 如上图所示，一个是只显示年月日，另一个则可以精确到秒，下面是该控件的官网地址，可以直接下载：http://www.my97.net 下载完成后解压到当前文件夹，此时获得一个名字为My97DatePicker的文件夹，...
My97DatePicker前端日期插件
07-23
My97DatePicker是一款广泛应用于前端开发中的日期选择插件，主要特点是其简洁的用户界面和强大的功能特性。这款插件由国内开发者设计，为网页表单中的日期输入提供了方便、高效的解决方案，尤其适用于需要日期验证的...
My97 DatePicker 日期格式
weixin_34128839的博客
01-07 109
一、格式说明 y 将年份表示为最多两位数字。如果年份多于两位数，则结果中仅显示两位低位数。  yy  同上，如果小于两位数，前面补零。  yyy 将年份表示为三位数字。如果少于三位数，前面补零。  yyyy 将年份表示为四位数字。如果少于四位数，前面补零。  M 将月份表示为从 1 至 12 的数字  MM 同上，如果小于两位数，前面补零。  MMM 返回月份的缩写 一月 至 十二月...
Jquery控制My97DatePicker控件的日期格式
babyduncan的专栏
11-15 241
最近的项目，要取时间段进行统计，按照年月日时等方法，取按年统计的时候，我们希望时间控件只能选择年，按照月统计时候，我们希望只能选择年月这两项，因此写了这个小程序。 firefox测试可用。 [code="java"] 测试jquery控制My97DatetimePicker格式 $(document).ready(func...
WdatePicker 年、季度、月、周、日、小时6种日期类型共用一个日期控件时，切换日期类型之后选择日期还是切换之前的日期类型问题解决
旭东怪的博客
11-11 619
问题描述： 默认日期类型为周，将日期类型切换至年，选择日期的时候发现日期类型为周，但是调试的时候发现日期控件的onclick属性为年类型的日期格式。 问题分析： 切换日期类型的时候，只是将日期控件的onclick属性重新替换，这种替换方法容易出错。 问题解决： 切换日期类型的时候，将日期控件重新替换就不会出问题了。 详细的解决步骤请参考以下博客。 WdatePicker 实现年、季度、月、周、日、小时6种日期类型共用一个日期控件 ...
element-ui的el-date-picker设置月份和年份日期格式及格式校验问题
热门推荐
滚蛋吧，生活。
11-01 2万+
项目需求，在设置日期的时候选择年份和月份，对应的可以设置出只选择某一年或者某一月。这是完成后要求的 这样实现不是难事，主要是需要保存下来的数据也是如2018-01和2018这样的，而不是。2018-01-01这样的所有。代码如下 这里主要是这几个属性起作用 format ，type ，value-format ， @change type设置为date,则就是普通的2018-01-01日期...
My97DatePicker日期插件，使用简单方便
01-29
插件支持多种日期格式，如yyyy-MM-dd、yyyy/MM/dd等，并且能够根据用户的操作习惯自动切换日期和时间的输入方式。 2. 使用方法： 在网页中使用My97DatePicker非常简单。首先，你需要在HTML文件中引入My97...
My97DatePicker4.7.2 日期控件
04-04
My97DatePicker是一款广泛应用于Web开发中的JavaScript日期选择控件，尤其在中文环境下非常流行。它的版本号4.7.2表明这是一个经过多次迭代优化的成熟产品，旨在为用户提供便捷、美观的日期输入体验。这款控件以其...
My97DatePicker日期控件
04-07
My97DatePicker是一款在中国广泛应用的JavaScript日期选择器控件，尤其在Web开发中十分常见。它提供了丰富的功能和自定义选项，使得用户可以方便地在网页上进行日期选择操作，提高了用户体验。以下是对这款控件的...
基于My97DatePicker的日期时间控件
11-29
4. **语言支持**：默认情况下，My97 DatePicker使用中文显示，但可以通过设置`lang`属性切换其他语言，如英文（'en'）。 5. **自定义样式**：控件的外观可以通过修改CSS文件进行定制，以匹配网站的整体设计风格。 ...
DatePicker 日期选择器
Lizejin961019的博客
06-28 859
vue的官网：https://element.eleme.cn/#/zh-CN/component/date-picker <el-date-picker size="mini" v-model="selectedTime" type="month" :placeholder="new Date().format('yyyy-MM')" format="yyyy 年 MM 月" value-fo
elementui datepicker 类型切换 弹出框 的坑
SanOrintea的博客
04-18 1668
datepicker类型切换的时候，从type=‘date’ 切换到 type = ‘month’ 是没问题的。 但是从这两种切换到type = ‘datetimerange’ 会引起弹出框错位到左上角。 <el-date-picker v-model="dataForm.date" :type="dateType.type" :format="dateType.format"
My97DatePicker 按天 按周 按月 按季 按年查询 亲测有效
MaxVelika的博客
04-10 1027
http://www.cnblogs.com/kevin-zlg/p/4631413.html 前台页面需要使用日期控件时，同事选择了My97DatePicker，功能还是挺强大的，在使用过程中需要实现按日、按周、按月、按季度、按年选择时间的功能。 控件自身提供了按日、按月和按年选择的功能，但是选择周和选择季度没有，鉴于方便，在选择周时就使用了选择日的状态，选择了日后再计算这...
element的el-date-picker切换type时面板样式错乱
whisperSec的博客
11-02 1455
问题： 最近在使用el-date-picker的时候发现了个问题，当切换年月日时修改对应type，el-date-picker的弹窗样式会错乱，就像这样： 解决方法 手动给el-date-picker动态添加key即可 <el-date-picker v-model="value" :key="dateType == 0 ? 'key1' : 'key2' " :type="dateType == 0 ? 'year' : 'month' " placeholder="请选择日期"&gt
时间控件：my97DatePicker选择年、季度、月、周、日
Denny辉的博客
05-26 2万+
一直以来，用的最多的就是my97DatePicker获得年月日的方法，今天突然逛到了这篇文章，留下来，以备以后使用自己写的一个：获取年月，并从下个月开始计算 [html] view plain copy print?<asp:TextBox ID=“txt_date_1” runat=“server” Width=“90%” onClick=“WdatePicker({dateFmt:’yyyy-M
WdatePicker日历控件使用方法
weixin_30246221的博客
08-10 1278
1. 跨无限级框架显示 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,因为My97日期控件是可以跨无限级框架显示的 示例2-7 跨无限级框架演示 可无限跨越框架iframe,无论怎么嵌套框架都不必担心了,即使有滚动条也不怕 2. 民国年日历和其他特殊日历 当年份格式设置为yyy格式时,利用年份差量属性yearOff...
My97DatePicker的基本时间格式的使用
阿武刚巴得
06-10 1186
一.下载My97DatePicker组件包下载地址:http://www.my97.net/dp/down.asp（官方下载地址）二.具体使用  1.在页面中引用该组件JS文件:  &lt;script type="text/JavaScript" src="My97DatePicker/WdatePicker.js"&gt;&lt;/script&gt; 2:源代码(仅供参考,具体情况,具体分析...
My97DatePicker
weixin_30872499的博客
07-14 2728
1. 简介 目前的版本是:4.0 Prerelease 发布于2008-04-02 2. 注意事项 My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名 My97DatePicker.htm是必须文件,不可删除 各目录及文件的用途: WdatePicker.js 配置文件,在调用的地方仅需使用...
用My97DatePicker日期框架取得时间后转换为可在javascript中比较的Date类型
xiaobc1234的专栏
04-12 1480
function check(){   var start = document.getElementById("startTime").value;   var end = document.getElementById("endTime").value; //  var start_date = Date.parse(start.replace(/-/g,"/"));   var st
my97datePicker日期插件
最新发布
06-10
my97DatePicker是一个开源的日期选择器插件，它基于JavaScript和CSS开发，可以方便地在网页中添加日期选择器。 my97DatePicker支持多种日期格式，包括yyyy-MM-dd、yyyy年MM月dd日、MM/dd/yyyy等等。它还支持选择...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值