My97 DatePicker切换日期类型

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）按时间切换

My97 DatePicker切换日期类型相关推荐

Element日期选择器带快捷选项切换日期类型
需求: 如图,日期选择器弹出框快捷选项切换日期类型,高亮显示. 思路: 两种类型的日期弹窗点击快捷选项切换显示,通过ref控制弹出关闭handleClose()和聚焦显示focus(). 实现代码: ...
js中的日期控件My97 DatePicker
使用WdatePicker插件来渲染日期类型的页面. 以下代码用到的属性有: isShowClear是否显示清空按钮 skin皮肤的样式 readOnly是否只读 maxDate:最大的选择时间 &l ...
做最好的日期控件,My97 DatePicker
http://www.cnblogs.com/my97/p/3368393.html 做最好的日期控件,My97 DatePicker 4.8 Beta4 4.8更新的内容 [新增]preload预载 ...
绿色日期控件皮肤 My97 DatePicker
因项目需要,给 My97 DatePicker 新做了一个绿色的皮肤详细的使用方法见:http://aweb.cc/article/detail/id/508.html 文件尺寸 24.52 K ...
JS日历插件 - My97 DatePicker
文章整理之My97 DatePicker官网,使用版本为4.8 Beta4. My97DatePicker基本用法 1. My97DatePicker是一款非常灵活好用的日期控件.使用非常简单. 1. ...
让my97 datepicker兼容ie9、ie10、ie11
问题1:my97 datepicker 不能弹出日期下拉框. 解决方法: 1.下载最新版本http://www.my97.net/dp/down.asp 2.修改WdatePicker.js文件 ...
切换日期_2.4.14-切换时区分析
1. 简介功能名称:分析模型支持切换分析时区简称:切换时区分析本功能为高级功能本功能为高级功能,默认不开启,请联系客户成功开启功能. 1.1. 物理时间.显示时间在使用本功能之前,需要首先理 ...
my97 datepicker 自定义事件
自从My97 DatePicker(WdatePicker)官网不能访问后,有关他的资料个别的少,本资料从伟大的互联网图书馆中找出分享给大家 1.自定义事件如果你需要做一些附加的操作,你也不必担心, ...
My97 DatePicker普通调用
My97 DatePicker普通调用 1.设计源码 <%@ page language="java" import="java.util.*" page ...

My97 DatePicker切换日期类型

My97 DatePicker切换日期类型相关推荐

最新文章

热门文章