如何修改My97Date日期插件在本页面的样式;

最新推荐文章于 2021-03-06 18:43:37 发布
最新推荐文章于 2021-03-06 18:43:37 发布
阅读量1.6k 收藏
点赞数
分类专栏： 前端插件的使用 文章标签： my97date插件样式修改 my97date my97date样式修改
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32091599/article/details/53483310
版权

第一步 ：找到WdatePicker.js      在里面搜索“<iframe”  给 这个标签添加id=myiframe

修改前： 

var B = "<iframe  style=\"width:1px;height:1px\" src=\"" + _.$dpPath + "My97DatePicker.htm\" frameborder=\"0\" border=\"0\" scrolling=\"no\"></iframe>";

修改后

var B = "<iframe id=\"myiframe\" style=\"width:1px;height:1px\" src=\"" + _.$dpPath + "My97DatePicker.htm\" frameborder=\"0\" border=\"0\" scrolling=\"no\"></iframe>";

第二步：我们的html页面

<script>

function UpdateDeta(){
$("#myiframe").load(function(){
        $(this).contents().find("div[class=WdateDiv]").css('width','166px');;
    });
}
</script>
</head>
<body οnlοad="UpdateDeta()">



function UpdateDeta(){
$("#myiframe").load(function(){
        $(this).contents().find("div[class=WdateDiv]").attr('style','width:300px;border-radius:15px');;
    });
}
</script>
</head>
<body οnlοad="UpdateDeta()">


如果需要修改所有的日期样式：那么直接到插件的额css库(下面的css)去修改

My97DatePicker/skin/default/datepicker.css


java-wujun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
my97强大的日历时间控件可以随心修改
04-29
日历时间控件，很强大的API，自己可以随心改。
My97DatePicker绿色样式时间控件
05-18
My97DatePicker绿色样式时间控件
日期控件：My97DatePicker
qq_34590943的博客
08-16 284
最简单的应用： 1、引入js 2、设置格式yyyy-MM-dd HH:mm:ss、yyyy-MM-dd、yyyy-MM             value="2013-03"             onclick="WdatePicker({el:this,isShowOthers:true,dateFmt:'yyyy-MM-dd'});"/> 3、
My97DatePicker日历控件
System Architect
12-30 1445
本文转载，详情请访问官方网站 http://www.my97.net/dp/index.asp 一. 简介 1. 简介 目前的版本是:4.7 2. 注意事项 My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名 My97DatePicker.htm是必须文件,不可删除 各目录及文件的用途: WdatePicker.js 配置文件
My97DatePicker 与 某个CSS冲突 ，导致无法显示
weixin_30588827的博客
09-16 110
调试 Metronic3.7 模版 ，boostrap的时间插件不怎么好用，改用My97DatePicker， 发现某个与plugins.css中某个插件冲突，经排查发现 css 中有这一段 iframe[src="about:blank"] { display: none;} 而My97DatePicker 弹出选择窗口时 弹出的iframe src="about:blank" 所以...
java my97_My97DatePicker时间选择器
weixin_35256987的博客
03-06 368
示例5-2-2 使用onpicked实现日期选择联动选择第一个日期的时候,第二个日期选择框自动弹出日期从: 至注意:下面第一个控件代码的写法至注意:$dp.$是一个内置函数,相当于document.getElementByIdx示例5-2-3 将选择的值拆分到文本框年 月 日 时 分 秒 年 月 日 时 分 秒function pickedFunc(){$dp.$('d523_y').value=...
时间日期插件 datePicker 可以自定义样式和效果
08-30
jquery.datePicker日历控件应用text文本框弹出日历表与默认显示日历表 jquery.datePicker日历控件应用input:text文本框弹出日历表选择日期时间，设置默认显示日历表展示。jquery日历控件下载。
My97DatePicker日期插件，使用简单方便
01-29
My97DatePicker是一款广泛应用于网页开发中的日期选择插件，尤其在中文环境下有着较高的使用率。这款插件以其简洁的API、丰富的自定义选项以及良好的兼容性，深受开发者喜爱。以下将详细介绍My97DatePicker的基本...
My97DatePicker日期插件
08-16
My97DatePicker是一款在中国广泛应用的JavaScript日期选择插件，它为网页开发提供了强大的日期选择功能。这款插件以其丰富的自定义选项、良好的兼容性和用户体验而备受赞誉。在本文中，我们将深入探讨My97DatePicker...
My97DatePickerBeta日期插件及使用方法
11-25
My97DatePicker是一款在中国广泛应用的JavaScript日期选择插件，它为网页开发提供了高效、易用的日期输入解决方案。这款插件以其丰富的功能、良好的用户体验和高度的可定制性，在IT行业中备受青睐。以下是对My97...
My97DatePicker.[已经集成N多种主题皮肤]
03-19
My97DatePicker.[已经集成N多种主题皮肤]
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
10-19
接下来，将详细介绍推荐的三款日期选择插件：My97DatePicker、jquery.datepicker和Mobiscroll，并详细介绍它们各自的特点、使用方法以及适用场景。 1. My97DatePicker My97DatePicker是一款纯原生JS开发的日期选择...
时间控件my97date例子附说明
08-16
首先，My97Date是一个开源的JavaScript插件，它提供了丰富的自定义选项，支持多种日期格式，并且能够适应各种浏览器环境，包括老版本的IE浏览器，这在描述中被提到的“兼容的也比较多”就是指这一点。它不仅可以在...
My97时间插件使用、My97设置日期控件日期格式
前端_小学生的博客
07-27 1256
My97设置日期控件日期格式 需要什么格式的只需要修改dateFmt的值就可以了 <input type="text" id="d233" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"/> yMdHmswW分别代表年月日时分秒星期周,你可以任意组合这些元素来自定义你个性化的日期格式 ...
在MVC中My97date应用C#扩展方法
dianbaxie9259的博客
10-04 67
项目中用的my97date,其他字段是用@Html.EditorFor(model => model.字段)绑定的，但日历控件是用<input />绑定的，但这样写并不是特别好。 为了也能用@HTML绑定属性，用了扩展方法。代码如下： public static class My97DatePicker { private stat...
功能强大界面漂亮的js日期控件 My97 DatePicker Ver 2.1
hingwu的专栏
05-17 7293
  功能强大界面漂亮的js日期控件 特别提醒:2.1版本是一次重要的更新,推荐原2.0用户升级,2.1版本是完全兼容2.0的,所以升级方法很简单,只要用2.1的文件覆盖原2.0对于文件即可,在调用的地方不需要做任何修改/****************************************************** 2.1版更新说明(2.1是一次很重要的更新)* 日期范围限制,
日历组件My97DatePicker的使用
qq_36994788的博客
12-10 426
My97DatePicker是一个非常使用的组件，它的界面组成为一个时间的下拉框，通过选择可以将下拉框中的日期加载到对应的文本框中，效果如下图所示一、My97DatePicker的使用过程1.自己可以去网上下载一个My97DatePicker的组件2.将解压后的文件之间拷贝到WebRoot目录下就行了3.接着我们就要对My97DatePicker进行配置了，首先对日历组件的显示页面进行配置，找到需要
机器学习模型评估与优化：常用方法与实践技巧.md
最新发布
08-15
机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器学习模型机器
my97datePicker日期插件 请用js html 写一个简易的实现
06-10
好的，以下是一个使用my97DatePicker插件的简易实现： 首先，在HTML页面中引入相关的CSS和JavaScript文件： ```html <link rel="stylesheet" type="text/css" href="skin/WdatePicker.css"> <script src="WdatePicker.js"></script> ``` 然后，在需要添加日期选择器的地方添加一个input标签，设置其class为Wdate，同时添加一个按钮，通过调用JavaScript函数来触发日期选择器： ```html <input type="text" class="Wdate" id="myDate"> <button onclick="selectDate()">选择日期</button> ``` 接下来，在JavaScript中定义selectDate()函数，在该函数中调用WdatePicker()函数来弹出日期选择器： ```javascript function selectDate() { WdatePicker({ el: 'myDate', dateFmt: 'yyyy-MM-dd', readOnly: true, autoPickDate: true, maxDate: '%y-%M-%d' }); } ``` 在上述代码中，我们通过传递一个对象参数给WdatePicker()函数来设置日期选择器的一些属性，例如： - el：指定需要绑定日期选择器的输入框ID。 - dateFmt：指定日期格式，这里设置为年月日。 - readOnly：设置输入框为只读，只能通过日期选择器来选取日期。 - autoPickDate：设置自动选中当前日期。 - maxDate：指定可选的最大日期为当前日期。 这样，当用户点击“选择日期”按钮时，就会弹出日期选择器，用户可以选择一个日期，选择后会自动填充到输入框中。 以上就是一个简单的使用my97DatePicker插件的实现示例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值